How to handle Nested Routes in React Router ?

React Router allows us to create a hierarchical structure where child components can be rendered within parent components, resulting in a seamless navigation flow. In this article, we will see how to handle nested Routes in React Router.

Approach to handle Nested Routes

To implement nested routes in React Router we define the children routes inside the Route component of the Parent route. In react-router-dom, we use Route with element and path attributes encapsulated in Routes. Use an Outlet component inside the parent route after the links of child components to show the link and switch between the child components rendering in Parent.

Steps to create the application:

Step 1: Create a React application by using the following command in the terminal.

npx create-react-app nesting-routes

Step 2: Now, go to the project folder i.e. nesting-demo by running the following command.

cd nesting-routes

Step 3: Let’s install the React Router DOM npm package required for this project

npm i react-router-dom

Project Structure:

Dependencies:

"dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router-dom": "^6.16.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
}

Example: Here are four components among which Home will be the main page which will contain link to Profile component. The profile component further will nest Details and Followers. Cliking on any one of the link will change the URL and further the component will be displayed in the Outlet of the Profile component.

CSS

/* App.css */

.App {
    text-align: center;
    box-sizing: border-box;
    min-height: 100vh;
}

.homeDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.profileBtn {
    background-color: #1877f2;
    color: white;
    padding: 1rem;
    border-radius: 0.4rem;
    border: none;
    font-size: 1.3rem;
    text-decoration: none;
    top: -50%;
    left: -50%;
    transform: translate(50%, 50%);
}

.buttons {
    margin-top: 2rem;
}

.navBtn,
.activeBtn {
    padding: 1rem;
    background-color: white;
    color: black;
    border-radius: 0.4rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 2rem 1rem 2rem 1rem;
    text-decoration: none;
    font-size: 1.3rem;
}

.activeBtn {
    background-color: #1877f2;
    color: white;
}

.details {
    padding: 1rem;
    display: inline-block;
    background-color: white;
    color: black;
    border-radius: 0.4rem;
    border-color: 2px solid black;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 5rem 1rem 2rem 1rem;
    text-decoration: none;
    font-size: 1rem;
}

ul {
    list-style: none;
}

Javascript

//app.js

import { Routes, Route } from "react-router-dom";
import { Detail } from "./components/Detail";
import { Followers } from "./components/Followers";
import { Profile } from "./components/Profile";
import { Home } from "./components/Home";
import "./App.css";

function App() {
    return (
        <div className="App">
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/profile" element={<Profile />}>
                    <Route path="/profile" element={<Detail />} />
                    <Route path="/profile/followers" element={<Followers />} />
                </Route>
            </Routes>
        </div>
    );
}

export default App;

Javascript

//Home.jsx

import { Link } from "react-router-dom";

export function Home() {
    return (
        <div className="homeDiv">
            <Link to="/profile" className="profileBtn">
                Profile
            </Link>
        </div>
    );
}

Javascript

//Profile.jsx

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

export function Profile() {
    const { pathname } = useLocation();

    return (
        <div>
            <div className="buttons">
                <Link
                    to="/profile"
                    className={pathname ===
                                    "/profile" ? "activeBtn" : "navBtn"}
                >
                    Details
                </Link>
                <Link
                    to="/profile/hobbies"
                    className={pathname ===
                                    "/profile/hobbies" ? "activeBtn" : "navBtn"}
                >
                    Hobbies
                </Link>
            </div>
            <Outlet />
        </div>
    );
}

Javascript

//Details.jsx

import { Link } from 'react-router-dom'

export function Detail() {
    return (
        <div className="details">
            Name: Bishal Paul
            <br />
            Social Media: @thebishalpaul
            <br />
            Country: India
        </div>
    )
}

Javascript

//Hobbies.jsx

export function Hobbies() {
    return (
        <ul className="details">
            <li>Guitar</li>
            <li>Coding</li>
            <li>Reading Books</li>
        </ul>
    )
}

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: