React Router'до тамыр маршрут түзүү

Көбүнчө башкы баракка алып барган негизги маршрутту тамыр (root route) маршруту деп аташат, анткени башка маршруттар анын ичинде рендерленет. Аны бөлүнчө компонент катары көрсөтүү абдан ыңгайлуу. Ошондуктан келгиле, биздин колдонмону кайра алып, src папкасында дагы бир папка түзүп, аны routes деп атайлы. Эми ушул папкада root.jsx файлын түзөбүз, ал бөлүнчө Root React компоненти үчүн болот. Файлдагы код төмөнкүдөй көрүнөт:

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';

Өзүңүз мурунку сабактардын тапшырмаларында түзгөн колдонмонузду ачыңыз. Тамыр маршруту үчүн бөлүнчө Root React компонентин root.jsx файлында түзүңүз, бул сабакта сүрөттөлгөндөй. Өзүңүздүн main.jsx файлыңызга өзгөртүүлөрдү киргизиңиз.