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 :

routes/root.jsxfunction 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 :

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

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

main.jsximport Root from './routes/root';