🪆 Nested Routes and Layout Patterns

Why Nest Routes?

Nested routes let you define routes hierarchically: a parent route renders a layout, and its child routes render inside that layout. The parent stays mounted while children swap. This gives you consistent shells for related sections, no duplicated headers or sidebars, a routing tree that mirrors your UI, and easy data-sharing between parent and child.

🏢 Analogy — an office building. The building (parent route) has one lobby, one elevator bank, one security desk. Each floor (child route) reuses those without rebuilding them; you only change the office you walk into. Moving between rooms on a floor doesn't send you back to the street. Nested routes keep the "building" mounted and just change the "room."

The Dashboard route owns the sidebar and a content slot. As the URL moves between /dashboard, /dashboard/profile, and /dashboard/settings, only the slot changes — the sidebar never re-renders from scratch.

The Outlet Component

<Outlet> is the key to nesting. It's a placeholder the parent renders to say "child routes go here." You nest <Route> elements inside a parent <Route>, and their elements appear wherever the parent placed its <Outlet>.

import { BrowserRouter, Routes, Route, Outlet, Link } from 'react-router-dom';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />

        {/* Parent route renders the Dashboard layout */}
        <Route path="/dashboard" element={<Dashboard />}>
          {/* Child routes render inside Dashboard's <Outlet /> */}
          <Route index element={<DashboardOverview />} />
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Dashboard() {
  return (
    <div className="dashboard">
      <aside className="sidebar">
        <h2>Dashboard</h2>
        <nav>
          <Link to="/dashboard">Overview</Link>
          <Link to="/dashboard/profile">Profile</Link>
          <Link to="/dashboard/settings">Settings</Link>
        </nav>
      </aside>

      <main className="content">
        <Outlet />   {/* <-- child route renders here */}
      </main>
    </div>
  );
}

Key points from this example:

• /dashboard/profile renders Profile inside Dashboard's <Outlet>.
• Child paths are relative — profile becomes /dashboard/profile automatically.
• The sidebar stays mounted across all three child views; only the content slot changes.

Relative links keep nesting maintainable

Inside a nested route you can use relative links so navigation doesn't hard-code the parent path. Change the parent's path once and every relative link follows:

function Dashboard() {
  return (
    <div className="dashboard">
      <nav>
        <Link to=".">Overview</Link>        {/* current route */}
        <Link to="profile">Profile</Link>   {/* child of current */}
        <Link to="settings">Settings</Link>
        <Link to="..">Back up</Link>         {/* parent route */}
      </nav>
      <Outlet />
    </div>
  );
}

Index Routes

What should render at exactly /dashboard, before the user picks Profile or Settings? Without help, the parent renders but its <Outlet> is empty. An index route fills that gap: it's the default child for the parent's exact path.

<Route path="/dashboard" element={<Dashboard />}>
  {/* Renders at exactly /dashboard */}
  <Route index element={<DashboardOverview />} />

  {/* Render at their own paths */}
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

Index routes nest, too. Each layout level can have its own default view:

<Route path="/dashboard" element={<Dashboard />}>
  <Route index element={<DashboardOverview />} />

  <Route path="settings" element={<Settings />}>
    {/* Renders at /dashboard/settings */}
    <Route index element={<GeneralSettings />} />
    <Route path="account" element={<AccountSettings />} />
    <Route path="notifications" element={<NotificationSettings />} />
  </Route>
</Route>

<Route path="/shop" element={<Shop />}>
  <Route index element={<FeaturedProducts />} />      {/* /shop */}

  <Route path="clothing" element={<Clothing />}>
    <Route index element={<AllClothing />} />          {/* /shop/clothing */}
    <Route path="mens" element={<Mens />} />
    <Route path="womens" element={<Womens />} />
  </Route>
</Route>

Layout Route Patterns

A powerful trick: a parent route doesn't need a path at all. A pathless layout route exists purely to wrap a group of children in shared UI, without adding a segment to the URL.

function MainLayout() {
  return (
    <div>
      <SiteHeader />
      <main><Outlet /></main>
      <SiteFooter />
    </div>
  );
}

<Routes>
  {/* No path — just a shared shell for these pages */}
  <Route element={<MainLayout />}>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
  </Route>
</Routes>

Because MainLayout has no path, its children keep their own top-level URLs (/, /about, /contact) while all sharing the same header and footer.

Different layouts for different sections

Combine several layout routes to give public pages, the user dashboard, and the admin console each their own chrome:

<Routes>
  {/* Public pages */}
  <Route element={<MainLayout />}>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Route>

  {/* Signed-in dashboard */}
  <Route path="/dashboard" element={<DashboardLayout />}>
    <Route index element={<DashboardHome />} />
    <Route path="profile" element={<Profile />} />
    <Route path="settings" element={<Settings />} />
  </Route>

  {/* Admin console */}
  <Route path="/admin" element={<AdminLayout />}>
    <Route index element={<AdminHome />} />
    <Route path="users" element={<UserManagement />} />
  </Route>
