Installation et configuration de React Router DOM (`BrowserRouter`, `Routes`, `Route`)

Mettre en place react router DOM dans votre projet

Pour implémenter le routage côté client dans une application web React, la bibliothèque de choix est `react-router-dom`. C'est un paquet spécifique de la famille React Router, conçu pour les environnements DOM (navigateurs web). Il fournit les composants et les hooks nécessaires pour gérer la navigation.

La première étape consiste naturellement à ajouter cette bibliothèque à votre projet. Ouvrez votre terminal à la racine de votre projet React et exécutez la commande d'installation correspondant à votre gestionnaire de paquets :

# Avec npm
npm install react-router-dom

# Avec yarn
yarn add react-router-dom

Une fois l'installation terminée, vous êtes prêt à configurer la structure de base du routage. Cette configuration se fait généralement au niveau le plus élevé de votre application, souvent dans le fichier `src/index.js` ou `src/App.js`, afin que tous les composants de l'application aient accès au contexte de routage.

Les composants fondamentaux du routage

React Router DOM repose sur trois composants principaux pour établir le système de routage de base :

1. `BrowserRouter` : Ce composant est le point d'entrée de votre configuration de routage. Son rôle principal est d'utiliser l'API History du HTML5 (`pushState`, `replaceState`, événement `popstate`) pour synchroniser l'interface utilisateur de votre application avec l'URL affichée dans la barre d'adresse du navigateur. Il permet d'avoir des URLs "propres" (ex: `/utilisateurs/123`) sans le caractère `#` typique des anciennes méthodes de routage côté client. Vous devez envelopper la partie de votre application qui nécessite le routage (généralement toute l'application) avec ``. Il crée un contexte de routage que les autres composants et hooks de React Router pourront utiliser.

2. `Routes` : Ce composant est un conteneur pour vos différentes définitions de routes (``). Sa fonction essentielle est d'examiner l'URL actuelle et de rendre le contenu de la première `` enfant qui correspond au chemin (`path`). C'est ce qui garantit qu'une seule route est rendue à la fois pour une URL donnée (évitant ainsi l'affichage simultané de plusieurs pages). Si aucune route ne correspond, `` ne rend rien par défaut (nous verrons plus tard comment gérer les routes "non trouvées" ou 404).

3. `Route` : C'est le composant qui définit la correspondance entre un chemin d'URL (`path`) et le composant React (`element`) qui doit être rendu lorsque ce chemin est actif. Chaque `` doit être un enfant direct de ``. Ses deux props principales sont :

• `path`: Une chaîne de caractères qui représente le segment d'URL à faire correspondre (ex: `/`, `/a-propos`, `/produits/:id`).
• `element`: Le composant React (passé comme une expression JSX, par exemple ``) à afficher lorsque le `path` correspond à l'URL actuelle.

Exemple de configuration de base

Voyons comment assembler ces composants dans une configuration typique, souvent réalisée dans le composant principal `App.js` :

Commencez par importer les composants nécessaires depuis `react-router-dom`, ainsi que les composants de vos différentes pages :

// src/App.js
import React from 'react';
import {
  BrowserRouter,
  Routes,
  Route,
} from 'react-router-dom';

// Importez vos composants de page
import Accueil from './pages/Accueil';
import APropos from './pages/APropos';
import TableauDeBord from './pages/TableauDeBord';

function App() {
  return (
    
      {/* Votre layout commun peut aller ici (Navbar, Sidebar, Footer) */}
      

        
          } />
          } />
          } />
          {/* D'autres routes peuvent être ajoutées ici */}
        
      
      {/* Footer commun par exemple */}
    
  );
}

export default App;

Ici, nous avons défini trois routes :

• Lorsque l'URL est exactement `/`, le composant `Accueil` sera rendu.
• Lorsque l'URL est `/a-propos`, le composant `APropos` sera rendu.
• Lorsque l'URL est `/dashboard`, le composant `TableauDeBord` sera rendu.

Le composant `App` lui-même est enveloppé dans ``. Notez que les éléments de mise en page communs (comme une barre de navigation ou un pied de page) peuvent être placés à l'intérieur de `` mais à l'extérieur de ``. De cette façon, ils restent visibles quelle que soit la route active rendue par ``.

Cette structure simple est le fondement de la navigation dans la plupart des applications React. Lorsque l'utilisateur navigue (via des liens que nous verrons ensuite, ou en tapant directement l'URL), React Router intercepte le changement, le composant `` trouve la `` correspondante et affiche le composant spécifié dans la prop `element`.

Il est important de noter que le composant `` choisit la correspondance la plus spécifique. Avec les versions récentes de React Router (v6 et supérieures), l'ordre des routes est moins critique qu'auparavant pour les chemins simples, car il privilégie les correspondances exactes, mais il reste pertinent pour des scénarios plus complexes (comme les routes avec paramètres ou les routes "catch-all" pour les 404, que nous aborderons plus loin).