As React applications grow, managing navigation can become more complicated.

A small application might have only a few pages:

Home
About
Contact

But a larger application often has sections with their own pages.

For example:

Dashboard
├── Overview
├── Profile
├── Settings
└── Analytics

This is where nested routes become useful.

Nested routes allow you to create a parent route with child routes inside it. They are especially useful for dashboards, admin panels, account pages, settings sections, and any application where multiple pages share a common layout.

In this article, we’ll understand what nested routes are, how they work in React Router, how <Outlet /> fits into the picture, and the best practices for structuring nested routes.

---

What Are Nested Routes?

A nested route is simply a route that exists inside another route.

Imagine an application with a dashboard:

/dashboard
│
├── /dashboard
├── /dashboard/profile
├── /dashboard/settings
└── /dashboard/analytics

Here, dashboard is the parent route, while profile, settings, and analytics are child routes.

This creates a route hierarchy that matches your application’s UI structure.

---

Why Do We Need Nested Routes?

Nested routes are useful when multiple pages share a common layout.

For example, an admin dashboard may always contain:

• A sidebar
• A top navigation bar
• A common dashboard layout

Only the main content area changes.

┌─────────────────────────────────────┐
│              Navbar                 │
├──────────────┬──────────────────────┤
│              │                      │
│   Sidebar    │    Page Content      │
│              │                      │
│              │   Changes Here       │
│              │                      │
└──────────────┴──────────────────────┘

Without nested routes, you might repeat the sidebar and navigation structure across multiple pages.

With nested routes, you can create the shared layout once and render different child pages inside it.

---

How Nested Routes Work

The basic idea looks like this:

Parent Route
     │
     ▼
Parent Layout
     │
     ▼
  <Outlet />
     │
 ┌───┼───────────┐
 ▼   ▼           ▼
Home Profile  Settings

The most important part is <Outlet />.

<Outlet /> tells React Router:

Render the matching child route here.

---

Understanding <Outlet />

Suppose you have a dashboard layout.

Conceptually, it looks like this:

Dashboard Layout
│
├── Sidebar
│
├── Navbar
│
└── <Outlet />
        │
        ▼
   Active Child Page

When the user visits:

/dashboard/profile

React Router renders:

DashboardLayout
├── Sidebar
├── Navbar
└── Profile

When the user navigates to:

/dashboard/settings

React Router keeps the shared layout and displays:

DashboardLayout
├── Sidebar
├── Navbar
└── Settings

This is one of the biggest advantages of nested routing.

---

A Basic Nested Route Structure

A typical route structure looks like this:

/
├── home
├── about
└── dashboard
      ├── profile
      ├── settings
      └── analytics

The parent route is responsible for the shared layout.

The child routes represent the pages displayed inside that layout.

The main relationship is:

Parent Route
     +
Child Route
     +
<Outlet />
     =
Nested Routing

---

A Simple Nested Routes Example

Imagine this route structure:

/dashboard
/dashboard/profile
/dashboard/settings

Conceptually, the route hierarchy looks like:

Dashboard Route
     │
     ├── index → Dashboard Home
     │
     ├── profile → Profile Page
     │
     └── settings → Settings Page

The parent Dashboard component contains the shared UI and <Outlet />.

The child components are displayed inside that outlet.

A simplified route setup might look like this:

<Route path="dashboard" element={<DashboardLayout />}>
  <Route index element={<DashboardHome />} />
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

You do not need to write the full /dashboard path for every child route.

React Router combines the parent and child paths automatically.

---

What Is an Index Route?

An index route is the default child route of a parent route.

For example, when a user visits:

/dashboard

you may want to display the dashboard overview.

Then:

/dashboard/profile

shows the profile page, while:

/dashboard/settings

shows the settings page.

Conceptually:

/dashboard
      │
      ▼
Specific Child Path?
      │
   ┌──┴───┐
   │      │
  No     Yes
   │      │
   ▼      ▼
Index    Matching
Route    Child Route

An index route acts as the default page inside a parent route.

---

Nested Routes and Shared Layouts

Nested routes work particularly well with layouts.

Imagine a user account section:

/account
│
├── Profile
├── Security
├── Notifications
└── Billing

All these pages may share:

Account Layout
│
├── Account Navigation
│
├── Header
│
└── Page Content

Instead of recreating the layout for every page, the parent route handles the shared structure:

AccountLayout
      │
      ├── Navigation
      ├── Header
      │
      └── <Outlet />
              │
              ▼
        Active Account Page

This makes the application easier to maintain.

---

Absolute vs Relative Child Paths

When working with nested routes, understanding relative paths is important.

Suppose your parent route is:

/dashboard

And you define a child route:

profile

The resulting URL becomes:

/dashboard/profile

Conceptually:

Parent Path
/dashboard

     +

Child Path
profile

     =

/dashboard/profile

Relative child paths reduce repetition and make route configurations easier to manage.

---

Navigating Between Nested Routes

React Router also supports relative navigation.

Suppose you are currently inside:

/dashboard

You can navigate to child pages such as:

profile

or:

settings

Conceptually:

Current Route
/dashboard
      │
      ▼
Relative Link: profile
      │
      ▼
/dashboard/profile

Relative navigation makes nested components more reusable because they do not always need to know the complete URL.

---

Using <Link> and <NavLink>

For navigation, React Router provides components such as:

• <Link>
• <NavLink>

<Link> is generally used for navigation without reloading the entire page.

<NavLink> is useful when you want to style the currently active navigation item.

This is especially useful in sidebars:

Dashboard Sidebar

Overview
Profile   ← Active
Settings
Analytics

When the user visits the Profile route, the Profile navigation item can receive an active state automatically.

For nested navigation menus, <NavLink> is often a useful choice.

---

