Nested Routes With React Router V6

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

Static and dynamic nested routes are both possible in React. For instance, 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 into the page.

After this brief introduction, let's create the following example to see how both static and dynamic nested routes are implemented in a react application using react router v6.

Install Required Routing Packages

npm i react-router react-router-dom

Setting Routes

We will have three routes. One of them is parent users, other one is nested dynamic child route users, the last one is static create route.

As seen the following code snippet, we have also three component for each route so we have imported the page components and call them as element.

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;

Parent Route

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

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>
  );
}

Nested Dynamic Route

Our dynamic nested route component is User, which will dynamically display different usernames based on URL parameters. Using the useParams hook, you can get the username from the URL and display that name on the screen.

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

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

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

export default User;

Nested Static Route

We have a static route called create to create a new user. For the sake of simplicity we will just render a simple HTML form.

import React from "react";

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

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 navigatate the following routes.

Thank you for reading.