React Router – Nested Routes

Introduction

Nested Routes allow you to define routes inside other routes. This is useful when your application has a layout where some parts of the UI remain the same while other parts change based on the URL.

Nested routing helps build clean, scalable, and modular React applications, especially dashboards, admin panels, and profile pages.

What Are Nested Routes?

Nested Routes are routes that exist within another route’s component. They allow child components to render inside a parent layout using a special component called Outlet.

Example use cases:

• Dashboard with multiple sections
• User profile with tabs
• Admin panel pages
• Settings pages

Why Use Nested Routes?

Nested Routes help:

• Avoid duplicate layout code
• Improve UI consistency
• Organize routes logically
• Create hierarchical URLs
• Make applications easier to maintain

Core Concept – Outlet

Outlet is a placeholder component provided by React Router. It tells React Router where to render child routes inside a parent component.

Without Outlet, nested routes will not appear.

Basic Example of Nested Routes

Step 1: Define Parent and Child Routes

import { Routes, Route } from "react-router-dom";
import Dashboard from "./Dashboard";
import Profile from "./Profile";
import Settings from "./Settings";

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

export default App;

Step 2: Use Outlet in Parent Component

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

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>

      <nav>
        <Link to="profile">Profile</Link>
        <Link to="settings">Settings</Link>
      </nav>

      <Outlet />
    </div>
  );
}

export default Dashboard;

Explanation:

• Dashboard is the parent route
• Profile and Settings are child routes
• Outlet renders the active child route

URL Structure with Nested Routes

• /dashboard renders Dashboard layout
• /dashboard/profile renders Profile inside Dashboard
• /dashboard/settings renders Settings inside Dashboard

This keeps the layout consistent while changing content.

Index Routes in Nested Routing

Index routes load default content when only the parent path is accessed.

Example of Index Route

<Route path="/dashboard" element={<Dashboard />}>
  <Route index element={<Welcome />} />
  <Route path="profile" element={<Profile />} />
</Route>

Here:

• /dashboard loads Welcome component
• /dashboard/profile loads Profile component

Advantages of Nested Routes

• Cleaner code structure
• Reusable layouts
• Better user experience
• Logical URL hierarchy
• Ideal for large applications

Common Mistakes in Nested Routes

• Forgetting to use Outlet
• Using absolute paths instead of relative paths
• Placing child routes outside parent route
• Mixing React Router v5 syntax

Interview Questions and Answers – Nested Routes

1. What are nested routes in React Router?

Nested routes allow rendering child routes inside parent components using Outlet.

2. Why is Outlet important?

Outlet defines where child routes will be displayed.

3. Can nested routes share a layout?

Yes, nested routes are designed to share a common layout.

4. What is an index route?

An index route is the default child route rendered when the parent path is accessed.

5. What happens if Outlet is missing?

Child routes will not be rendered.

6. Can nested routes have their own nested routes?

Yes, nesting can go multiple levels deep.

7. Are nested routes SEO-friendly?

Yes, they create clean and meaningful URLs.

8. Do nested routes cause page reloads?

No, they follow client-side routing principles.

9. Should child routes use relative paths?

Yes, relative paths are recommended inside parent routes.

10. Where are nested routes commonly used?

Dashboards, admin panels, profile pages, and settings sections.