Nested Dynamic Routes

Nested routes can also include dynamic parameters.

Imagine a product application:

/products
/products/101
/products/101/reviews

The route hierarchy could look like:

Products
│
└── :productId
      │
      └── reviews

Conceptually:

/products
    │
    ▼
Product ID
/products/:productId
    │
    ▼
Reviews
/products/:productId/reviews

This structure is useful for applications with:

• Products
• Users
• Blog posts
• Orders
• Projects

The parent route can represent the main resource, while nested routes display different sections related to it.

---

A Real-World Dashboard Example

Imagine a dashboard with this structure:

/dashboard
│
├── Overview
├── Users
├── Reports
└── Settings

The UI may look like this:

App
│
└── DashboardLayout
      │
      ├── Header
      │
      ├── Sidebar
      │     ├── Overview
      │     ├── Users
      │     ├── Reports
      │     └── Settings
      │
      └── <Outlet />
              │
              ▼
         Active Page

When the user navigates between:

/dashboard
/dashboard/users
/dashboard/reports
/dashboard/settings

the DashboardLayout provides the shared structure, while <Outlet /> displays the correct page.

This keeps your routing structure aligned with the visual structure of your application.

---

Common Mistake: Forgetting <Outlet />

One of the most common mistakes is defining child routes but forgetting to add <Outlet /> inside the parent component.

For example:

Dashboard
│
├── Sidebar
├── Navbar
│
└── ❌ No Outlet

React Router can match the child route, but the parent layout has no place to render it.

The correct structure is:

Dashboard
│
├── Sidebar
├── Navbar
│
└── <Outlet />
        │
        ▼
   Child Route

Whenever child routes should appear inside a parent component, <Outlet /> is essential.

---

Common Mistake: Using Full Paths Everywhere

Developers sometimes write the complete URL for every route.

This can make route configurations repetitive and harder to maintain.

Relative paths allow React Router to build the hierarchy naturally:

Parent: dashboard

Child: profile

Result:
/dashboard/profile

If the parent route changes, your nested route structure is often easier to update.

---

Common Mistake: Confusing UI Nesting With Route Nesting

Not every nested component needs to become a nested route.

For example:

Page
├── Header
├── Search Bar
└── Product List

These are nested components, but they do not necessarily need separate URLs.

Nested routes should usually represent meaningful navigation states.

A good question to ask is:

Should this section of the application have its own URL?

If yes, a route may make sense.

If not, a regular component may be enough.

---

Best Practices for Nested Routes

Use Layout Routes for Shared UI

If several pages share:

• A sidebar
• Navigation
• A header
• Authentication logic
• A common page structure

consider using a parent layout route.

---

Keep Route Structure Meaningful

Your route hierarchy should represent how users understand the application.

For example:

/account
/account/profile
/account/security
/account/billing

This structure is easier to understand and maintain.

---

Use Index Routes for Default Pages

When a parent route needs a default child page, use an index route.

This keeps the route structure predictable.

---

Keep Child Routes Relative When Possible

Relative paths reduce repetition and make nested route configurations easier to maintain.

---

Use <NavLink> for Navigation Menus

For dashboards and sidebars, active navigation states improve the user experience.

<NavLink> can help manage active navigation states without manually checking the current URL.

---

Avoid Over-Nesting

Nested routes are powerful, but deeply nesting everything can make routing difficult to understand.

A structure like this can quickly become difficult to maintain:

Route
└── Route
     └── Route
          └── Route
               └── Route

Use nesting when it represents a meaningful shared layout or URL hierarchy.

---

A Simple Mental Model

The easiest way to understand nested routes is:

Parent Route
      │
      ▼
Shared Layout
      │
      ▼
<Outlet />
      │
      ▼
Current Child Page

For example:

/dashboard/profile

/dashboard
     │
     ▼
DashboardLayout
     │
     ├── Sidebar
     ├── Header
     │
     ▼
   <Outlet />
     │
     ▼
   Profile

If the URL changes to:

/dashboard/settings

the structure becomes:

DashboardLayout
     │
     ├── Sidebar
     ├── Header
     │
     ▼
   <Outlet />
     │
     ▼
   Settings

The shared layout remains the same while the content inside <Outlet /> changes.

---

Final Thoughts

Nested routes are an important feature of React Router because they allow your application’s routing structure to match its UI structure.

They are especially useful for:

• Dashboards
• Admin panels
• User account sections
• Settings pages
• Product details
• Multi-page application sections

The most important concept to remember is the role of <Outlet />.

The parent route provides the layout, and <Outlet /> is where the matching child route is displayed.

Once you understand that relationship, nested routing becomes much easier.

A simple way to remember it is:

Parent Route
     +
Shared Layout
     +
<Outlet />
     +
Child Routes
     =
Nested Routing

By using nested routes correctly, you can create cleaner route structures, avoid repeating shared layouts, and build React applications that are easier to scale and maintain.

---

FAQs

What is a nested route in React Router?

A nested route is a child route defined inside a parent route. It allows the child page to be rendered within the parent’s layout.

What is <Outlet /> used for?

<Outlet /> acts as a placeholder where React Router renders the currently matched child route.

Can nested routes have their own nested routes?

Yes. React Router supports multiple levels of route nesting when your application structure requires it.

What is an index route?

An index route is the default child route displayed when a user visits the parent route without a specific child path.

Do nested routes need separate layouts?

No. One of their main benefits is that child routes can share the layout of their parent route.

What is the difference between nested routes and nested components?

Nested components are simply components rendered inside other components. Nested routes represent navigation states and usually correspond to different URLs.

When should I use nested routes?

Use them when pages share a common layout or when your URLs naturally follow a parent-child hierarchy, such as dashboard pages, account sections, or product detail pages.