ReviseAlgo Logo

Routing

Nested Routes

Master nested routes in React Router, covering layout inheritance, the Outlet placeholder, relative path mappings, and index routes.

Last Updated: July 15, 2026 • 11 min read

1. Learning Objectives

In this lesson, you will learn how to build nested layout trees. By the end of this topic, you will be able to:

  • Identify layout structures that benefit from nested routing.
  • Render nested child routes using React Router's Outlet component.
  • Configure default pages using Index Routes.
  • Resolve relative path parameters between parent and child routes.
  • Build nested dashboard panels with sidebar navigation menus.

2. Overview

Many websites use persistent layout structures (like dashboards with sidebars or settings panels with headers) where only a sub-section of the page changes as you navigate. React Router uses **Nested Routes** to support this pattern, allowing parent routes to define layouts that render child routes inside an Outlet placeholder.

3. Why This Topic Matters

Nested routing simplifies layout management in large web applications:

  • Layout Reusability: Instead of duplicating navigation bars and sidebars in every page component, a parent layout route renders the shared frame once, and swaps child content in the center dynamically.
  • Clean State Preservation: Swapping child components inside an Outlet preserves the state of the parent component (like sidebar scroll position or open notifications).

4. Real-World Analogy

Think of nested routing like **an art gallery frame**:

  • Without Nested Routes: Tearing down the frame, glass, and label on the wall every time you want to display a different painting (re-rendering the entire page structure).
  • With Nested Routes: Keeping the frame and glass on the wall (the parent layout) and simply swapping the canvas in the center (the child route inside the Outlet). This is much cleaner and faster.

5. Core Concepts

Below is a comparison of Index Routes and Standard Child Routes:

Feature Index Routes Standard Child Routes
Route Path definition Defined using the index attribute. No path string. Defined using the path attribute string (e.g. "profile").
Matching Rule Matches when the parent path is matched exactly, but no child path is active. Matches when the URL path matches the parent path followed by the child path.
Standard Use Case Default landing page content (e.g., dashboard landing view). Sub-panels or specific details views (e.g., settings page).

6. Syntax & API Reference

This example shows how to configure nested routes with ``:

7. Visual Diagram

This diagram displays how child routes are mounted inside the parent ``:

8. Live Example — Full Working Code

Below is a complete, single-file HTML page implementing a Dashboard layout with nested routes:

What just happened? The DashboardLayout component defines the shared layout structure containing a sidebar and a main content area. Inside the main area, we place the <Outlet /> element. When navigating to `/analytics` or `/settings`, React Router preserves the sidebar and renders the matching child component directly inside the Outlet placeholder.

9. Interactive Playground

Try It Yourself Challenges:

  1. Add a new nested Route path named "profile" that displays user details inside the layout.
  2. Add a navigation link pointing to a non-existent path, and handle it inside a wildcard route nested within the layout.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Omitting the Outlet component in the parent layout If the parent component does not render <Outlet />, React Router does not know where to place the child components. The URL will update, but the UI will not display the child views. function Layout() {
return <div>Header</div>;
}		 function Layout() {
return (
<div>
<div>Header</div>
<Outlet />
</div>
);
}
Adding leading slashes to nested child paths In React Router, nested paths are relative to their parent path. Adding a leading slash (e.g. "/settings" instead of "settings") makes the path absolute, breaking the nested relationship. <Route path="/parent">
<Route path="/child" />
</Route>		 <Route path="/parent">
<Route path="child" />
</Route> (relative path, matches `/parent/child`)

11. Best Practices

  • Keep child paths relative: Do not add leading slashes to child paths nested inside parent routes.
  • Always include an Index route: Define an index route (``) under parent layout routes to provide default content when the parent path is matched exactly.
  • Preserve layout state: Keep states that affect the entire layout frame (like notification dropdown states or menu toggles) inside the parent layout component.

12. Browser Compatibility/Requirements

Nested routes are supported in all browsers that run React Router.

13. Interview Questions

Q1: What is the purpose of the `` component in React Router?

Answer: The <Outlet /> component acts as a placeholder inside parent layout routes. It tells React Router exactly where to render nested child components when their paths are matched in the URL.

Q2: How do you configure a default view to render when a parent path is matched exactly, but no child path is active? Explain index routes.

Answer: Use an Index Route. By declaring a child route with the index attribute (e.g. `} />`) instead of a `path` string, you tell React Router to render this component inside the parent's `` when the parent path is matched exactly (e.g., `/dashboard`).

14. Debugging Exercise

Identify the bug that prevents the nested settings sub-panel from appearing when navigating to '/dashboard/settings':

View Solution

Diagnosis: The nested child route has a leading slash ("/settings"). In React Router, child paths must be declared relative to their parent path without a leading slash. Adding a leading slash makes the path absolute, breaking the nested relationship.

Fix: Remove the leading slash from the child route path:

15. Practice Exercises

Exercise 1: Create a nested settings panel hierarchy

Build a parent layout component named SettingsLayout. Declare nested child routes for "profile", "security", and an index route. Render links in the settings menu to navigate between panels.

16. Scenario-Based Challenge

The Multi-Level User Profile Dashboard Layout:

You are building an admin panel. The page displays a sidebar. Selecting a user from the list opens a details page containing tabs (activity history, edit profile, user settings). Explain how you would structure the nested routes and nested `` placeholders to support this multi-level nested layout hierarchy.

17. Quick Quiz

Q1: What attribute is added to a Route to make it match when no nested child route paths match?

A) default

B) index

C) active

Answer: B — The index attribute configures a route to render when the parent path is matched exactly, but no child path is active.

18. Summary & Key Takeaways

  • Nested routes allow parent layout routes to share layouts across child routes.
  • The Outlet component acts as a placeholder where child components are rendered.
  • Index routes render at the parent path exactly, before any child path is selected.
  • Child paths are relative to their parent path and must not have leading slashes.

19. Cheat Sheet

Router API Element Description
<Outlet /> Renders matching child route elements inside a parent layout.
<Route index element={<X />} /> Configures a default index view to render at the parent path.
<Route path="subpath" /> Configures a relative child path (matches `/parent/subpath`).
---