Juurmarsruudi loomine React Routeris

Sageli nimetatakse põhimarsruuti, mis viib avalehele, juurmarsruudiks (root route), kuna teised marsruudid renderdatakse selle sees. Väga mugav on kujutada seda eraldi komponendina. Seega võtame uuesti oma rakenduse ja kaustas src loome veel ühe ja nimetame selle routes. Nüüd loome selles kaustas faili root.jsx eraldi React komponendi Root jaoks. Kood failis näeb välja selline:

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

export default Root;

Ja nüüd teeme muudatusi faili main.jsx osas, kuna väärtusena element edastame nüüd komponendi Root, ja selle sisu asub nüüd eraldifailis root.jsx:

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

Ärgem unustagem importimise rida meie komponendiga failis main.jsx:

import Root from './routes/root';

Avage rakendus, mille lõite eelmiste õppetundide ülesannetes. Looge juurmarsruudi jaoks eraldi React komponent Root eraldi failis root.jsx, nagu on kirjeldatud selles õppetükis. Tehke muudatused oma failis main.jsx.