React Tutorial- React Router DOM 6 Fetch Current URL/Pathname

In this React tutorial, we will see how to get the current route’s name, component pathname or URL name in React using the latest version of React Router DOM.

We will learn how to use React Router DOM 6 with the React Js app and find out how to get the current URL name in React Js app from scratch.

Most of us already know that routing is the feature that allows users to navigate various web pages on the action taken. React js router helps create SPA (single-page web app) and lets us build multiple routes in an application.

 

How To Retrieve The Current Route And Pathname In React JS App

Step 1- Generate React App

Step 2- Install React Router DOM v6

Step 3-Get Current Routes

Step 4- Run App On Browser

 

Step 1- Generate React App

Head over to the command prompt, type, run the below-given command and create a new React app.

npx create-react-app react-demo

Since we have downloaded the app, we need to enter inside the project folder:

cd react-demo

 

Step 2- Install React Router DOM v6

To integrate the dynamic routing in a React web app, we need React router module to be installed.

Now, we will run the suggested command to invoke the routing in React:

npm i react-router-dom

 

Step 3- Get Current Routes

Now, we have loaded our React app with a fully-powered client and server-side routing library.

We are now ready to show pages, get the current path/URL and let users navigate in the React app.

Then, we updated the suggested code within the App.js file:

import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
export default function App() {
  return (
    <BrowserRouter>
      <div>
        <h2 className='mb-4'>Fetch Current URL in React Js</h2>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/black-t-shirt/16996520">Clothes</Link>
            </li>
            <li>
              <Link to="/anti-skid-doormat/12290388">Door Mats</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/black-t-shirt/16996520" element={<Clothes />} />
          <Route path="/anti-skid-doormat/12290388" element={<Doormats />} />
        </Routes>
      </div>
    </BrowserRouter>
  )
}
function Home() {
  const nameUrl = window.location.href
  return <h2>{nameUrl}</h2>
}
function Clothes() {
  const nameUrl = window.location.href
  return <h2>{nameUrl}</h2>
}
function Doormats() {
  const nameUrl = window.location.href
  return <h2>{nameUrl}</h2>
}

 

With the help of React router DOM 6, we can now create three Link; a Link ideally renders a href tag.

Apart from that, we have to make sure to import BrowserRouter, Routes, Route, Link from the ‘react-router-dom’ module.

We will create three functions that routing refers to elements. These three functions will return the URL or route name that will extract using window.location.href property.

The window.location.href property helps to return or get the URL of the current page.

 

Step 4- Run App On Browser

In order to start the React app, we need to start the React server.

We will use the given command to evoke the React project.

npm start

 

Conclusion

In this React app tutorial, we have seen how to set u routes smoothly. Also, learned how to fetch the route name in React and display it on the browser’s window.

 

Thanks