Introduction à React Router

Installation de React Router

Pour ajouter React Router à votre application, exécutez cette commande dans le terminal à partir du répertoire racine de l’application :

npm i -D react-router-dom

Si vous passez de la version v5, vous devrez utiliser le drapeau @latest :

npm i -D react-router-dom@latest

Source 2

Définition des routes

Ensuite, nous définissons nos <Routes>. Une application peut avoir plusieurs <Routes>. Notre exemple de base n’utilise qu’une seule. Les <Route> peuvent être imbriquées. La première <Route> a un chemin de / et rend le composant Layout. Les <Route> imbriquées héritent et ajoutent au chemin parent. Donc le chemin blogs est combiné avec le parent et devient /blogs. Le composant Home route n’a pas de chemin mais a un attribut index. Cela spécifie cette route comme la route par défaut pour la route parent, qui est /. Définir le chemin à * agira comme un attrape-tout pour toute URL non définie. C’est super pour une page d’erreur 404.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
function App() {
  return (
    <Router>
      <Routes>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

Source 2

Ces exemples montrent comment installer et configurer React Router dans une application React, ainsi que comment définir des routes pour différents composants.