React Nested Routes

In the last lesson, React Route Parameters, one route handled many URLs. This lesson is about nested routes, where child pages live inside a parent and share its layout.

🤔 Why do we need nested routes?

Here’s the pain. A whole section of your app shares a common frame, and you don’t want to repeat it on every sub-page.

• A dashboard has a sidebar on every one of its pages: Overview, Reports, Settings.
• Without nesting, you’d copy that sidebar into each page component.
• The URLs are related too, like /dashboard, /dashboard/reports, /dashboard/settings.
• You want the shared frame written once, with just the inside swapping.

So nested routes fix this. The parent route holds the shared layout, and child routes fill in the changing part.

🧩 Nesting Route inside Route

You nest by putting Route elements inside another Route. The outer one is the parent layout; the inner ones are the children.

import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<DashboardLayout />}>
        <Route path="overview" element={<Overview />} />
        <Route path="reports" element={<Reports />} />
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

Read the structure top to bottom.

• The parent Route has path="/dashboard" and a layout component, DashboardLayout.
• The child Routes sit inside it, with shorter paths like overview (no leading slash).
• Child paths join onto the parent, so overview becomes /dashboard/overview.
• So /dashboard/reports shows the DashboardLayout with Reports inside it.

🔌 The Outlet: where the child shows up

Here’s the key piece. The parent layout needs to say where the child should appear. You do that with the Outlet component.

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

function DashboardLayout() {
  return (
    <div className="dashboard">
      <aside>Sidebar: links to Overview, Reports, Settings</aside>

      <main>
        <Outlet /> {/* the matching child route renders right here */}
      </main>
    </div>
  );
}

So think of Outlet as the hole in the frame, here’s what it does.

• Outlet is a placeholder inside the parent layout.
• Whichever child route matches the URL gets rendered exactly where Outlet sits.
• So the sidebar stays the same, and only the Outlet spot changes between Overview, Reports, and Settings.
• Without an Outlet, the child has nowhere to appear, so you’d just see the layout with an empty middle.

🏠 An index route for the default child

What should show at /dashboard itself, with no child path? You use an index route, the default child for the parent’s exact path.

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<Overview />} />        {/* shows at /dashboard */}
  <Route path="reports" element={<Reports />} />
  <Route path="settings" element={<Settings />} />
</Route>

Here’s what the index route does.

• index (instead of a path) means “this is the default child for the parent’s path”.
• So visiting /dashboard exactly shows Overview in the Outlet.
• It’s the landing content for the section, so the user sees something without going to /dashboard/overview.

⚠️ Common Mistakes

The biggest mistake is forgetting the Outlet, so children never appear.

// ❌ parent layout with no Outlet - children match but show nothing
function DashboardLayout() {
  return <div><aside>Sidebar</aside></div>;
}

// ✅ add the Outlet where children should render
function DashboardLayout() {
  return <div><aside>Sidebar</aside><Outlet /></div>;
}

Keep these in mind.

• Don’t forget <Outlet /> in the parent, or children render nowhere.
• Don’t put a leading slash on child paths. Use reports, not /reports.
• Don’t repeat the shared layout in each child. That’s the whole thing nesting removes.

✅ Best Practices

A few habits for nested routes.

• Use nesting when a group of pages shares a common layout, like a dashboard or settings area.
• Put the shared frame in the parent’s layout component, with <Outlet /> where children go.
• Keep child paths relative (no leading slash), so they build on the parent path.
• Add an index route for the default content at the parent’s exact path.

🧩 What You’ve Learned

• ✅ Nested routes let child pages share a parent’s layout, written once
• ✅ Nest by putting Route elements inside another Route
• ✅ Child paths are relative, so reports under /dashboard becomes /dashboard/reports
• ✅ The parent layout uses <Outlet /> to mark where the matching child renders
• ✅ Without an Outlet, children match but show nothing
• ✅ An index route sets the default child shown at the parent’s exact path

🚀 What’s Next?

Now you can build sections with shared layouts and sub-pages. So far you’ve only changed pages by typing URLs. Next you’ll add real clickable navigation with the Link component, so users can move between pages.

React Navigation with Link