Nested Routes With React Router V6

Nested routes in React allow fragments or tabs to be injected into the page and changed URLs at the same time without completely redirecting the user to another page.

In React, static and dynamic nested routes can be both implemented. For example, when dealing with a large number of users, it's impractical to create separate static routes for each one. Instead, you can establish a single route for dynamically changing URLs and injecting data in a fragment or tab into the page.

Now, let's see the first step on how to create nested routes in react using react router v6.

Install React Router v6

Before you start, make sure you have installed react router packages using the following command.

npm i react-router react-router-dom

How To Set Nested Routes

We will set three different types of routes and their components. One of them is parent users, other one is nested dynamic child route :user, the last one is static create route.

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Users from "./components/Users";
import User from "./components/User";
import Create from "./components/Create";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users" element={<Users />}>
          {/* Dynamic Nested Route */}
          <Route path=":user" element={<User />} />
          {/* Static Nested Route */}
          <Route path="create" element={<Create />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

How To Implement Parent Route

In our parent users component, we will render all users. When one of them is clicked, the child nested :user component will be injected to the page with the help of Outlet component from the react-router package.

For example, when an user visit the page /users/john, the User will be rendered with the corresponding data of the user John.

import React from "react";
import { Link, Outlet } from "react-router-dom";

export default function Users() {
  const users = [
    { id: "1", name: "john" },
    { id: "2", name: "jane" },
  ];

  return (
    <div className="users">
      Users
      {/* List all users */}
      <div className="list">
        {users.map((user) => (
          <Link className="user" to={user.name} key={user.id}>
            {user.name}
          </Link>
        ))}
      </div>
      {/* When clicked a user, inject its data into here */}
      <Outlet></Outlet>
    </div>
  );
}

How To Create Nested Dynamic Component

As mentioned earlier, in our dynamic nested routes will render a dynamic User component. Using the useParams hook, this component will get the the name of the user from the URL and simply display that name on the screen.

Of course, the data for this user can be fetched from server and display it, however we simply render the name for simplicity.

import React from "react";
import { useParams } from "react-router-dom";

function User() {
  const { user } = useParams();

  return <div>{user} is selected</div>;
}

export default User;

How To Create Nested Static Route Component

We also have a static route called create to create a new user. For the sake of simplicity we will only render a simple HTML form instead of submitting the info of the user to a server.

import React from "react";

export default function Create() {
  return (
    <div>
      <h1>Create A User</h1>
      <input placeholder="A User Name" />
    </div>
  );
}

When a user will visit the route /users/create, this component will be rendered.

Conclusion

That's all. In this guide, we talked about dynamic and static nested routes with react router v6, which enables creating of tab-based pages. After setting the routes, you can test the URLs by attempting navigate a nested route.

Thank you for reading.