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

  1. Install the react-router-dom library in the React project by giving the following command to the terminal.

npx install react-router-dom
Terminal command for installation.

2. Import the following routing components from the library in App.js file.

import { BrowserRouter as Router, Link, Routes, Route } from "react-router-dom";
Import componenets in App.js file.

  • BrowserRouter provides the routing facility to the application.

  • Router helps in managing all the components that help in navigation and rendering.

  • Link creates a clickable link to navigate between different routes in the application.

  • Routes acts as a container for multiple route components in the application

  • Route defines 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";
Import componenets in App.js file.

  • Outlet enables 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;
}
React.js project with nested tab routing use React Router.

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.css and import it to App.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.js file is rendered.

Interface when Contact Us is clicked.
Interface when Contact Us is clicked.

  • When we click on Contact via Call the URL changes to ed-5767785832251392.educative.run/contactus/call and the message specified in the Call.js file is rendered.

Interface when Contact via Call is clicked.
Interface when Contact via Call is clicked.

  • When we click on Contact via Email the URL changes to ed-5767785832251392.educative.run/contactus/email and the message specified in the Email.js file is rendered.

Interface when Contact via Email is clicked.
Interface when Contact via Email is clicked.

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

Q

What command is used to install React Routing library?

A)

npx install react-dom-router

B)

npx install react-router-dom

C)

npm install react-router-dom

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved