Nested Routes

Nested routes are a powerful feature in React Router that allow you to render components within other components. This is especially useful when creating complex layouts with multiple sections or when you want to render certain content inside a parent component.

1. What Are Nested Routes?

Nested routes in React Router allow you to create a hierarchical structure for your routes. You can define a route that renders another route inside it, creating a nested view structure. This is often used to build layouts where you want to have common elements (like a sidebar or a header) around specific pages.

2. How to Set Up Nested Routes

To set up nested routes in React, you define routes inside a parent route. The child routes are rendered inside the parent component. Typically, the Outlet component is used to render child routes.

3. Basic Setup of Nested Routes

Here’s how to define a parent route with nested routes using React Router:

Example: Basic Nested Routes

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

// Child Components
function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <ul>
        <li><Link to="/dashboard/overview">Overview</Link></li>
        <li><Link to="/dashboard/settings">Settings</Link></li>
      </ul>
    </div>
  );
}

function Overview() {
  return <h3>Overview of Dashboard</h3>;
}

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <Link to="/">Home</Link>
        </nav>
        
        <Switch>
          <Route path="/" exact>
            <h2>Home Page</h2>
          </Route>
          
          {/* Parent Route with Nested Routes */}
          <Route path="/dashboard" exact component={Dashboard} />
          <Route path="/dashboard/overview" component={Overview} />
          <Route path="/dashboard/settings" component={Settings} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

In this example:

• The Dashboard component serves as the parent route.
• Overview and Settings are child routes nested inside the /dashboard route.

4. Using the Outlet Component for Nested Routes

If you are using React Router v6 or later, the <Outlet> component is used inside the parent component to render child routes.

Example with Outlet

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

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <ul>
        <li><Link to="overview">Overview</Link></li>
        <li><Link to="settings">Settings</Link></li>
      </ul>
      <Outlet /> {/* Renders the nested route */}
    </div>
  );
}

function Overview() {
  return <h3>Overview of Dashboard</h3>;
}

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

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

export default App;

5. Explanation of Components

• <Routes>: This is the new container for all route definitions in React Router v6 and later, replacing the <Switch> component.
• <Route path="..." element={<Component />} />: This is how you define a route in React Router v6. The element prop specifies the component to render.
• <Outlet />: The <Outlet> component is used in the parent route to render the matching child route.

6. Dynamic Nested Routes

You can also use dynamic parameters in nested routes to capture values from the URL.

Example: Dynamic Nested Routes

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

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <ul>
        <li><Link to="user/1">User 1</Link></li>
        <li><Link to="user/2">User 2</Link></li>
      </ul>
    </div>
  );
}

function UserProfile() {
  const { userId } = useParams();  // Access dynamic parameter
  return <h3>Viewing User Profile for ID: {userId}</h3>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<h2>Home Page</h2>} />
        <Route path="dashboard" element={<Dashboard />}>
          <Route path="user/:userId" element={<UserProfile />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

In this example:

• The UserProfile component uses the useParams hook to access the dynamic userId parameter from the URL.
• The link /dashboard/user/1 will render the UserProfile component with userId = 1.

7. Conclusion

Nested routes are a crucial feature for building complex layouts in React applications. They enable you to structure your app in a way that renders nested components, allowing for better component reuse and a more modular architecture. By using the <Outlet> component and defining nested routes, you can build sophisticated navigation structures.

Key Benefits of Nested Routes:

• Cleaner Structure: Helps to organize routes and layout components efficiently.
• Component Reusability: Enables rendering different content within the same parent layout.
• Dynamic Rendering: Allows dynamic content rendering based on URL parameters.

---