React Js Nested Routes using React Router DOM 6 Tutorial

Last updated on: by Digamber

In this tutorial, you will learn how to create a basic React js application and integrate nested routes in React js app using React Router DOM version 6.

Nested routes in React allow the parent component to have holistic control over the child components from the routing context.

This React nested routes example requires you to have a basic React js app, React router installed and configured in React app.

Simple routes in web applications allow the user to navigate from one page to another page. However, Nested Routes are an assertive characteristic. It allows users to exchange specific fragments of the view based on the current route.

How to Create Nested Routes in React Js App using React Router DOM 6

  • Step 1: Create React Project
  • Step 1: Create Component Files
  • Step 2: Define Routes in React
  • Step 3: Set Up Nested Routes
  • Step 4: Run React App

Create React Project

Open the terminal, type the command and hit enter to install the create-react-app tool.

npm install create-react-app --global

Run the following command to create a latest React application:

npx create-react-app react-nested-routes

Now, you need to go to project’s root:

cd react-nested-routes

Create Component Files

In order to set up nested routes, create components/ directory also make the following component files:

Create Home.js file in components/ folder:

import React from 'react'
function Home() {
  return (
    <div>Home</div>
  )
}
export default Home

Create Dashboard.js file inside the components/ folder:

import React from 'react'
function Dashboard() {
  return (
    <div>Dashboard</div>
  )
}
export default Dashboard

Next, you have to create the Product.js file inside the components/ folder:

import React from 'react'
function Product() {
  return (
    <div>Product</div>
  )
}
export default Product

Lastly, you have to make the Details.js file in the components/ folder:

const Details = () => {
  return <div className="page-wrapper">Product Details</div>
}
export default Details

Define Routes in React

To define the routes in React, you need the react router DOM package in React app. Make sure to evoke the given command from the terminal.

npm install react-router-dom@6

Open the App.js file, that you can find in the src/ directory, then import the BrowserRouter, Routes, and Route from the ‘react-router-dom’ package.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import Home from './components/Home'
import Dashboard from './components/Dashboard'
import Product from './components/Product'
import Details from './components/Details'
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
export default function App() {
  return (
    <div className="container mt-5 text-center">
      <BrowserRouter>
        <nav>
          <Link className="nav-link" to="/">
            Home
          </Link>
          <Link className="nav-link" to="dashboard">
            Dashboard
          </Link>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />}>
            <Route path="product" element={<Product />} />
            <Route path="details" element={<Details />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}

Set Up Nested Routes

We will enable the nested routes or children routes in react; therefore, get into the components/Dashboard.js file.

Import the Link and Outlet services from the react-router-dom package. Set up the Link with child routes as suggested below:

import React from 'react'
import { Link, Outlet } from 'react-router-dom'
function Dashboard() {
  return (
    <div>
      <h2>React Nested Routes Example</h2>
      <div className="product-nav mb-5">
        <Link to="/dashboard/product">Product</Link>
        <Link to="/dashboard/details">Product Details</Link>
      </div>
      <Outlet />
    </div>
  )
}
export default Dashboard

Run React App

Lastly, we need to start the react server using the given command:

npm start

Open the given url through the browser and test the nested routing in react:

http://localhost:3000

React Js Nested Routes using React Router DOM 6 Tutorial

Conclusion

Nested routes are routes within another route. In this guide, we showed you how to build a child route and show the child components in React.

The React router DOM allows us to nest child routes under another child routes, profoundly creating a Tree of routes.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.