React Routerда асосий маршрут яратиш

Кўпинча асосий саҳифага олиб борувчи асосий маршрут асосий маршрут (root route) деб аталади, чунки бошқа маршрутлар унинг ичида рендер бўлади. Уни алохида компонент сифатида тасаввур қилиш жуда қулай. Шу sababli келгила, яна бизнинг иловамизни олиб src папкасида яна бир папка яратиб, унинг номини routes қўйамиз. Энди ушбу папкада алохида React компоненти Root учун root.jsx файлини яратамиз. Файлдаги код шундай кўринади:

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

Сиз ўтган дарслардаги вазифалар учун яратган иловангизни oching. Асосий маршрут учун алохида React компоненти Root ни алохида файлда root.jsx, ушбу дар