Nested Routes in React Router

Build layout-driven route hierarchies using nested routes and the Outlet component.

Why nested routes

Nested routes help share layout elements like sidebars and headers across child pages.

Example

tsx

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

Render child routes with `Outlet`

tsx

import { Outlet } from 'react-router-dom';

function DashboardLayout() {
  return (
    <section>
      <h1>Dashboard</h1>
      <Outlet />
    </section>
  );
}

Route params

tsx

<Route path="users/:userId" element={<UserDetails />} />

Next, we will secure routes.