Blog

In the development of modern web applications, routing plays a fundamental role in delivering a seamless user experience. As applications grow in complexity, it’s no longer sufficient to just link pages together with flat routes. That’s where nested routes in React come into play. They allow developers to structure applications more clearly, manage shared layouts, and create more maintainable codebases.

In this comprehensive guide, we’ll explore what nested routes are, why they’re important, and how to implement them using React Router v6—React’s most widely-used routing library.

Protected Routes in React: Handling Authentication

---

Table of Contents

1. Introduction to Routing in React
2. What Are Nested Routes?
3. Benefits of Using Nested Routes
4. Setting Up a React App with React Router
5. Creating Nested Routes Step-by-Step
6. Shared Layouts with Outlet
7. Nesting with Dynamic Routes
8. Common Mistakes and How to Avoid Them
9. Best Practices for Nested Routing
10. Conclusion

---

1. Introduction to Routing in React

React is a component-based library designed to build fast, interactive UIs. However, it doesn’t come with built-in routing. For that, developers use React Router, a library that allows you to map URL paths to components.

Here’s a simple example using react-router-dom:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

This sets up a basic structure, but what happens when your app becomes larger? What if your /dashboard route needs several child routes like /dashboard/profile, /dashboard/settings, and /dashboard/notifications?

Enter nested routes.

---

2. What Are Nested Routes?

Nested routes are routes that are embedded within a parent route. They allow you to define a hierarchy of pages that share common layout or functionality. This means components can be rendered inside other components depending on the path structure.

Think of nested routes as a way to mirror the folder structure of your pages and components in the URL.

Example:

/dashboard             → Dashboard home
/dashboard/profile     → User profile inside Dashboard
/dashboard/settings    → Settings inside Dashboard

Each of these “sub-pages” can be children of the main /dashboard route, allowing for better organization and reusability.

---

3. Benefits of Using Nested Routes

Nested routes aren’t just a feature—they’re a best practice in large applications. Here’s why:

1. Cleaner Codebase

With nested routes, your route configuration mirrors your component and folder structure. It becomes easier to manage and debug.

2. Shared Layouts

Nested routes make it easy to apply shared headers, sidebars, or navigation bars across a group of related pages without repeating code.

3. Improved User Experience

You can load only parts of the page that need updating, leading to better performance and smoother navigation.

4. Scalability

As your app grows, maintaining flat routes becomes chaotic. Nested routing naturally scales with your application structure.

---

4. Setting Up a React App with React Router

First, you’ll need to install react-router-dom if it’s not already installed.

npm install react-router-dom

Let’s scaffold a basic app:

/src
  /components
    Dashboard.js
    Profile.js
    Settings.js
    Layout.js
  App.js
  index.js

---

5. Creating Nested Routes Step-by-Step

Let’s create a simple example where /dashboard has nested routes /dashboard/profile and /dashboard/settings.

Step 1: Create the Layout Component

// components/Layout.js
import { Outlet, Link } from 'react-router-dom';

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

export default Layout;

Step 2: Create Child Components

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

export default Profile;

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

export default Settings;

Step 3: Define Routes in App.js

// App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import Profile from './components/Profile';
import Settings from './components/Settings';

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

export default App;

Explanation:

• The Layout component is used as the shell or wrapper.
• The Outlet acts as a placeholder for nested content.
• The child routes (profile, settings) are displayed inside the Outlet when navigated to.

---

6. Shared Layouts with Outlet

The <Outlet /> is a special component from React Router that renders the matched child route. This is essential for nesting to work properly.

Benefits:

• Centralizes layout logic.
• Avoids repeating headers, navigation bars, and footers.
• Keeps parent components reusable and clean.

Example:

function Layout() {
  return (
    <>
      <Header />
      <Sidebar />
      <main>
        <Outlet />
      </main>
    </>
  );
}

---

7. Nesting with Dynamic Routes

Dynamic routing allows you to create routes with parameters, like viewing a specific user:

<Route path="/users/:userId" element={<UserProfile />} />

You can nest dynamic routes too:

<Route path="/users" element={<UsersLayout />}>
  <Route path=":userId" element={<UserProfile />} />
  <Route path=":userId/settings" element={<UserSettings />} />
</Route>

In UserProfile.js, access route parameters like this:

import { useParams } from 'react-router-dom';

function UserProfile() {
  const { userId } = useParams();
  return <h2>Viewing profile of user {userId}</h2>;
}

---

8. Common Mistakes and How to Avoid Them

1. Forgetting the <Outlet />

Without the Outlet, nested routes won’t render. It’s a common oversight.

2. Incorrect Path Structure

Avoid absolute paths in nested routes. For example, don’t write path="/profile" inside /dashboard. Instead, write path="profile".

3. Unmatched Routes

If none of the nested routes match, users may see a blank page. Always provide a default route or 404 fallback.

<Route index element={<DashboardHome />} />
<Route path="*" element={<NotFound />} />

---

9. Best Practices for Nested Routing

• Match UI with Route Structure: If your page has a nested layout, use nested routes to match that.
• Use Layouts for Grouping: Group pages under layout routes to reuse UI components.
• Lazy Load Where Needed: For large apps, lazy load nested components to improve performance.
• Route Guards: Use protected routes (as discussed in previous articles) to protect nested routes that require authentication.
• Dynamic Breadcrumbs: Use nested routes and useParams to build breadcrumbs for better navigation.

---

10. Conclusion

Nested routes are an essential concept in building scalable, maintainable React applications. They allow developers to structure applications in a logical, hierarchical way, making code cleaner, more reusable, and easier to navigate.

Whether you’re building a simple blog or a complex admin dashboard, nested routing gives you the flexibility to build intuitive interfaces without sacrificing code quality or user experience.

By mastering nested routes and understanding the importance of shared layouts, dynamic paths, and modular route structures, you can take your React applications to the next level.

---

If you want, I can provide this article in a downloadable format (PDF or DOCX), or we can expand it with a working GitHub example or Firebase integration. Let me know!