Tutoriel React — Chapitre 15

Plan du chapitre

• 1) Pourquoi un layout ?
• 2) Comprendre <Outlet />
• 3) Routes imbriquées (nested routes)
• 4) Route index (page par défaut)
• 5) Menu “actif” avec NavLink
• 6) Liens relatifs et bonnes pratiques
• 7) Organisation des fichiers (pages / layouts)
• 8) Erreurs fréquentes
• 9) Résumé (à retenir)
• 10) Exercice pratique (débutant)

1) Pourquoi un layout ?

Dans une app, certaines parties restent identiques quelle que soit la page : un menu, un header, un footer, un container, etc. Si vous les dupliquez dans chaque page, vous perdez du temps et vous multipliez les risques d’incohérence.

La solution : un composant Layout qui contient la structure commune, et une zone qui change en fonction de la route. Cette zone changeante est gérée par <Outlet />.

2) Comprendre <Outlet />

<Outlet /> est un emplacement réservé : React Router y affichera le contenu de la route enfant actuellement active.

Exemple de layout minimal

import { Outlet } from "react-router-dom";
import Navbar from "../components/Navbar.jsx";

export default function MainLayout() {
  return (
    <div>
      <Navbar />

      <div style={{ padding: 16 }}>
        <Outlet />
      </div>
    </div>
  );
}

Ici, le menu reste fixe, et la page active s’affiche dans l’Outlet.

3) Routes imbriquées (nested routes)

Pour utiliser <Outlet />, il faut déclarer des routes imbriquées : une route “parent” (le layout), et des routes “enfants” (les pages).

Exemple (dans App.jsx)

import { Routes, Route } from "react-router-dom";
import MainLayout from "./layouts/MainLayout.jsx";

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

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

      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

4) Route index (page par défaut)

Une route index correspond à la page affichée quand l’URL est exactement celle du parent. Dans l’exemple précédent :

• / → route parent "/" + enfant index → Home
• /about → route parent "/" + enfant "about" → About

Pourquoi c’est utile ?

Parce que vous gardez un layout unique pour tout un “groupe de pages”, avec une page par défaut (index) sans écrire des chemins compliqués.

5) Menu “actif” avec NavLink

Dans un menu, on aime voir où l’on se trouve (page active). NavLink permet de styliser automatiquement le lien actif.

Exemple de Navbar.jsx

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

export default function Navbar() {
  const linkStyle = ({ isActive }) => ({
    fontWeight: isActive ? "700" : "400",
    textDecoration: "none",
    marginRight: 12
  });

  return (
    <nav>
      <NavLink to="/" style={linkStyle} end>Accueil</NavLink>
      <NavLink to="/about" style={linkStyle}>À propos</NavLink>
    </nav>
  );
}

Point important : end sur Accueil signifie “actif uniquement sur /”. Sans end, le lien Accueil serait aussi considéré actif sur /about (car / est un préfixe).

6) Liens relatifs et bonnes pratiques

Quand vous imbriquez des routes, vous pouvez utiliser des liens absolus (/about) ou relatifs (ex : depuis /, to="about").

A) Lien absolu (simple à comprendre)

<NavLink to="/about">À propos</NavLink>

B) Lien relatif (pratique dans certains layouts)

<NavLink to="about">À propos</NavLink>

7) Organisation des fichiers (pages / layouts)

Voici une structure simple et très utilisée :

src/
├─ App.jsx
├─ main.jsx
├─ components/
│  └─ Navbar.jsx
├─ layouts/
│  └─ MainLayout.jsx
└─ pages/
   ├─ Home.jsx
   ├─ About.jsx
   └─ NotFound.jsx

• pages/ : composants “pages” (routés)
• layouts/ : structures communes (avec Outlet)
• components/ : composants UI réutilisables (menu, bouton, etc.)

8) Erreurs fréquentes

9) Résumé (à retenir)

• Un layout évite de dupliquer menu/structure sur chaque page.
• <Outlet /> est la “zone” où s’affiche la route enfant active.
• Routes imbriquées : <Route path="/" element={...}> ... </Route>.
• index sert de page par défaut du parent.
• NavLink permet de styliser le lien actif ; end est crucial pour "/".

10) Exercice pratique (débutant)

Objectif : construire une mini app avec layout + routes imbriquées.

Étape 1 — Layout

• Créez src/layouts/MainLayout.jsx avec un menu + <Outlet />.
• Créez src/components/Navbar.jsx avec NavLink.

Étape 2 — Pages

• Créez Home, About, NotFound dans src/pages.
• Ajoutez un petit texte différent dans chaque page.

Étape 3 — Routes imbriquées

• Dans App.jsx, mettez MainLayout sur path="/".
• Ajoutez une route enfant index pour Home.
• Ajoutez une route enfant path="about" pour About.
• Ajoutez une route * pour la 404.

Bonus

Ajoutez une page “Contact” et un lien dans le menu. Vérifiez que le lien actif change correctement.