Route index dans React Router

Dans cette leçon, nous allons découvrir ce que sont les routes index.

Pour commencer, remarquons une chose. Lorsque nous sommes sur la page d'accueil, à droite nous voyons simplement un écran vide. C'est parce qu'aucune des routes enfants ne correspond à l'adresse /, et nous n'avons pas dit quoi afficher dans ce cas. Dans une telle situation, pour éviter d'afficher une page vide, on peut utiliser une route index - une route enfant qui n'a pas de chemin (path), et dont l'élément est affiché dans le Outlet parent lorsqu'aucune des routes enfants ne correspond. De telles routes peuvent être utilisées pour afficher des informations, des statistiques, ou quelque chose de similaire. Comme pour les routes ordinaires, elles peuvent être utilisées pour le chargement de données.

Créons un fichier index.jsx dans le dossier routes, et dedans un composant Index :

export default function Index() {
	return (
		<div>
			<p>Salut, React Router !</p>
			<p>Ceci est une application pour mes produits :)</p>
		</div>
	);
}

Maintenant, allons dans main.jsx et importons-y notre composant Index :

import Index from './routes/index';

Et ajoutons comme premier élément du tableau children un objet où la propriété index est définie sur true, et comme élément à afficher, notre composant Index :

{ index: true, element: <Index /> },

Prenez l'application que vous avez créée dans les exercices de la leçon précédente. En utilisant le matériel de la leçon, ajoutez une route index pour la page d'accueil avec un texte quelconque.