Het aanmaken van een root route in React Router

De hoofdroute, die naar de hoofdpagina leidt, wordt vaak de wortelroute (root route) genoemd, omdat andere routes erin worden gerenderd. Het is erg handig om het als een aparte component voor te stellen. Laten we daarom onze applicatie opnieuw nemen en in de map src nog een map aanmaken en deze routes noemen. Nu maken we in deze map een bestand root.jsx aan voor een aparte React-component Root. De code in het bestand ziet er als volgt uit:

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

export default Root;

En laten we nu wijzigingen aanbrengen in een stukje code van het bestand main.jsx, omdat we als waarde voor element nu de component Root doorgeven, en de inhoud ervan zich nu in een apart bestand root.jsx bevindt:

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

Laten we de importregel met onze component in main.jsx niet vergeten:

import Root from './routes/root';

Open de applicatie die je hebt gemaakt in de opdrachten bij eerdere lessen. Maak voor de root route een aparte React component Root aan in een apart bestand root.jsx, zoals beschreven in deze les. Breng wijzigingen aan in je main.jsx.