Nested Routes in React Router allow you to create a hierarchy of routes, where routes can be nested within other routes. This is useful for structuring your application with multiple levels of navigation and rendering child components within parent components.

How Nested Routes Work

When you have nested routes, a parent route renders its child routes based on the URL. This is achieved by defining Route components inside other Route components.

Example Structure

Let’s say you have a blog application where each blog post has its own comments. You might have a route structure like this:

1. Parent Route: Displays the list of blog posts.
2. Child Route: Displays a specific blog post.
3. Grandchild Route: Displays comments for a specific blog post.

Setting Up Nested Routes

Here’s a step-by-step example of how to set up nested routes:

1. Install React Router

Make sure you have React Router installed:

npm install react-router-dom

2. Define Components

Create components for each route level:

// BlogList.js
import React from 'react';
import { Link } from 'react-router-dom';

function BlogList() {
  return (
    <div>
      <h2>Blog List</h2>
      <ul>
        <li><Link to="/posts/1">Post 1</Link></li>
        <li><Link to="/posts/2">Post 2</Link></li>
      </ul>
    </div>
  );
}

export default BlogList;

// BlogPost.js
import React from 'react';
import { Route, Link, useRouteMatch } from 'react-router-dom';
import Comments from './Comments';

function BlogPost() {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Blog Post</h2>
      <nav>
        <ul>
          <li><Link to={`${url}/comments`}>Comments</Link></li>
        </ul>
      </nav>
      <Route path={`${path}/comments`} component={Comments} />
    </div>
  );
}

export default BlogPost;

// Comments.js
import React from 'react';

function Comments() {
  return <div><h3>Comments Section</h3></div>;
}

export default Comments;

3. Set Up Routing

Use BrowserRouter, Route, and Switch to set up nested routes:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import BlogList from './BlogList';
import BlogPost from './BlogPost';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={BlogList} />
        <Route path="/posts/:id" component={BlogPost} />
      </Switch>
    </Router>
  );
}

export default App;

How It Works

1. Parent Route: The BlogList component is rendered for the / path.

2. Child Route: The BlogPost component is rendered for paths like /posts/1 and /posts/2. Inside BlogPost, you define a child route for /comments.

3. Grandchild Route: The Comments component is rendered when the URL matches /posts/:id/comments. The BlogPost component includes a Route that matches this path and renders the Comments component.

Key Points

• useRouteMatch: A hook used inside BlogPost to get the current route’s path and URL. This helps in constructing relative paths for nested routes.

• Relative Paths: Link components inside nested routes use relative paths based on the current URL, allowing seamless navigation between nested views.

• Rendering: The Switch component ensures that only one route is rendered at a time. Within the BlogPost component, nested Route components are rendered based on their path.

Nested routes provide a way to build more complex and organized routing structures within your React application, allowing for better management of different view levels and content hierarchies.