React Nested Routes with Outlet, Layouts, and Index Routes

🔍 What Is It?

Nested routes are routes defined as children of a parent route. The parent renders a layout component that includes an <Outlet /> placeholder. When a child route matches, React Router renders the child's component inside the <Outlet />.

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route path="overview" element={<OverviewPage />} />
  <Route path="claims" element={<ClaimsPage />} />
  <Route path="settings" element={<SettingsPage />} />
</Route>

Navigating between /dashboard/overview and /dashboard/claims:

• →DashboardLayout stays mounted (sidebar, header persist)
• →Only the content inside <Outlet /> changes

🎯 Why Do We Need It?

Without nested routes, every page component would need to include its own header, sidebar, and navigation. This means:

• →Duplicated layout code across every page
• →Layout components remounting on navigation (losing scroll position, state)
• →Inconsistent UI if any page forgets a layout element

Nested routes separate shared layout from child content. The layout can remain mounted as matched children change; it can still re-render in response to navigation or other React updates.

🏗️ What Happens in Real Projects?

Every enterprise app uses nested routes:

• →Dashboard apps — sidebar + header layout wraps all dashboard pages
• →Settings pages — settings nav on the left, specific settings on the right
• →Admin panels — admin layout with breadcrumbs wraps all admin pages
• →Multi-step wizards — progress indicator persists across all steps

⚙️ How It Works

1. Define parent route with a layout component that includes <Outlet />
2. Define child routes nested inside the parent in the route config
3. When a child route matches, React Router renders the child's element in place of <Outlet />
4. The parent layout can stay mounted during sibling navigation. It can still re-render when location, context, props, or state change; re-rendering does not imply remounting.

Index routes:

<Route index element={<DefaultPage />} /> — renders when the parent path matches exactly (no child path). Used to show a default view at the parent URL. An index route has no path and cannot have children.

Layout routes versus path prefixes

A route with an element and no path shares UI without adding a URL segment. A route with a path and no element adds a URL prefix without introducing a layout component. If a parent element renders UI, it needs an <Outlet /> for its child elements to appear.

Blank child page checklist

• →Put <Outlet /> in every layout or authentication wrapper that has child route elements.
• →Nest child <Route> elements inside the intended parent route.
• →Use relative child paths such as settings, which inherit the parent prefix.
• →Add an index route if the parent URL should show a default child view.
• →If children are declared in a separate descendant <Routes>, the ancestor route needs a trailing /* to match deeper URLs. Directly nested route declarations do not need that splat.

💻 Example

Nested Routes in a Dashboard Application — Layout component with Outlet and nested route configuration.

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

function DashboardLayout() {
  return (
    <section>
      <h1>Dashboard</h1>
      <nav>
        <NavLink to="/dashboard" end>Overview</NavLink>
        <NavLink to="settings">Settings</NavLink>
      </nav>
      <Outlet />
    </section>
  );
}

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

// /dashboard          -> DashboardLayout + Overview page
// /dashboard/settings -> DashboardLayout + Settings page

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits