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 : 100 vh; } .homeDiv { display : flex; justify- content : center ; align-items: center ; height : 100 vh; } .profileBtn { background-color : #1877f2 ; color : white ; padding : 1 rem; border-radius: 0.4 rem; border : none ; font-size : 1.3 rem; text-decoration : none ; top : -50% ; left : -50% ; transform: translate( 50% , 50% ); } .buttons { margin-top : 2 rem; } .navBtn, .activeBtn { padding : 1 rem; background-color : white ; color : black ; border-radius: 0.4 rem; box-shadow: rgba( 0 , 0 , 0 , 0.35 ) 0px 5px 15px ; margin : 2 rem 1 rem 2 rem 1 rem; text-decoration : none ; font-size : 1.3 rem; } .activeBtn { background-color : #1877f2 ; color : white ; } .details { padding : 1 rem; display : inline- block ; background-color : white ; color : black ; border-radius: 0.4 rem; border-color : 2px solid black ; box-shadow: rgba( 0 , 0 , 0 , 0.35 ) 0px 5px 15px ; margin : 5 rem 1 rem 2 rem 1 rem; text-decoration : none ; font-size : 1 rem; } 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:
Contact Us