Nested Routes and Outlet

A parent route renders a shared layout; <Outlet /> marks where the matching child route appears.

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

function DashboardLayout() {
  return (
    <div>
      <Sidebar />
      <main><Outlet /></main>
    </div>
  );
}