React Router-da ildiz marshrutini yaratish

Ko'pincha asosiy sahifaga olib boradigan asosiy marshrut ildiz marshruti (root route) deb ataladi, chunki boshqa marshrutlar uning ichida renderlanadi. Uni alohida komponent sifatida tasavvur qilish juda qulay. Shuning uchun keling, ilovamizni qayta olaylik va src papkasida yana bitta papka yaratamiz va unga routes nomini beramiz. Endi ushbu papkada Root alohida React komponenti uchun root.jsx faylini yaratamiz. Fayldagi kod quyidagicha ko'rinadi:

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

export default Root;

Endi keling, main.jsx faylining bir bo'lagidagi kodga o'zgartirishlar kiritamiz, chunki element qiymati sifatida biz endi Root komponentini uzatamiz, va uning tarkibi endi alohida root.jsx faylida joylashgan:

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

main.jsx dagi import qatorini unutmaymiz komponentimiz bilan:

import Root from './routes/root';

Oldingi darslarga bag'ishlangan vazifalarda yaratgan ilovangizni oching. Ildiz marshruti uchun alohida React komponenti Root ni alohida faylda root.jsx da yarating, bu darsda tavsiflanganidek. O'zgarishlarni main.jsx ga kiriting.