Itinéraires dans React Router

Les itinéraires (Routes) sont la partie la plus cruciale d'une application React Router. Examinons un morceau de code de la leçon précédente :

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

Eh bien, les propriétés de l'objet path et element, que nous avons passées à la fonction lors de la création du routeur, sont les propriétés de l'objet Route. En réalité, cet objet possède de nombreuses propriétés, on peut les trouver dans la documentation officielle. À l'avenir, certaines d'entre elles nous seront utiles :

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>;
}

On pourrait utiliser le style JSX alternatif et écrire les propriétés sous forme de props pour le composant Route, alors notre morceau de code ressemblerait à ceci :

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

Et, bien sûr, il aurait fallu ajouter encore quelques lignes à l'import :

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

Les deux styles présentés dans la leçon sont équivalents. Nous continuerons à utiliser la première variante à l'avenir.

Prenez l'application que vous avez créée dans les tâches des leçons précédentes. Essayez de réécrire le morceau de code pour la création du routeur (commentez l'ancien pour l'instant), en utilisant la syntaxe JSX alternative présentée dans la leçon. Assurez-vous que l'application fonctionne.

Remettez en place tout l'ancien code, et supprimez le nouveau. Assurez-vous que l'application fonctionne.