Nested Routes

Nested routes let you render child components inside a parent route.

<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="stats" element={<Stats />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

Inside the parent (Dashboard) component, use <Outlet /> to render the nested content.

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

function Dashboard() {
  return (
    <>
      <h2>Dashboard</h2>
      <Outlet />
    </>
  );
}