How to Build Nested Routes in React using React Router DOM 6

In this post, we will show you how to create nested routes in react js application using the latest version of React router dom. Nested routes in react tell that a parent component has control over its child components at the route level.

Routes play a crucial role in any website; they let users reach from one page to another. Routes can be of single or multi types, and a single route takes one user from one page to another.

You can reckon route type by seeing in the browser’s address bar that a nested route tells users that the user has travelled through many categories or many pages.

In simple terms, nested routes reside within other routes; this guide will step by step show you how to build a child route and show the child components in react. React allows nesting the child routes within other child routes that seem like a tree of routes.

React Build Nested Routes with Router DOM 6 Tutorial

  • Step 1: Download React App
  • Step 2: Create New Components
  • Step 3: Install React Router DOM v6
  • Step 4: Add New Routes
  • Step 5: Create Nested Routes
  • Step 6: Start React Application

Download React App

Like this universe was created with the big bang explosion, the same way your tutorial starts with installing a create react app tool.

npm install create-react-app --global

You are now loaded with all the required tools, next you have to create a blank new react project.

npx create-react-app react-blog

Next, you have to enter into the app folder.

cd react-blog

Create New Components

Nested routes are generally used when you have multiple components, thats exactly what we are going to do in this step.

Make new Home.js file inside the components/ directory:

import React from 'react'

function Home() {
  return (
    <div>Home</div>
  )
}

export default Home

Secondly, get into the components/ directory, and make new Blog.js file:

import React from 'react'

function Blog() {
  return (
    <div>Blog</div>
  )
}

export default Blog

Thirdly, get into the components/ directory, and make new Single.js file:

import React from 'react'

function Single() {
  return (
    <div>Single</div>
  )
}

export default Single

Finally, get into the components/ directory, and make new Contact.js file:

import React from 'react'

function Contact() {
  return (
    <div>Contact</div>
  )
}

export default Contact

Install React Router DOM v6

You can start using react router dom library in your react application by executing the given command.

npm install react-router-dom@6

Add New Routes

Head over to the App.js component file, then start importing the router dom apis such as BrowserRouter, Routes, Link, and Route from the “react-router-dom” library.

Also, import the components for which you want to enable the nested routing.

import Home from './components/Home'
import Blog from "./components/Blog";
import Single from "./components/Single";
import Contact from "./components/Contact";

import { BrowserRouter, Routes, Link, Route } from "react-router-dom";

export default function App() {
  return (
    <div>
      <BrowserRouter>
        <nav>
          <Link className="nav-link" to="/">
            Home
          </Link>
          <Link className="nav-link" to="blog">
            Blog
          </Link>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/blog" element={<Blog />}>
            <Route path="single" element={<Single />} />
            <Route path="contact" element={<Contact />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

Create Nested Routes

In this step, you have to define the nested routes therefore go to components/Blog.js file and place the given code into the file.

import React from "react";
import { Outlet, Link } from "react-router-dom";

function Blog() {
  return (
    <div>
      <h2>Nested Routes in React</h2>
      <div className="product-nav mb-5">
        <Link to="/blog/single">Blog Details</Link>
        <Link to="/blog/contact">Contact</Link>
      </div>

      <Outlet />
    </div>
  );
}

export default Blog;

Start React Application

We have completed the nested route feature now we need to test the app, so run the command and start the app.

npm start

Above command will start your app with the following url.

http://localhost:3000

How to Build Nested Routes in React using React Router DOM 6

Summary

In React, Nested Routes have an assertive characteristic. Seldom do most of us think that React Router only offers navigation to users from one page to another. It is not entirely true; rather, it allows one to exchange particular view fragments based on the current route.

In this simple guide, we have comprehended how to build nested routes using react router dom apis in react js application.