React Nested Routes Explained — Layouts and Sub-routes

In this tutorial, you will learn about React Nested Routes Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

React nested routes let you compose layouts hierarchically by defining routes within routes, using the Outlet component to render child content inside parent layouts.

What You'll Learn

• How to create layout routes with Outlet
• How to define nested route configurations
• How relative links work in nested routes
• How to build multi-level navigation

Why It Matters

Nested routes eliminate layout duplication. The sidebar, header, and footer render once in the parent layout, and only the content area changes when navigating between children.

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

function DashboardLayout() {
  return (
    <div style={{ display: "flex" }}>
      <nav style={{ width: 200, background: "#f3f4f6", padding: 16 }}>
        <Link to="overview">Overview</Link>
        <Link to="analytics">Analytics</Link>
        <Link to="reports">Reports</Link>
      </nav>
      <main style={{ flex: 1, padding: 24 }}>
        <Outlet />
      </main>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="dashboard" element={<DashboardLayout />}>
        <Route index element={<Overview />} />
        <Route path="analytics" element={<Analytics />} />
        <Route path="reports" element={<Reports />} />
      </Route>
    </Routes>
  );
}

Expected output: Navigating within /dashboard/* preserves the sidebar layout. Only the main content area updates.