Nested Routes

React Router is a powerful tool that allows you to handle routing in your React applications. One powerful feature it offers is the ability to create nested routes. In this tutorial, we are going to understand what nested routes are and how we can implement them in a React application.

What are Nested Routes?

Nested routes are routes that are contained within another route. They allow us to create more complex user interfaces, where one part of the screen remains constant, while another part changes based on the route. This feature is particularly useful when designing applications with a lot of content that needs to be organized in a logical way.

Setting up React Router

Before we dive into nested routes, let's first set up React Router in our application. First, we need to install the react-router-dom package:

npm install react-router-dom

Next, we need to import the necessary components from react-router-dom package:

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

Here, BrowserRouter is a component that uses the HTML5 history API to keep our UI in sync with the URL. Route is the conditionally shown component based on matching its path prop with the current URL. Switch is used to render only the first Route or Redirect that matches the location.

Implementing Nested Routes

Let's start by creating a simple application with two main routes: / and /users. We'll display a list of users under the /users route.

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

Here, we have two routes. The Home component is displayed when the path is exactly /, and the Users component is displayed when the path is /users.

Now, let's say we want to display the details of a specific user when the path is /users/:id, where :id is the id of the user. We can achieve this by nesting another Route inside the /users route:

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

  return (
    <div>
      <h2>Users</h2>
      <ul>
        <li>
          <Link to={`${url}/1`}>User 1</Link>
        </li>
        <li>
          <Link to={`${url}/2`}>User 2</Link>
        </li>
      </ul>

      <Switch>
        <Route exact path={path}>
          <h3>Please select a user.</h3>
        </Route>
        <Route path={`${path}/:id`}>
          <User />
        </Route>
      </Switch>
    </div>
  );
}

In the Users component, we first retrieve the current path and url using the useRouteMatch hook. We then add two links, one for each user. Finally, we add a nested Switch with two Route components. The first Route is displayed when the path is exactly /users, and the User component is displayed when the path is /users/:id.

The User component can then retrieve the id parameter from the route:

function User() {
  let { id } = useParams();

  return <h3>User ID: {id}</h3>;
}

Here, we use the useParams hook to get the id parameter from the route. We can then use this id to fetch the data for the specific user.

And that's it! You now know how to implement nested routes in React using React Router. This can be particularly useful for building complex applications with a hierarchical structure.

Remember, the key to nested routing is understanding the useRouteMatch and useParams hooks and how to use them to create dynamic routes. With these tools in hand, you can create flexible, intuitive interfaces that take full advantage of the power of React Router.