Routes imbriquées (`Outlet`)

Structurer les interfaces complexes : L'intérêt des routes imbriquées

Au fur et à mesure que les applications React gagnent en complexité, il devient courant d'avoir des mises en page où certaines parties de l'interface restent constantes tandis qu'une section spécifique change en fonction de la navigation. Pensez à un tableau de bord avec une barre latérale de navigation persistante, un profil utilisateur avec différents onglets (informations, paramètres, activité), ou une section de produits avec des sous-catégories.

Plutôt que de dupliquer la mise en page commune (la barre latérale, l'en-tête du profil) dans chaque composant de vue enfant, React Router propose une solution élégante : les routes imbriquées (nested routes). Cela permet de définir une hiérarchie de routes où les routes enfants sont rendues à l'intérieur du composant de la route parente.

Cette approche favorise la réutilisation du code, améliore l'organisation de la structure de routage et facilite la maintenance des mises en page partagées.

Définir des routes imbriquées dans la configuration

La définition de routes imbriquées se fait de manière intuitive en plaçant des composants `` à l'intérieur d'autres composants `` dans votre configuration ``.

La route parente définit un chemin et un composant de layout. Les routes enfants définissent des chemins relatifs à leur parent et les composants spécifiques à afficher dans ce layout.

Considérons un exemple de tableau de bord :

// Dans App.js ou votre fichier de configuration des routes
import React from 'react';
import {
  BrowserRouter,
  Routes,
  Route,
} from 'react-router-dom';

import Accueil from './pages/Accueil';
import DashboardLayout from './layouts/DashboardLayout'; // Le layout parent
import DashboardAccueil from './pages/DashboardAccueil'; // Contenu par défaut du dashboard
import DashboardProfil from './pages/DashboardProfil';
import DashboardParametres from './pages/DashboardParametres';
import PageNonTrouvee from './pages/PageNonTrouvee'; // Pour la gestion 404

function App() {
  return (
    
      
        } />

        {/* Route parente pour le tableau de bord */}
        }>
          {/* Routes enfants imbriquées */}
          {/* 'index' indique la route par défaut pour /dashboard */}
          } /> 
          } /> 
          {/* path="profil" est relatif, URL complète: /dashboard/profil */}
          } />
          {/* URL complète: /dashboard/parametres */}
         { /* Fin de la route parente /dashboard */}

        {/* Route pour gérer les 404 */}
        } />
      
    
  );
}

export default App;

Points clés de cette structure :

• La route `/dashboard` rend le composant `DashboardLayout`.
• Les routes enfants (`index`, `profil`, `parametres`) sont définies *à l'intérieur* de la route parente `/dashboard`.
• Les `path` des routes enfants (`profil`, `parametres`) sont relatifs au chemin de leur parent. React Router les combine pour former l'URL complète (ex: `/dashboard` + `profil` = `/dashboard/profil`).
• La route avec la prop `index` est spéciale : elle utilise le chemin exact du parent (`/dashboard`) et définit le contenu à afficher par défaut lorsque l'URL correspond au chemin du parent mais à aucune autre route enfant plus spécifique.

Le composant `` : Le point de rendu des enfants

La simple définition des routes imbriquées ne suffit pas. Il faut indiquer au composant de la route parente (`DashboardLayout` dans notre exemple) où le composant de la route enfant active doit être rendu.

C'est le rôle du composant `` fourni par `react-router-dom`. Il agit comme un placeholder dans le JSX du composant parent. Lorsque l'URL correspond à l'une des routes enfants, React Router rendra l'élément (`element`) de cette route enfant à l'endroit où `` est placé.

Voici à quoi pourrait ressembler notre `DashboardLayout` :

// layouts/DashboardLayout.js
import React from 'react';
import { Outlet, Link } from 'react-router-dom'; // Importer Outlet

function DashboardLayout() {
  return (
    

      

      

        {/* C'est ici que le contenu des routes enfants sera rendu */}
        
      
    
  );
}

export default DashboardLayout;

Lorsque l'utilisateur navigue vers :

• `/dashboard` : `` rendra le composant `` (défini par la route `index`).
• `/dashboard/profil` : `` rendra le composant ``.
• `/dashboard/parametres` : `` rendra le composant ``.

Le layout commun (la div principale en flex, la barre de navigation latérale) reste présent, seul le contenu rendu par `` change.

Composants enfants et conclusion

Les composants rendus par les routes enfants (`DashboardAccueil`, `DashboardProfil`, `DashboardParametres`) sont des composants React tout à fait normaux. Ils n'ont pas besoin d'être conscients qu'ils sont rendus via une route imbriquée (sauf s'ils ont besoin d'accéder à des paramètres ou à des informations de la route parente, ce qui est possible mais moins courant).

// pages/DashboardProfil.js
import React from 'react';

function DashboardProfil() {
  return (
    

      
Mon Profil
      
Informations détaillées sur l'utilisateur...
      {/* Contenu spécifique au profil */}
    
  );
}

export default DashboardProfil;

En résumé, les routes imbriquées, combinées au composant ``, constituent un pattern puissant dans React Router pour construire des interfaces utilisateur hiérarchiques et complexes. Elles permettent de partager efficacement des éléments de mise en page, de découpler les composants de layout des composants de contenu spécifiques, et de structurer logiquement les différentes sections d'une application, rendant le code plus propre, plus modulaire et plus facile à gérer.