Skip to main content

Nested Routes and Layouts: Building Complex Layouts with Nested Routes #96

📖 Introduction​

Following our exploration of programmatic navigation, this article delves into a powerful feature of React Router that allows you to create complex and maintainable UI structures: nested routes. We will learn how to use nested routes and the <Outlet> component to build layouts that are shared across multiple pages.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • All concepts from the previous articles in this series.
  • Creating and exporting React components.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ The "Why" of Nested Routes: Understanding the need for nested routes in building complex layouts.
  • ✅ The <Outlet> Component: What it is and how it works.
  • ✅ Core Implementation: How to create a nested route structure for a dashboard layout.

🧠 Section 1: The Core Concepts of Nested Routes and Layouts​

In many applications, you'll have a common layout that is shared across multiple pages. For example, a dashboard might have a sidebar and a header that are always visible, while the main content area changes based on the current route.

Nested routes allow you to mirror this UI structure in your routing configuration. You can have a parent route that defines the layout, and child routes that define the content to be rendered within that layout.

The <Outlet> component is the key to making this work. It's a component provided by React Router that acts as a placeholder in the parent route's component, indicating where the child route's component should be rendered.

💻 Section 2: Deep Dive - Implementation and Walkthrough​

Let's build a simple dashboard with a shared layout and nested routes.

2.1 - The DashboardLayout Component​

First, let's create a DashboardLayout component that will contain our shared layout and the <Outlet>.

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

function DashboardLayout() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/dashboard">Dashboard Home</Link>
          </li>
          <li>
            <Link to="/dashboard/profile">Profile</Link>
          </li>
          <li>
            <Link to="/dashboard/settings">Settings</Link>
          </li>
        </ul>
      </nav>

      <hr />

      <Outlet />
    </div>
  );
}

export default DashboardLayout;

2.2 - The Child Components​

Now, let's create the components that will be rendered inside the <Outlet>.

// DashboardHome.js
import React from 'react';
const DashboardHome = () => <h2>Dashboard Home</h2>;
export default DashboardHome;

// Profile.js
import React from 'react';
const Profile = () => <h2>Profile</h2>;
export default Profile;

// Settings.js
import React from 'react';
const Settings = () => <h2>Settings</h2>;
export default Settings;

2.3 - Defining the Nested Routes​

Now, let's define our nested routes in App.js.

// App.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import DashboardLayout from './DashboardLayout';
import DashboardHome from './DashboardHome';
import Profile from './Profile';
import Settings from './Settings';

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

export default App;

Step-by-Step Code Breakdown:

  1. <Route path="/dashboard" element={<DashboardLayout />}>: We create a parent route for our dashboard.
  2. <Route index ... />: The index prop indicates that this route should be rendered when the URL matches the parent route's path exactly (/dashboard).
  3. <Route path="profile" ... /> and <Route path="settings" ... />: These are our child routes. Their paths are relative to the parent route's path.

Now, when you navigate to /dashboard, /dashboard/profile, or /dashboard/settings, the DashboardLayout component will be rendered, and the corresponding child component will be rendered inside the <Outlet>.

💡 Conclusion & Key Takeaways​

In this article, we've learned how to use nested routes and the <Outlet> component to create complex layouts in our React applications. This is a powerful pattern that can help you to write cleaner, more maintainable, and more scalable code.

Let's summarize the key takeaways:

  • Nested routes allow you to create a hierarchical routing structure that mirrors your UI.
  • The <Outlet> component is a placeholder in a parent route's component where child routes are rendered.
  • This pattern is great for building shared layouts.

Challenge Yourself: To solidify your understanding, try to add another level of nesting to the dashboard. For example, you could have a "User Settings" and "Application Settings" page under the "Settings" route.

➡️ Next Steps​

This concludes our series on routing with React Router. You now have a solid understanding of how to build complex and navigable single-page applications with React. In the next chapter, we will explore State Management at Scale.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • Nested Routes: A routing pattern where routes are defined inside other routes, creating a parent-child relationship.
  • <Outlet>: A component provided by React Router that renders the matched child route's component.

Further Reading​