Nested Routes in React Router

Introduction

Routing is an essential part of any single-page application (SPA) built with React. React Router is the de facto library for handling client-side routing in React applications. While simple routes are easy to implement, modern applications often require nested routes, where multiple levels of routes exist within a parent route.

Nested routes allow developers to create complex user interfaces with reusable layouts, multiple sections, or tabs within a single page. This post will cover:

1. Concept of nested routes
2. Using Outlet for rendering child routes
3. Example: Dashboard with nested tabs or sections
4. Benefits of nested routes for complex UIs

---

1. Concept of Nested Routes

Nested routes are routes that exist inside other routes. They allow you to render child components inside a parent component based on the URL path.

Example:

• /dashboard → Parent route
• /dashboard/profile → Child route
• /dashboard/settings → Child route

This structure allows the Dashboard component to act as a layout, while child routes like Profile and Settings are rendered within it.

Key Concepts

• Parent Route: Contains the layout or wrapper for child routes.
• Child Route: Nested inside the parent and rendered in the parent’s layout.
• Outlet: Placeholder in the parent component where the child route is rendered.

---

2. Using Outlet for Rendering Child Routes

In React Router v6+, the Outlet component is used as a placeholder in the parent component for child routes.

Example: Basic Outlet Usage

import React from "react";
import { BrowserRouter as Router, Routes, Route, Link, Outlet } from "react-router-dom";

function Dashboard() {
  return (
<div>
  <h1>Dashboard</h1>
  <nav>
    <Link to="profile">Profile</Link> | <Link to="settings">Settings</Link>
  </nav>
  <Outlet />
</div>
  );
}

function Profile() {
  return <h2>User Profile</h2>;
}

function Settings() {
  return <h2>Settings Page</h2>;
}

function App() {
  return (
&lt;Router&gt;
  &lt;Routes&gt;
    &lt;Route path="dashboard" element={&lt;Dashboard /&gt;}&gt;
      &lt;Route path="profile" element={&lt;Profile /&gt;} /&gt;
      &lt;Route path="settings" element={&lt;Settings /&gt;} /&gt;
    &lt;/Route&gt;
  &lt;/Routes&gt;
&lt;/Router&gt;
  );
}

export default App;

Explanation:

• Dashboard is the parent route.
• Profile and Settings are nested child routes.
• Outlet renders whichever child route matches the current URL.
• Navigation links use relative paths (profile, settings).

---

3. Example: Dashboard with Nested Tabs or Sections

Nested routes are ideal for applications with tabbed navigation or multiple sections inside a page.

Step 1: Creating Parent Dashboard Component

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

function Dashboard() {
  return (
<div>
  <h1>Dashboard</h1>
  <nav>
    <Link to="overview">Overview</Link> | 
    <Link to="analytics">Analytics</Link> | 
    <Link to="settings">Settings</Link>
  </nav>
  <div style={{ border: "1px solid #ccc", padding: "20px", marginTop: "10px" }}>
    <Outlet />
  </div>
</div>
  );
}

export default Dashboard;

• Outlet is where nested routes will be displayed.
• Navigation links are relative, automatically resolving to /dashboard/overview, etc.

---

Step 2: Creating Child Components

import React from "react";

export function Overview() {
  return <h2>Dashboard Overview</h2>;
}

export function Analytics() {
  return <h2>Analytics Section</h2>;
}

export function Settings() {
  return <h2>Dashboard Settings</h2>;
}

---

Step 3: Defining Routes

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Dashboard from "./Dashboard";
import { Overview, Analytics, Settings } from "./DashboardSections";

function App() {
  return (
<Router>
  <Routes>
    <Route path="dashboard" element={<Dashboard />}>
      <Route path="overview" element={<Overview />} />
      <Route path="analytics" element={<Analytics />} />
      <Route path="settings" element={<Settings />} />
    </Route>
  </Routes>
</Router>
  );
}

export default App;

Key Points:

• Nested routes allow each section of the dashboard to have its own component.
• The parent layout remains intact while child content changes dynamically.
• Navigation is smooth, and URLs reflect the current section.

---

Step 4: Redirect to Default Child Route

Often, you want to show a default child route when a parent route is accessed.

import { Navigate } from "react-router-dom";

<Route path="dashboard" element={<Dashboard />}>
  <Route index element={<Navigate to="overview" />} />
  <Route path="overview" element={<Overview />} />
  <Route path="analytics" element={<Analytics />} />
  <Route path="settings" element={<Settings />} />
</Route>

• index route handles default navigation.
• Users visiting /dashboard are automatically redirected to /dashboard/overview.

---

4. Benefits of Nested Routes for Complex UIs

4.1 Reusable Layouts

• Nested routes allow parent components to act as layouts for multiple pages.
• Example: Dashboard, Admin panel, or e-commerce category pages.

4.2 Cleaner URL Structure

• Nested routes create intuitive URLs that reflect the app’s hierarchy.
• Example: /dashboard/settings/privacy clearly shows a settings section.

4.3 Reduced Code Duplication

• Parent components provide common UI elements (navbars, sidebars).
• Child components only need to handle their specific content.

4.4 Easy Navigation and State Management

• State related to the layout (like sidebar collapse) can reside in the parent.
• Child components do not need to manage layout state individually.

4.5 Dynamic Rendering

• Components can be rendered conditionally based on nested routes.
• Works well with tabs, wizards, and multi-step forms.

---

5. Advanced Example: Multi-Level Nested Routes

Nested routes can go multiple levels deep:

<Route path="dashboard" element={<Dashboard />}>
  <Route path="analytics" element={<AnalyticsLayout />}>
&lt;Route path="sales" element={&lt;Sales /&gt;} /&gt;
&lt;Route path="marketing" element={&lt;Marketing /&gt;} /&gt;
  </Route>
  <Route path="settings" element={<Settings />} />
</Route>

• AnalyticsLayout can have its own Outlet for sub-routes like sales and marketing.
• Multi-level nesting allows complex UIs to be structured cleanly.

---

6. Tips and Best Practices

1. Use Outlet for Parent Layouts – Always use Outlet to render child routes dynamically.
2. Keep Routes Organized – Structure route definitions logically in separate files if necessary.
3. Use Relative Paths in Links – Simplifies navigation inside nested routes.
4. Leverage Index Routes – Provide default content when a parent route is accessed.
5. Avoid Excessive Nesting – Too many levels can make routes difficult to maintain.
6. Combine with React State or Context – Nested routes work seamlessly with global state management.

---

7. Real-World Use Cases

1. Admin Dashboards – Separate sections like users, analytics, reports.
2. E-commerce Applications – Nested routes for categories, products, and product details.
3. Profile Management – Tabs for personal info, security settings, and preferences.
4. Multi-Step Forms – Each step can be a nested route.