Bases de React Router : BrowserRouter, Routes, explication des Route et Link

La plupart des applications React nécessitent rapidement plusieurs écrans, tels que Accueil, À propos, Produits et Contact. React ne dispose pas de concept de URL, ce qui laisse la tâche de mapper les adresses aux écrans à une bibliothèque, généralement React Router. Quatre de ses composants couvrent la plupart des cas d’usage courants en matière de routage : <BrowserRouter>, <Routes>, <Route> et <Link>. Une fois que vous connaissez la fonction de chacun d’eux ainsi que leur manière de s’emboîter, vous pouvez créer une application monopage à plusieurs pages et en expliquer le fonctionnement lors d’un entretien.

BrowserRouter relie React aux URL

<BrowserRouter> est le routage lui-même. Il permet un routage côté client grâce à l’API History du navigateur, en maintenant l’interface affichée en synchronisation avec la barre d’adresses sans devoir demander un nouveau document au serveur.

Utilisez-le lorsque votre application doit exposer des URL distinctes pour ses écrans tout en fonctionnant comme une seule page, par exemple :

/
/about
/products
/contact

La configuration consiste à envelopper l’arbre de vos composants ; tout ce qui nécessite un routage doit se trouver à l’intérieur :

import { BrowserRouter } from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      {/* Application routes */}
    </BrowserRouter>
  );
}

Vous le placez généralement une seule fois, à la racine. Une conséquence pratique : comme des chemins tels que /about sont des URL réelles, votre hébergeur doit servir le même index.html pour tous, sinon un renouvellement de la page sur /about génère une erreur 404 du serveur.

Les routes déterminent ce qui est affiché

<Routes> est le conteneur pour vos définitions de routes. Lorsque l’URL change, il compare cette dernière avec ses éléments enfants et affiche celui qui correspond. Utilisez-le chaque fois que c’est React Router, et non des conditions manuellement écrites, qui doit décider quel écran s’affiche :

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/products" element={<Products />} />
</Routes>

Ici, un élément <Routes> gère les trois chemins. Il sélectionne la meilleure correspondance plutôt que la première indiquée, vous n’ayant donc presque jamais à vous soucier de l’ordre.

Une route associe un chemin à un élément

Chaque <Route> met en correspondance un chemin URL avec le composant à afficher, comme une entrée dans un tableau de recherche :

/about → About component
/products → Products component

En ajoutez un pour chaque URL qui doit afficher quelque chose de spécifique. Les propriétés clés sont path et element:

<Route
  path="/about"
  element={<About />}
/>

Avec cette définition, une visite à cette adresse :

/about

fait en sorte que React Router affiche :

<About />

Notez que element prend un élément déjà rendu (<About />), et non une référence à un composant, ce qui vous permet de transmettre directement des propriétés. Plusieurs routes ensemble ont cet aspect :

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/contact" element={<Contact />} />
</Routes>

Si aucun chemin ne correspond, rien n’est affiché dans ce bloc ; une route de catch-all avec path="*" est la méthode habituelle pour afficher une page « non trouvée ».

Lien qui navigue sans rechargement

<Link> permet de déplacer l’utilisateur d’une route à une autre tout en maintenant l’application chargée. Il affiche un élément <a> ordinaire dans le DOM, mais intercepte le clic pour laisser React Router gérer la navigation. Utilisez-le pour une navigation interne, comme dans une barre de navigation :

import { Link } from "react-router-dom";
function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

En cliquant sur About, l’URL est mise à jour, <Routes> est réévalué, et l’écran « À propos » s’affiche sans rechargement du navigateur, ce qui permet au layout partagé et à l’état en mémoire de persister. Pour des sites externes, un simple <a> reste approprié.

Assembler les quatre éléments

Une configuration minimale complète (avec Home, About et Contact définis ailleurs) :

import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Les liens et le bloc <Routes> sont des éléments frères à l’intérieur de <BrowserRouter> : la navigation reste visible sur chaque page, tandis que seule la région <Routes> change de contenu. En bref, la hiérarchie est la suivante :

BrowserRouter
      ↓
    Routes
      ↓
    Route
      ↓
  Component

<Link> se trouve à côté de cette chaîne et sert de bouton que les utilisateurs cliquent pour modifier l’URL. Les exemples importent depuis react-router-dom ; les versions majeures récentes exposent également ces API depuis le package react-router, il convient donc de consulter la documentation correspondant à votre version.

Questions d’entretien

• Qu’est-ce que <BrowserRouter> ? C’est le routeur qui permet le routage côté client et maintient l’interface utilisateur en synchronisation avec l’URL du navigateur.

En quoi <Routes> et <Route> diffèrent-ils ? <Routes> est le conteneur qui correspond à l’URL ; chaque <Route> définit un chemin ainsi que l’élément à afficher.

En quoi <Link> diffère-t-il de <a> ? <Link> permet de naviguer côté client sans rechargement complet ; un simple <a> fait charger à nouveau l’URL par le navigateur.

Pourquoi privilégier <Link> dans une application React Router ? Il permet à l’application de rester une application single-page et évite des rechargements inutiles de toute la page.

Un <Route> peut-il fonctionner sans <BrowserRouter> ? Normalement non : les composants de routage doivent être affichés à l’intérieur d’un contexte de routeur comme <BrowserRouter>.

Points clés

• <BrowserRouter> active le routage, une seule fois, au niveau de la racine.
• <Routes> gère les routes et affiche celle qui correspond.
• <Route> associe une URL à un composant.
• <Link> permet de passer d’une route à une autre sans rechargement.

Les routes imbriquées, les segments dynamiques, les routes protégées ainsi que les hooks de navigation s’appuient tous sur ce même modèle. Pour savoir comment React décide quoi réafficher lorsque la route change, consultez construire un modèle mental pour la réconciliation de React et les hooks.

Lectures complémentaires

• Construire un modèle mental pour React : Reconciliation, State et Hooks — Découvrez les principes sous-jacents aux concepts fondamentaux de React — reconciliation, composants, props, state et hooks — afin de développer une intuition plutôt que de mémoriser des API.
• React 19.2 expliqué : Activity, useEffectEvent et rendering statique — Apprenez comment le nouveau composant Activity, l’hook useEffectEvent et le rendering statique partiel de React 19.2 corrigent les coûts de performance cachés dans les interfaces utilisateur modernes.