Routes imbriquées dans React Router

Dans cette leçon, nous allons nous familiariser avec les routes imbriquées. Démarrez l'application que nous avons créée dans la leçon précédente. En cliquant sur les liens, nous arrivons sur une page séparée avec le produit. Supposons que cela ne nous convient pas et que nous aimerions que la liste des produits et la page du produit s'affichent côte à côte, sur un même écran pour plus de clarté. Faisons cela.

Pour ce faire, ouvrons le fichier main.jsx et faisons simplement de notre route pour la page produit une route enfant de la route racine ou, en d'autres termes, "imbriquons"-la dans la route racine. Pour cela, utilisons une autre propriété de l'objet route children :

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},

]);

Nous cliquons à nouveau sur les liens, mais à droite de la liste des produits, nous ne voyons rien. Tout cela parce que nous n'avons pas indiqué à la route racine où nous voulons afficher ses routes enfants.

Pour afficher les éléments des routes enfants dans le parent, le composant Outlet nous aidera. Importons-le de la bibliothèque dans le fichier de la route racine :

import { Outlet } from 'react-router-dom';

Ensuite, enveloppons-le dans un div #product et ajoutons-le au layout de la route racine à la fin du code, après la balise fermante nav, et enveloppons le tout dans un autre div #main :

return (
	<div id="main">
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
		<div id="product">
			<Outlet />
		</div>
	</div>
);

En cliquant sur les liens, nous voyons maintenant à la fois la liste des produits et la page du produit.

Ajoutons un peu de style à notre index.css :

h1, h2 {
	margin: 0;
}

div#main {
	display: flex;
	margin: 20px;
}

div#product {
	margin-left: 40px;
}

Prenez l'application que vous avez créée dans l'exercice de la leçon précédente. En utilisant le matériel de la leçon, faites de la route pour la page de l'étudiant une route imbriquée dans la racine.

Et maintenant, faites en sorte qu'en cliquant sur les liens, la liste des étudiants et la page de l'étudiant s'affichent à l'écran.