Nested Routes

Nested routes render child routes inside a parent layout via <Outlet />. Dashboards, admin panels, and settings pages use this pattern for persistent sidebars and headers while content swaps.

Layout Routes with Outlet

A parent route renders a layout component containing <Outlet />. Child routes render into that outlet when their path matches. The parent stays mounted — preserving layout state.

Relative Link and Route paths simplify nested configuration without repeating full URL prefixes.

function DashboardLayout() {
  return (
    <div className="dashboard">
      <Sidebar />
      <main><Outlet /></main>
    </div>
  );
}

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<Overview />} />
  <Route path="settings" element={<Settings />} />
</Route>

/dashboard/settings renders DashboardLayout with Settings in the Outlet.

Nested Route Structure

<Route path="parent" element={<Layout />}>
  <Route index element={<Default />} />
  <Route path="child" element={<Child />} />
</Route>

Parent must render <Outlet /> for children to appear.
Child paths are relative to parent unless leading /.
Index route shows when URL matches parent exactly.
Layout state (sidebar collapse) persists across child navigation.

Nested Routing Reference

Nested route concepts at a glance.

Concept	Detail
`<Outlet />`	Child route render target
Index route	Default child at parent URL
Relative path	`settings` under `/dash` → `/dash/settings`
Layout persistence	Parent stays mounted
`<Outlet context>`	Pass data to child routes
Breadcrumbs	Derive from route matches

Outlet Context

Pass data from layout to child routes without prop drilling using <Outlet context={{ user }} /> and useOutletContext().

// Layout
<Outlet context={{ filters }} />
// Child
const { filters } = useOutletContext();

Multiple Outlets (Advanced)

Named outlets are not first-class in RR v6 like Vue. Use nested layouts or composition patterns for multiple simultaneous panes.

Common Mistakes

Forgetting Outlet — child routes render nothing visible.
Using leading / on nested paths unintentionally breaking nesting.
Remounting layout by keying parent incorrectly.
Duplicating layout markup in every child instead of nesting.

Key Takeaways

Nested routes share a parent layout via Outlet.
Child paths are relative to parent route.
Index routes provide default child content.
Outlet context passes data to nested route components.

Pro Tip

Use useMatches() to build breadcrumbs from the active route chain automatically.