Maintenant que nous avons encapsulé notre application avec BrowserRouter pour activer le routage, l'étape suivante consiste à spécifier les routes (chemins) que notre application inclura. Ces routes déterminent la structure globale de l'application et contrôlent le contenu affiché en fonction de l'URL.

React Router fournit deux composants essentiels pour définir les routes : Routes et Route. Le composant Routes agit comme un conteneur pour toutes les définitions de routes, tandis que le composant Route représente une configuration de route spécifique.

Voici la syntaxe pour définir des routes :

<Routes>
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
</Routes>

Dans cette structure :

• <path_value> : Spécifie la configuration de l'URL pour la route ;
• <component_to_render> : Détermine le composant à afficher lorsqu'un utilisateur navigue vers ce chemin spécifique.

Exemple

Appliquons ce concept à notre projet. Ouvrez le fichier App.jsx et importez les composants Routes et Route depuis la bibliothèque react-router-dom :

import { Routes, Route } from "react-router-dom";

Dans l'instruction return du composant App, définissez les routes de notre application :

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contacts" element={<ContactsPage />} />
      </Routes>
    </>
  );
};

Explication du code :

• Ligne 4, 8 : <Routes> : Ce composant sert de conteneur pour la définition des routes dans l'application, agissant comme composant parent pour les définitions de routes individuelles ;
• Ligne 5 : <Route> : Représente une définition de route. Elle spécifie que lorsque le chemin de l'URL correspond à /, le composant <HomePage /> doit être affiché ;
• Ligne 6 : <Route> : Définit une autre route. Lorsque le chemin de l'URL correspond à /about, le composant <AboutPage /> sera affiché ;
• Ligne 7 : <Route> : Définit une autre route. Lorsque le chemin de l'URL correspond à /contacts, le composant <ContactsPage /> sera affiché.