React Nested Routes & Layouts – Build Scalable Route Structures (2025 Guide)

Introduction – Why Nested Routes & Layouts Matter

As React.js applications grow, organizing pages into nested routes and shared layouts becomes essential. With React Router v6+, it’s easier than ever to create structured, maintainable routing systems using nested <Route> components and the powerful <Outlet /> component for rendering child routes.

In this guide, you’ll learn:

• How to define nested routes in React Router
• How to use layouts with <Outlet />
• Best practices for organizing multi-level navigation
• Real-world use cases like dashboards and profile pages

1. What Are Nested Routes?

Nested routes allow you to create a parent-child route structure, where child routes are rendered inside the parent component without reloading or duplicating layout code.

Example:

• /dashboard → renders Dashboard layout
• /dashboard/stats → renders inside Dashboard
• /dashboard/settings → same layout, different content

2. Setup React Router with Nested Routes

Wrap App with <BrowserRouter>:

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter>
  <App />
</BrowserRouter>

Define Routes with Nesting:

import { Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import Stats from './pages/Stats';
import Settings from './pages/Settings';

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<Dashboard />}>
        <Route path="stats" element={<Stats />} />
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

Stats and Settings are nested under /dashboard

3. Using <Outlet /> for Nested Route Rendering

Inside the parent route component, use <Outlet /> to render its child routes.

Example – Dashboard.jsx:

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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <Link to="stats">Stats</Link>
        <Link to="settings">Settings</Link>
      </nav>
      <hr />
      <Outlet />
    </div>
  );
}

<Outlet /> is a placeholder for child routes

4. Deeply Nested Routes

You can nest routes as deeply as needed:

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="stats" element={<Stats />}>
    <Route path="details" element={<StatsDetails />} />
  </Route>
</Route>

Inside Stats.jsx, use another <Outlet /> to render StatsDetails.

5. Layout Components for Shared UI

Use layout components to wrap multiple pages with shared headers, footers, or sidebars.

Example Layout:

function MainLayout() {
  return (
    <div>
      <Header />
      <main><Outlet /></main>
      <Footer />
    </div>
  );
}

Apply Layout to Routes:

<Route path="/" element={<MainLayout />}>
  <Route index element={<Home />} />
  <Route path="about" element={<About />} />
</Route>

Keeps your app DRY and UI consistent

6. Nested Navigation with <Link> or <NavLink>

<Link to="settings">Settings</Link> // Relative path
<Link to="/dashboard/stats">Stats</Link> // Absolute path

Use relative paths inside nested routes
Use <NavLink> for active link styling

7. Nested Routes Example Structure

src/
├── App.jsx
├── pages/
│   ├── Dashboard.jsx
│   ├── Stats.jsx
│   ├── Settings.jsx
├── layouts/
│   └── MainLayout.jsx

Keep components modular
Use /pages for routes, /layouts for shared UI

Best Practices

Use <Outlet /> for all parent route components
Group routes by feature or layout
Use layout components for shared UI (header, sidebar)
Keep URLs RESTful and meaningful
Add a wildcard route (*) for handling 404s

Summary – Recap & Next Steps

React Router’s nested routes and layout support allow developers to build modular, structured, and reusable routing systems. This enables clean code and consistent UIs across large applications.

Key Takeaways:

• Use nested <Route> components to build hierarchy
• Render child routes using <Outlet />
• Organize shared UI with layout components
• Prefer relative <Link>s inside nested components
• Scale cleanly with modular folders and route configs

Real-World Relevance:
Used in dashboards, portals, admin systems, and apps with multiple views — nested routes simplify route and layout logic in complex React apps like Notion, Stripe Dashboard, and GitHub.

FAQ Section

What does <Outlet /> do in React Router?
It renders the matched child route inside the parent component’s layout.

Can I nest routes infinitely in React?
Yes, but keep your structure manageable and modular.

How do I create layouts with navigation?
Wrap nested routes in a layout component with navigation and use <Outlet /> to render content.

What’s the difference between relative and absolute links?
Relative links (to="settings") are based on the current path. Absolute links (to="/dashboard/settings") start from the root.

Can I use multiple <Outlet />s in one layout?
Not directly — one <Outlet /> per nesting level. You can structure additional routes or fragments inside.