Création d'une route racine dans React Router

La route principale, menant à la page d'accueil, est souvent appelée route racine (root route), car les autres routes seront rendues à l'intérieur de celle-ci. Il est très pratique de la représenter comme un composant distinct. Reprenons donc notre application et dans le dossier src créons un autre dossier que nous nommerons routes. Maintenant, dans ce dossier, créons un fichier root.jsx pour un composant React distinct Root. Le code dans le fichier ressemblera à ceci :

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

export default Root;

Maintenant, modifions un morceau de code du fichier main.jsx, car pour la valeur de element nous allons désormais passer le composant Root, et son contenu se trouve maintenant dans un fichier séparé root.jsx :

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

N'oublions pas la ligne d'importation de notre composant dans main.jsx :

import Root from './routes/root';

Ouvrez l'application que vous avez créée dans les missions des leçons précédentes. Créez un composant React séparé Root pour la route racine dans un fichier séparé root.jsx, comme décrit dans cette leçon. Apportez les modifications nécessaires dans votre main.jsx.