📖 Notes LESSON 13 OF 18

Nested Routes & Layouts

⏱️ 20 min

⚛️ React

Shared Layouts Without Repeating Code

Nested routes let a layout (like a dashboard sidebar) wrap multiple child pages, rendering only the changing part through an Outlet — instead of repeating the sidebar in every page component.

Layout Pattern

Outlet & Index Routes

🖼️

Layout Component

Uses <Outlet /> as a placeholder for whichever child route is active.

🌳

Nesting Routes

A parent <Route> with element={Layout} wraps child <Route>s.

📍

index Route

Renders when the parent path matches exactly, no extra segment.

♻️

Why It Matters

The sidebar renders once; only the Outlet content changes as the user navigates.

Dashboard Layout with Nested Routes

JSX

function DashboardLayout() {
  return (
    <div className="dashboard">
      <Sidebar />
      <main><Outlet /></main>
    </div>
  );
}

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<Home />} />
  <Route path="courses" element={<MyCourses />} />
  <Route path="progress" element={<Progress />} />
</Route>

← Lesson 12: React Router — Setup & Routes Lesson 14: memo, useMemo & useCallback →