</Routes>

function DashboardLayout() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  return (
    <div className="dashboard">
      <DashboardSidebar />
      <main><Outlet /></main>
    </div>
  );
}

Deeply Nested Layouts

Layouts compose. A section inside the dashboard can have its own layout — a header and tab bar — nested within the dashboard's shell. This models complex apps cleanly: each level adds exactly the chrome it owns.

function ProjectsLayout() {
  return (
    <div className="projects">
      <header>
        <h1>Projects</h1>
        <Link to="new" className="button">New Project</Link>
      </header>
      <nav className="tabs">
        <NavLink to="." end>All</NavLink>
        <NavLink to="active">Active</NavLink>
        <NavLink to="archived">Archived</NavLink>
      </nav>
      <Outlet />
    </div>
  );
}

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<DashboardOverview />} />

  {/* Projects section adds its own layout inside the dashboard */}
  <Route path="projects" element={<ProjectsLayout />}>
    <Route index element={<AllProjects />} />
    <Route path="active" element={<ActiveProjects />} />
    <Route path="archived" element={<ArchivedProjects />} />
    <Route path=":projectId" element={<ProjectDetails />} />
    <Route path="new" element={<NewProject />} />
  </Route>
</Route>

Navigating to /dashboard/projects/active now renders three nested shells at once:

1. DashboardLayout — global header + sidebar
2. ProjectsLayout — projects header + tab bar
3. ActiveProjects — the actual list

Sharing Data with Outlet Context

A parent route often fetches data (a project, the current user) that its children need. Rather than each child re-fetching, the parent can hand data down through the <Outlet>. React Router provides useOutletContext for exactly this — a lightweight alternative to spinning up a React context.

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

function DashboardLayout() {
  const [theme, setTheme] = useState('light');

  const context = {
    theme,
    toggleTheme: () => setTheme(t => (t === 'light' ? 'dark' : 'light')),
  };

  return (
    <div className={`dashboard ${theme}`}>
      <DashboardSidebar />
      <main>
        {/* Pass shared data to every child route */}
        <Outlet context={context} />
      </main>
    </div>
  );
}

function DashboardOverview() {
  const { theme, toggleTheme } = useOutletContext();
  return (
    <>
      <p>Current theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle theme</button>
    </>
  );
}

Passing fetched data down

A common master-detail pattern: a :projectId route fetches the project once, then shares it with its Overview / Tasks / Team tabs:

function ProjectDetails() {
  const { projectId } = useParams();
  const [project, setProject] = useState(null);

  useEffect(() => {
    let active = true;
    fetch(`/api/projects/${projectId}`)
      .then(r => r.json())
      .then(data => { if (active) setProject(data); });
    return () => { active = false; };
  }, [projectId]);

  if (!project) return <p>Loading project…</p>;

  return (
    <div>
      <h1>{project.name}</h1>
      <nav>
        <NavLink to="." end>Overview</NavLink>
        <NavLink to="tasks">Tasks</NavLink>
        <NavLink to="team">Team</NavLink>
      </nav>
      {/* Share the fetched project with child tabs */}
      <Outlet context={project} />
    </div>
  );
}

function ProjectTasks() {
  const project = useOutletContext();   // the project object
  return (
    <ul>
      {project.tasks.map(t => <li key={t.id}>{t.title}</li>)}
    </ul>
  );
}

Hands-on Exercise

import { BrowserRouter, Routes, Route, Outlet, NavLink, useOutletContext } from 'react-router-dom';

function DashboardLayout() {
  const userName = 'Ray';
  const cls = ({ isActive }) => (isActive ? 'active' : undefined);
  return (
    <div className="dashboard">
      <aside>
        <NavLink to="." end className={cls}>Overview</NavLink>
        <NavLink to="profile" className={cls}>Profile</NavLink>
        <NavLink to="settings" className={cls}>Settings</NavLink>
      </aside>
      <main>
        <Outlet context={{ userName }} />
      </main>
    </div>
  );
}

function Overview() {
  const { userName } = useOutletContext();
  return <h1>Welcome back, {userName}!</h1>;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<DashboardLayout />}>
          <Route index element={<Overview />} />
          <Route path="profile" element={<h1>Profile</h1>} />
          <Route path="settings" element={<h1>Settings</h1>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Best Practices

Summary & Quiz

📚 Further Reading

• Outlet component reference
• useOutletContext hook
• Index routes explained
• Nested routes concepts

🚀 What's Next?

You've finished the routing mini-series. Next up: Memoization with React.memo, where you'll shift from navigation to performance — stopping needless re-renders so your nicely structured app stays fast.