Nested Routes

React 🟡 Mid

Definition

Routes imbriquees ou les routes enfants s'affichent a l'interieur du layout de leur route parent via Outlet, permettant des layouts partages et une navigation hierarchique.

Analogie

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

Exemple de code

// /dashboard -> Layout + DashboardHome
// /dashboard/settings -> Layout + Settings
<Route path="dashboard" element={<DashLayout />}>
  <Route index element={<DashHome />} />
  <Route path="settings" element={<Settings />} />
</Route>

Cas d'usage

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

#routing