Implement Nested Routes in React.js React Router DOM V6 (original) (raw)

Last Updated : 23 Jul, 2025

Nested routes in React JS provide hierarchical navigation which is implemented using the outlet component in React Router Dom. Routing in React not only provides routing for the pages but also for rendering multiple components inside that page. Nested routes implement this by defining Routes for Child components inside parent route components.

**Prerequisites:

Nested Routes in React

Nested Routes in React are used to create multi level navigation. It allows us to build complex layouts rendering components at different levels. It is done with the help of Outlet component provided by react router dom.

Syntax:

// Define Nested Routes
<Route path="parent" element ={}>
<Route path="child" element = {}/>

// Define Outlet position to render child
const Parent = ()=>{
return()
}

Approach for Nested Routes

To Implement Nested Routes in React we will define child routes inside the Parent route with the help of path and element attributes. Use the outlet component inside parent component where you want to render the nested component.

**Steps to Implement Nested Routes

**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.

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

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 (

<Route path="/" element={} /> <Route path="/courses" element={} > <Route path="search" element={} /> <Route path="list" element={} />
); }

export default App;

JavaScript

// Filename: Pages/Home.js

import React from "react";

const Home = () => { return (

You are in the Home page!

URL: localhost:3000/

); };

export default Home;

JavaScript

// Filename: Components/Search.js

import React from "react";

const Search = () => { return (

You are inside the Search Component

URL: localhost:3000/courses/search

); };

export default Search;

JavaScript

// Filename: Components/List.js

import React from "react";

const List = () => { return (

You are inside the List Component

URL: localhost:3000/courses/list

); };

export default List;

JavaScript

// Filename: Pages/Courses.js

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

const Courses = () => { return (

You are in the Courses page!

URL: localhost:3000/courses

Search List
); };

export default Courses;

`

**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:

Summary

Nested routes in react is a way for defining multi level navigation in the react app which is implemented wth the help of outlet component. Define the child routes enclosed with parent routes and place the outlet component inside parent for rendering.

Nested routes in react are implemented with the help of the outlet component in react router. Define the nested routes using the Route Component and use outlet inside parent component to render the nested routes.

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