Implement Nested Routes in React.js – React Router DOM V6
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:
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
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
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
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
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
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
.App nav,
.courses-nav {
background : #f2f2f2 ;
height : 4 vh;
min-width : 600px ;
border-radius: 10px ;
text-align : center ;
border-bottom : 2px solid #2f8d46 ;
}
.App nav a,
.courses-nav a {
padding : 20px 20px ;
font-size : 26px ;
font-weight : bold ;
text-transform : uppercase ;
text-decoration : none ;
color : #2f8d46 ;
}
.courses-nav a {
color : rgb ( 59 , 117 , 241 );
}
.Page {
width : 100% ;
height : 96 vh;
display : flex;
flex- direction : column;
align-items: center ;
gap: 15px ;
background-color : lightgreen;
}
.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
Share your thoughts in the comments
Please Login to comment...