Best Way to Understand Nesting Routes Concepts in React Router

Nesting Routes React Router

In this article, we’ll learn the nesting routes feature in react router. I hope you how react-router helps us to navigate across pages in our application. But what you should know is that react also helps to switch between a portion of the view inside the page. If that is a little confusing let me explain with a simple scenario.

In this application below, when we click on the link we navigate to “/products“, which renders a new products page.

react router example

Now this is something, we already know

But now within this products page, we have a search bar to search for a product, and below that we have two more links “featured” and “new”. If we click on “featured”, the URL updates to “/products/featured“, the search bar and the links will stay in place but only the UI below the link will change and render. Similarly, If you click on “new”, the URL changes to “/products/new“, and the search bar and links will stay only the list of feature products will switch with the UI that renders.React router example

As you can see only a portion of the UI changes based on the route. To achieve this, we need to use nested routes.

Step by step to create nested routes

Follow these steps to achieve

Step 1: Create Component

Create the Navbar.js file and add the navLinks using ‘react-router-dom’ NavLink. In this, we’ve linked home and products component in the NavLink. Similarly, you can also link the pages you want to nested routes and other pages

//Navbar.js
import React from "react";
import NavLink from 'react-router-dom'

function Navbar() {
  return(
    <div>
         <nav>
        <NavLink to="/">Home</NavLink>
        <NavLink to="/Products">Product</NavLink>
      </nav>
    </div>
  ) 
}

Step 2: Link the pages

Link the pages required for the nested route in the component you want to nest the route. Here, we’ve linked nested links to the product component called ‘feature‘ and ‘new‘

//Product.js

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

function Products() {
  return (
    <>
      <div>
        <input type="search" placeholder="search" />
      </div>
      <nav>
        <Link to="/feature">Feauture</Link>
        <Link to="/new">New</Link>
      </nav>
    </>
  );
}

export default Products;

Step 3: Create the content

Create the content for ‘feature and ‘new‘ components, like

//Feature.js

import React from "react";

const Feature= () => {
  return(
    <div>
      List of Feautered product
      </div>
  )
}

export default Feature;
//New.js

import React from "react";

const New() => {
  return(
    <div>
      List of New product
      </div>
  )
}

export default New;

Step 4: App.js

Finally,sets up routing for the application using the Routes and Route components from ‘react-router-dom‘. The application has three main routes: the default home route (‘/’), the “Products” route (‘/Products’), and two nested routes under “Products” for “feature” and “new“. The appropriate components (Home, Products, Feature, and New) will be rendered based on the current URL path. This setup allows for a clean and organized approach to handle different views and sub-views in a React application.

import React from "react";
import "./App.css";
import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import Products from "./Products";
import Navbar  from "./Navbar";
import Feauture from './Feauture';
import New from './New';

const App = () => {
  return (
      <div>
        <Navbar/>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="Products" element={<Products />}>
              <Route path='feature' element={<Feauture/>}/>
              <Route path='new' element={<New/>}/>
          </Route>
        </Routes>
      </div>
  );
};

export default App;

The Route component represents the “Products” route, which is displayed when the URL matches ‘/Products’. The element prop specifies the Product component to be rendered when the URL matches this route.

READ ALSO  Perfect Scenario to Use React UseReducer and UseState Hook

Additionally, within the “Products” route, we have two nested Route components. These nested routes are used for handling different sub-paths under the “Products” route.

Step 5: Defining the Feature Route

This Route component represents the “feature” route, which is a sub-path of the “Products” route. It will be displayed when the URL matches ‘/Products/feature’. The element prop specifies the Feature component to be rendered when the URL matches this route.

<Route path='feature' element={<Feature/>}/>

Step 6: Defining the New Route

<Route path='new' element={<New/>}/>

This Route component represents the “new” route, which is another sub-path of the “Products” route. It will be displayed when the URL matches ‘/Products/new’. The element prop specifies the New component to be rendered when the URL matches this route.

Leave a Reply