Nested Routing in React-router-dom: Beyond the Basics
Lets learn how to create a nested Routing and utilize it’s benefits to make our react app stand out.
This will help us to keep the component, that is common among the page’s and just replaced the other component. So in this way we don’t want to render the common component every time. For example a quick access bar below the Navigation bar that gives us the option to go to the specific page.
Nested Routes as the name suggest it is useful when we are dealing with the routes that are the sub routes of the main routes or the children's of the main route. For Example
— http://127.0.0.1/product — this could me our main route
— http://127.0.0.1/product/search — this is our sub route
— http://127.0.0.1/product/add — this is our sub route
— http://127.0.0.1/product/product — this is our sub route
At this time we can render each route separately or we can use the react-routers Nested feature to optimize our react app.
As you are reading this blog, I already figured it out that you are smart! So lets start with applying our smartness to the react app and make it optimize.
For using the Nested Feature we first need to have a react App that’s the basic requirement. So start with initializing the react App for that I will be using Vite as it is super fast! you can use anything.
npm craete vite@latest .This command will create a react app for me but I need to install the dependencies. By entering the command below it will install the dependencies.
npm iNow comes the react-router-dom installation, it is simple just write this command.
npm i react-router-domI will not start from the basic like creating pages and all let’s keep our focus on react-router-dom and implementing the nesting feature in our react project. If you want the code, you can get it from GitHub I will provide you the link in the Ending of the blog so go through the blog first.
We will defining all our code related to routes in our app.js or app.jsx file.
So First let me show you the code without nesting how it looks and then I will show you with Nesting. And I will try to explain you what it is doing.
The Code without Nested Routes.
// APP.js
import "./App.css";
// Importing the React Router Dom
import { BrowserRouter as Router,Routes,Route, NavLink } from "react-router-dom";
import Home from "./Components/Home";
import About from "./Components/About";
import Contact from "./Components/Contact";
import Error from "./Components/Error";
import Profile from "./Components/Profile";
import Friends from "./Components/Friends";
import Request from "./Components/Request";
import Stranger from "./Components/Stranger";
import ContactSearch from "./Components/ContactSearch";
function App() {
const navigationActive = (({isActive})=>{
return {
color:isActive?'white':'black',
textDecoration: 'none'
}
})
return (
<Router>
{/* Creating the Navigation Link to go from one route to another using the NavLink */}
<nav>
<NavLink style={navigationActive} to="home">
Home
</NavLink>
<NavLink style={navigationActive} to="about">
About
</NavLink>
<NavLink style={navigationActive} to="contact">
Contact
</NavLink>
</nav>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="/contact/friends" element={<Friends />} />
<Route path="/contact/request" element={<Request />} />
<Route path="/contact/stranger" element={<Stranger />} />
<Route path="/contact/search" element={<ContactSearch />} />
<Route path="/profile/:username" element={<Profile />} />
<Route path="*" element={<Error />} />
</Routes>
</Router>
);
}
export default App;As you can see from the above code there is one contact route and then there is some sub routes of contact. Here we can use the Nested routes that can help us in many ways. I will be also showing you the output for both
The Output without Nested code.
In the above video we can see that whenever we click on the button like search it going to that page but we are unable to get the options that were there in the contact main page. For that we need to add it manually to each pages or the component.
Now lets explore the Nested routes.
I will write the code first and then explain what it is doing. In the Nested Route we need to make changes in two file. The first will be the app.js file and the other one will be the main route element component in our case it will be the Contact element.
First we will make changes in the app.js file and see the changes and then we will make changes in the Contact.jsx file and then see the changes. In this way we can compare what and how it is working.
The Nested route added in App.js file.
//App.js
import "./App.css";
// Importing the React Router Dom
import {
BrowserRouter as Router,
Routes,
Route,
NavLink,
} from "react-router-dom";
import Home from "./Components/Home";
import About from "./Components/About";
import Contact from "./Components/Contact";
import Error from "./Components/Error";
import Profile from "./Components/Profile";
import Friends from "./Components/Friends";
import Request from "./Components/Request";
import Stranger from "./Components/Stranger";
import ContactSearch from "./Components/ContactSearch";
function App() {
const navigationActive = ({ isActive }) => {
return {
color: isActive ? "white" : "black",
textDecoration: "none",
};
};
return (
<Router>
{/* Creating the Navigation Link to go from one route to another using the NavLink */}
<nav>
<NavLink style={navigationActive} to="home">
Home
</NavLink>
<NavLink style={navigationActive} to="about">
About
</NavLink>
<NavLink style={navigationActive} to="contact">
Contact
</NavLink>
</nav>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
//Add the Nested route
<Route path="/contact" element={<Contact />}> //Main Route
<Route path="friends" element={<Friends />} /> //Nested Route
<Route path="request" element={<Request />} /> //Nested Route
<Route path="stranger" element={<Stranger />} /> //Nested Route
<Route path="search" element={<ContactSearch />} /> //Nested Route
</Route>
<Route path="/profile/:username" element={<Profile />} />
<Route path="*" element={<Error />} />
</Routes>
</Router>
);
}
export default App;In the previous code we were writing the Route in a self closing tags like <Route />, but to use the nested route we have added the closing tag route separately like these <Route></Route> and inside this we have placed all the nested routes.
In this Nested Routes we don’t need to write the path as /contact/friends , as the contact path will already be there, we just need to specify the nested path, that will be the keyword friends .
Lets Check the Output :-
In the above video as we can see there is no change on the screen, why? there is no changes when we click on the screen any clue? No!
Okay let me explain, in the above when I was talking about the changes to be made, there I have mentioned we need to apply changes to two files the one is done but the second is remaining.
The reason for the no change is, when we are using the nested routes the main route element will contain the UI that is common to every nested element in our case it is the sub navigation but to see the changes that is happening when we click on the links we need to use the Outlet component that is provided by the react-router-dom.
This Outlet component will show us the changing elements where ever we place it below or above or in the middle.
In this way we can achieve the nested routing in our React App.
Here is the Code and the Video with the Outlet component.
// Contact.js
import React from 'react'
import { NavLink,Outlet} from 'react-router-dom'
function Contact() {
return (
<div>
<div class="ContactOption">
<NavLink to="search">Search</NavLink>
<NavLink to="friends">Friend</NavLink>
<NavLink to="request">Request</NavLink>
<NavLink to="Stranger">Stranger</NavLink>
</div>
<Outlet/>
</div>
);
}
export default Contact
Conclusion :-
In this blog we learned how to use nested routing in our react app using react-router-dom. We have seen what are the benefits of using the nested routing.
The Nested routing can be used when we want a same UI in the page but a single component to change when we do some action.
And in the next blog we will go more deeper to explore more features provided by the react-router-dom. I hope you are ready for that.
And if you like what I am sharing! do tag along with me in the journey to learn new things I would love to share what I am able to learn and explore. And it would be my pleasure to help the community.
Here is the GitHub link — https://github.com/ritik1009/react_router_dom_demo#react-router
Here are some of my recommended stories.
