ძირეული მარშრუტის შექმნა React Router-ში

ხშირად მთავარ მარშრუტს, რომელიც მიუთითებს ძირეულ გვერდზე, უწოდებენ ძირეულ მარშრუტს (root route), რადგან სხვა მარშრუტები მასში იქნებიან რენდერდებული. ძალიან მოსახერხებელია მისი წარმოდგენა ცალკე კომპონენტად. ამიტომ, მოდით, კიდევ ერთხელ ავიღოთ ჩვენი აპლიკაცია და src ფოლდერში შევქმნათ კიდევ ერთი და ვუწოდოთ მას routes. ახლა ამ ფოლდერში შევქმნათ ფაილი root.jsx ცალკე React კომპონენტისთვის Root. კოდი ფაილში ასე გამოიყურება:

function Root() {
	return <div>Hello Router!</div>;
}

export default Root;

ახლა კი მოდით შევიტანოთ ცვლილებები main.jsx ფაილის კოდის ნაწილში, რადგან element-ის მნიშვნელობად ჩვენ ახლა გადავცემთ კომპონენტს Root, ხოლო მისი შიგთავსი ახლა განთავსებულია ცალკე ფაილში root.jsx:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
	},
]);

არ დაგვავიწყდეს ჩვენი კომპონენტის იმპორტის სტრიქონი main.jsx-ში:

import Root from './routes/root';

გახსენით აპლიკაცია, რომელიც თქვენ შექმენით წინა გაკვეთილების დავალებებში. შექმენით ძირეული მარშრუტისთვის ცალკე React კომპონენტი Root ცალკე ფაილში root.jsx, როგორც ამ გაკვეთილშია აღწერილი. შეიტანეთ ცვლილებები თქვენს main.jsx ფაილში.