Nested Routes

Définition

Routes imbriquées ou les routes enfants s'affichent a l'intérieur du layout de leur route parent via Outlet, permettant des layouts partages et une navigation hiérarchique.

Analogie

Comme des poupées russes : chaque layout contient le suivant, et seul le contenu le plus interne change.

Exemple de code

// Mode data (v7/v8) : `Component` remplace `element`
// /dashboard -> DashLayout + DashHome
// /dashboard/settings -> DashLayout + Settings
const router = createBrowserRouter([
  {
    path: 'dashboard',
    Component: DashLayout,
    children: [
      { index: true, Component: DashHome },
      { path: 'settings', Component: Settings },
    ],
  },
]);

Cas d'usage

Applications avec des layouts hiérarchiques (sidebar fixe, breadcrumbs dynamiques, multi-step wizards).

Termes liés

Sources

• reactrouter.com/start/modes