How to create nested tab routes with React Router
Routing is a mechanism used for navigation. React Router is a JavaScript framework that allows navigation from one page to another without refreshing the webpage.
What are nested tab routes?
Nested tabs are hierarchically organized navigation structures where one option navigates to multiple sub-options. They are implemented to handle navigation in complex UI structures.
For example, if you click on the contact tab in the navbar it will open up more options like Contact via Email, Contact via Text, and Contact via Call.
How to use React Router library
Install the
react-router-domlibrary in the React project by giving the following command to the terminal.
npx install react-router-dom
2. Import the following routing components from the library in App.js file.
import { BrowserRouter as Router, Link, Routes, Route } from "react-router-dom";
BrowserRouterprovides the routing facility to the application.Routerhelps in managing all the components that help in navigation and rendering.Linkcreates a clickable link to navigate between different routes in the application.Routesacts as a container for multiple route components in the applicationRoutedefines the specific path for a route along with the components to render.
3. Import the Outlet component from the library in the parent file where the child routes will be rendered (Contact.js file in the reference code).
import { Link, Outlet } from "react-router-dom";
Outletenables nested routing and rendering of components which provides a dynamic way to manage different views in the application
Sample code
This is a React.js project that shows nested tab routing for a simple navbar that has home, log-in, and Contact Us options. Upon clicking any option, the webpage dynamically renders the new interfaces.
.App {
text-align: center;
}
body {
padding: 0%;
margin: 0%;
font-family: "Open Sans", sans-serif;
}
nav {
padding-left: 20px;
width: 100%;
height: 80px;
background-color: rgb(43, 43, 99);
display: flex;
justify-content:flex-start;
align-items: center;
color: white;
}
h1 {
margin-left: 20px;
color: #3c297e;
}
a {
color: white;
text-decoration: none;
margin: 10px;
font-size: 20px;
}
.contactNav{
background-color: #1e0f5cb5;
margin: 30px;
padding: 7px;
width: fit-content;
}
label {
font-size: larger;
font-weight: 600;
margin-left: 30px;
}
Code explanation
Make files of the components used in the application and import them to
App.js.Import the routing components from react-router-dom to
App.js.Import the outlet component from react-router-dom to
Contact.js.Specify the application flow through Routes in
App.js.Add the CSS styling of each component in
App.cssand import it toApp.js.
Click on the link provided under the code to view the dynamically changing URL when options are clicked.
When we click on Contact Us the URL changes to ed-5767785832251392.educative.run/contactus and the Contact Us navbar specified in the
Contact.jsfile is rendered.
When we click on Contact via Call the URL changes to ed-5767785832251392.educative.run/contactus/call and the message specified in the
Call.jsfile is rendered.
When we click on Contact via Email the URL changes to ed-5767785832251392.educative.run/contactus/email and the message specified in the
Email.jsfile is rendered.
Summary
Nested tab routing can be done by importing the routing components from the react-router-dom library in the React.js project. To render a route inside an existing route, include the nested Route inside the parent Route.
<Route path="contactus" element={<Contact />}><Route path="email" element={<Email />} /></Route>
To render a nested interface import Outlet and call it inside the parent div.
return (<div><div className="contactNav"><Link to="/contactus/email"> Contact via Email </Link></div><Outlet /></div>);
Note: Click here to open a course that further tells about nested routing theory and implementation.
Test your understanding
What command is used to install React Routing library?
npx install react-dom-router
npx install react-router-dom
npm install react-router-dom
Free Resources