Open In App

Implement Nested Routes in React.js – React Router DOM V6

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Nested routes in React JS are implemented using the outlet in React Router Dom. Routing in React not only provides routing for the pages but also for switching the content inside that page. Nested routes implement this by defining Routes for Child components inside parent route components.

Prerequisites:

Approach for Nested Routes

For nested routes in React JS Define the children routes inside the Route component of the Parent route. In react-router-dom v6 use Route with element and path attribute encapsulated in Routes. Inside the parent route use the Outlet component after the links of child components to show the link and switch between the child components rendering in Parent as shown in the example below.

Steps to create the application:

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

npx create-react-app nesting-demo

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

cd nesting-demo

Project Structure:

Screenshot-from-2023-10-11-11-44-50

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

npm i react-router-dom

dependencies list after installaion in package.json

{
"name": "nesting-demo",
"version": "0.1.0",
"private": true,
"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: Define two page Home and courses and child component for course named List and Search. Use Routes for Pages home and cources and inside course route the list and serach route is defined. Link the components inside courses file as shown below.

JavaScript




// Filename: App.js
 
import {
    BrowserRouter as Router,
    Link,
    Routes,
    Route,
} from "react-router-dom";
import "./App.css";
import Home from "./Pages/Home";
import Courses from "./Pages/Courses";
import Search from "./Components/Search";
import List from "./Components/List";
 
function App() {
    return (
        <div className="App">
            <Router>
                <nav>
                    <Link to="/">Home</Link>
                    <Link to="courses">Courses</Link>
                </nav>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route
                        path="/courses"
                        element={<Courses />}
                    >
                        <Route
                            path="search"
                            element={<Search />}
                        />
                        <Route
                            path="list"
                            element={<List />}
                        />
                    </Route>
                </Routes>
            </Router>
        </div>
    );
}
 
export default App;


Javascript




// Filename: Pages/Home.js
 
import React from "react";
 
const Home = () => {
    return (
        <div className="Page">
            <h1>You are in the Home page!</h1>
            <h3>URL: localhost:3000/</h3>
        </div>
    );
};
 
export default Home;


Javascript




// Filename: Components/Search.js
 
import React from "react";
 
const Search = () => {
    return (
        <div className="Search">
            <h2>You are inside the Search Component</h2>
            <h4>URL: localhost:3000/courses/search</h4>
        </div>
    );
};
 
export default Search;


Javascript




// Filename: Components/List.js
 
import React from "react";
 
const List = () => {
    return (
        <div className="List">
            <h2>You are inside the List Component</h2>
            <h4>URL: localhost:3000/courses/list</h4>
        </div>
    );
};
 
export default List;


Javascript




// Filename: Pages/Courses.js
 
import React from "react";
import { Link, Outlet } from "react-router-dom";
 
const Courses = () => {
    return (
        <div className="Page">
            <h1>You are in the Courses page!</h1>
            <h3>URL: localhost:3000/courses</h3>
            <div className="courses-nav">
                <Link to="/courses/search">Search</Link>
                <Link to="/courses/list">List</Link>
            </div>
            <Outlet />
        </div>
    );
};
 
export default Courses;


CSS




/* Filename: App.css */
/* Styling for the App component nav element
and Course component course-nav div */
.App nav,
.courses-nav {
    background: #f2f2f2;
    height: 4vh;
    min-width: 600px;
    border-radius: 10px;
    text-align: center;
    border-bottom: 2px solid #2f8d46;
}
 
/* Styling for App component nav element anchor
tag and Course component nav element anchor tag */
.App nav a,
.courses-nav a {
    padding: 20px 20px;
    font-size: 26px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    color: #2f8d46;
}
 
/* Styling for Course component
course-nav div anchor tag */
.courses-nav a {
    color: rgb(59, 117, 241);
}
 
/* Styling for the Home component main div */
.Page {
    width: 100%;
    height: 96vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background-color: lightgreen;
}
 
/* Styling for the Search & List component main div */
.Search,
.List {
    width: 50%;
    height: 40%;
    padding: 100px;
    background-color: whitesmoke;
}


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

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:



Last Updated : 13 Oct, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads