Ustvarjanje korenskega poti v React Router

Glavna pot, ki vodi na domačo stran, se pogosto imenuje korenska pot (root route), saj se bodo druge poti upodabljale znotraj nje. Zelo priročno je, da jo predstavimo kot ločeno komponento. Zato vzemimo znova našo aplikacijo in v mapi src ustvarimo še eno in jo poimenujmo routes. Sedaj v tej mapi ustvarimo datoteko root.jsx za ločeno React komponento Root. Koda v datoteki bo videti takole:

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

export default Root;

In sedaj predelajmo delček kode datoteke main.jsx, saj bomo kot vrednost element zdaj podali komponento Root, njena vsebina pa je zdaj v ločeni datoteki root.jsx:

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

Ne pozabimo vrstice za uvoz z našo komponento v main.jsx:

import Root from './routes/root';

Odprite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Ustvarite za korensko pot ločeno React komponento Root v ločeni datoteki root.jsx, kot je opisano v tej lekciji. Spremenite vaš main.jsx.