Tutoriel React — Chapitre 14

Plan du chapitre

• 1) SPA : pourquoi a-t-on besoin d’un router ?
• 2) Installation de React Router
• 3) Mise en place : BrowserRouter + Routes + Route
• 4) Créer des “pages” (composants dédiés)
• 5) Navigation : Link et NavLink
• 6) Route 404 (page introuvable)
• 7) Paramètres d’URL : /users/:id + useParams
• 8) Navigation programmée : useNavigate
• 9) Erreurs fréquentes
• 10) Résumé (à retenir)
• 11) Exercice pratique (débutant)

1) SPA : pourquoi a-t-on besoin d’un router ?

Une application React classique est une SPA (Single Page Application). Cela signifie : le navigateur charge une seule page (souvent index.html), puis React change l’interface sans recharger la page.

Problème : si vous tapez /about dans la barre d’adresse, comment React sait quoi afficher ? C’est précisément le rôle du router.

2) Installation de React Router

Dans votre projet Vite/React, installez React Router DOM :

npm install react-router-dom

Ensuite, vous l’utiliserez dans votre code avec des imports (ex : BrowserRouter, Routes, Route).

3) Mise en place : BrowserRouter + Routes + Route

L’idée : vous placez un “contexte de navigation” autour de votre application, puis vous déclarez les routes dans <Routes>.

Étape A — Encapsuler l’app dans BrowserRouter (dans src/main.jsx)

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Étape B — Déclarer les routes (dans src/App.jsx)

import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home.jsx";
import About from "./pages/About.jsx";

export default function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

4) Créer des “pages” (composants dédiés)

Bonne pratique : créer un dossier src/pages pour les pages. Chaque page est un composant React simple.

Exemple : src/pages/Home.jsx

export default function Home() {
  return (
    <main>
      <h1>Accueil</h1>
      <p>Bienvenue sur mon application.</p>
    </main>
  );
}

Exemple : src/pages/About.jsx

export default function About() {
  return (
    <main>
      <h1>À propos</h1>
      <p>Cette page explique le projet.</p>
    </main>
  );
}

5) Navigation : Link et NavLink

Dans une SPA, on évite <a href="..."> pour naviguer, car cela peut provoquer un rechargement. On utilise Link (ou NavLink pour un menu avec style “actif”).

A) Link (navigation simple)

import { Link } from "react-router-dom";

export default function Navbar() {
  return (
    <nav>
      <Link to="/">Accueil</Link>
      {" | "}
      <Link to="/about">À propos</Link>
    </nav>
  );
}

B) NavLink (mettre en évidence la page courante)

import { NavLink } from "react-router-dom";

export default function Navbar() {
  return (
    <nav>
      <NavLink to="/">Accueil</NavLink>
      {" | "}
      <NavLink to="/about">À propos</NavLink>
    </nav>
  );
}

NavLink peut ajouter une classe “active” selon la route (selon la version/config). On reviendra dessus quand on fera un menu plus stylé.

6) Route 404 (page introuvable)

Si l’utilisateur va sur une URL inconnue, vous voulez afficher une page 404. React Router permet de créer une route “catch-all” avec *.

import NotFound from "./pages/NotFound.jsx";

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="*" element={<NotFound />} />
</Routes>

7) Paramètres d’URL : /users/:id + useParams

Très courant : une page “détail” avec un identifiant dans l’URL, par exemple : /users/42. On écrit cela avec un paramètre : /users/:id.

A) Déclarer la route

<Route path="/users/:id" element={<UserDetails />} />

B) Lire le paramètre avec useParams

import { useParams } from "react-router-dom";

export default function UserDetails() {
  const { id } = useParams();

  return (
    <main>
      <h1>Utilisateur {id}</h1>
    </main>
  );
}

8) Navigation programmée : useNavigate

Parfois, vous voulez naviguer après une action : après une connexion, après un formulaire, après un clic “Voir profil”… On utilise useNavigate.

import { useNavigate } from "react-router-dom";

export default function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // ... (validation / auth)
    navigate("/"); // redirection vers l’accueil
  };

  return <button onClick={handleLogin}>Se connecter</button>;
}

9) Erreurs fréquentes

10) Résumé (à retenir)

• React Router associe URL → composant.
• On enveloppe l’app dans <BrowserRouter> (souvent dans main.jsx).
• On déclare les routes avec <Routes> et <Route>.
• On navigue avec <Link to> (pas <a href>).
• Routes dynamiques : /users/:id + useParams.
• Navigation programmée : useNavigate.

11) Exercice pratique (débutant)

Objectif : créer une mini-app avec navigation et une route dynamique.

Étape 1 — Pages

• Créez Home et About dans src/pages.
• Ajoutez une page NotFound.

Étape 2 — Routes

• Configurez BrowserRouter dans main.jsx.
• Dans App.jsx, ajoutez les routes /, /about, et *.

Étape 3 — Menu

• Créez un composant Navbar avec des Link vers Accueil et À propos.
• Affichez le menu au-dessus de <Routes>.

Bonus — Route dynamique

• Créez une page UserDetails et une route /users/:id.
• Dans Home, ajoutez un lien vers /users/1 et /users/2.