React Router-те түбірлік маршрутты құру

Негізгі бетке апаратын негізгі маршрутты жиі түбірлік маршрут (root route) деп атайды, себебі басқа маршруттар оның ішінде рендерленеді. Оны бөлек компонент ретінде елестету өте ыңғайлы. Сондықтан біз қолданбамызды қайта алып, 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';

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