Routes in React Router

Routes (Routes) zijn het belangrijkste onderdeel van een React Router-applicatie. Laten we een stukje code van de vorige les bekijken:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

Welnu, de eigenschappen van het object path en element, die we hebben doorgegeven aan de functie bij het aanmaken van de router, zijn de eigenschappen van het object Route. Eigenlijk heeft dit object veel eigenschappen, deze zijn te vinden in de officiële documentatie. In de toekomst zullen enkele ervan van pas komen:

interface RouteObject {
	path?: string;
	index?: boolean;
	children?: React.ReactNode;
	caseSensitive?: boolean;
	id?: string;
	loader?: LoaderFunction;
	action?: ActionFunction;
	element?: React.ReactNode | null;
	Component?: React.ComponentType | null;
	errorElement?: React.ReactNode | null;
	ErrorBoundary?: React.ComponentType | null;
	handle?: RouteObject["handle"];
	shouldRevalidate?: ShouldRevalidateFunction;
	lazy?: LazyRouteFunction<RouteObject>;
}

We hadden gebruik kunnen maken van de alternatieve JSX-stijl en de eigenschappen kunnen schrijven als props voor de Route-component, dan zou ons stukje code er zo uitzien:

const router = createBrowserRouter(
	createRoutesFromElements(
		<Route
			path = '/'
			element = {<div>Hello Router!</div>}
		/>
	)
);

En natuurlijk zouden we dan een paar regels aan de import moeten toevoegen:

import {
	createRoutesFromElements,
	createBrowserRouter,
	RouterProvider,
	Route,
} from 'react-router-dom';

Beide stijlen die in de les worden getoond, zijn gelijkwaardig. In de toekomst zullen we de eerste variant aanhouden.

Neem de applicatie die je hebt gemaakt in de opdrachten bij eerdere lessen. Probeer het stukje code voor het aanmaken van de router over te schrijven (commentaar de oude voorlopig even uit), met behulp van de alternatieve JSX-syntax, zoals getoond in de les. Zorg ervoor dat de applicatie werkt.

Zet de oude code weer terug op zijn plaats en verwijder de nieuwe. Zorg ervoor dat de applicatie werkt.