Mastering Nested Routes in React Router: Building Dynamic Layouts

Nested Routes in React Router

Nested Routes in React Router allow you to define routes within other routes, enabling complex layouts and the ability to display different components depending on the path. This feature is particularly useful for building applications with sections that have their own sub-routes, such as dashboards, profiles, or admin panels.

Nested routes help create hierarchical URLs, where each route can have child routes that render specific content inside their parent component.

How to Create Nested Routes

To set up nested routes in React Router, you define routes within a parent route using the Routes and Route components.

Steps to Implement Nested Routes

1. Parent Route: Define a route for a parent component.
2. Child Routes: Inside the parent component, create a Routes component with additional Route components to handle child routes.
3. Render Child Components: Ensure that the parent component contains a <Outlet /> component, which acts as a placeholder for rendering the child components.

Basic Example of Nested Routes

Here’s a basic example showing how to define a parent route and nested routes:

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

// Parent Component
const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li><Link to="profile">Profile</Link></li>
          <li><Link to="settings">Settings</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Child route content will render here */}
    </div>
  );
};

// Child Components
const Profile = () => <h3>Profile Page</h3>;
const Settings = () => <h3>Settings Page</h3>;

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Parent Route */}
        <Route path="dashboard" element={<Dashboard />}>
          {/* Nested Routes */}
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

Explanation:

• The Dashboard component is the parent route that renders the navigation links and the <Outlet /> component. The <Outlet /> serves as a placeholder where child route components will be rendered.
• The Profile and Settings components are the nested routes inside the Dashboard.
• The Link components are used for navigation, and when clicked, they will update the URL and render the respective nested components (e.g., /dashboard/profile or /dashboard/settings).
• The Routes and Route components inside the Dashboard define the nested routes, ensuring that when the URL matches /dashboard/profile or /dashboard/settings, the appropriate components are rendered.

Nested Routes with Path Parameters

You can also create nested routes with dynamic parameters.

import React from 'react';
import { BrowserRouter, Routes, Route, Link, Outlet, useParams } from 'react-router-dom';

const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li><Link to="profile/1">Profile 1</Link></li>
          <li><Link to="profile/2">Profile 2</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Child route content will render here */}
    </div>
  );
};

const Profile = () => {
  const { id } = useParams();  // Retrieve the 'id' parameter from the URL
  return <h3>Profile Page for User: {id}</h3>;
};

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Parent Route */}
        <Route path="dashboard" element={<Dashboard />}>
          {/* Nested Route with Path Parameter */}
          <Route path="profile/:id" element={<Profile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

Explanation:

• The Profile component receives a dynamic parameter from the URL (/dashboard/profile/:id).
• useParams() hook is used to access the dynamic parameter, in this case, id.
• The parent route /dashboard has child routes for each profile, and when the URL changes (for example, /dashboard/profile/1), the Profile component will display the user’s ID.

Handling Default Nested Routes

React Router provides a way to handle default nested routes. If no specific child route is matched, you can display a default component.

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

const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li><Link to="profile">Profile</Link></li>
          <li><Link to="settings">Settings</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Default child route will render here */}
    </div>
  );
};

const Profile = () => <h3>Profile Page</h3>;
const Settings = () => <h3>Settings Page</h3>;

const DashboardHome = () => <h3>Welcome to Dashboard</h3>;

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Parent Route with Default Child Route */}
        <Route path="dashboard" element={<Dashboard />}>
          <Route index element={<DashboardHome />} /> {/* Default Route */}
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

Explanation:

• The index route is a special route used to define the default component when the parent route is matched but no child path is provided.
• In this case, /dashboard will render the DashboardHome component by default, but if /dashboard/profile or /dashboard/settings is accessed, the respective component will be shown.

Conclusion

Nested routes in React Router are an essential feature for building complex UIs with hierarchical structures. They allow you to break down your application into smaller, manageable components while still keeping the navigation clean and dynamic. By using the <Outlet /> component, you can render child routes inside a parent component, and you can further customize the routing with dynamic parameters, default routes, and nested URL structures.