React Router DOM 6 Fetch Current URL / Pathname Tutorial

If you want to learn how to get the current route’s name, component pathname or URL name in React using the latest version of React Router DOM, this tutorial will show you how.

You will discover how to use React Router DOM 6 with React js application and find out how to quickly get the current URL name in React js app from scratch.

Routing is the feature that allows users to navigate various web pages based on the action taken. React js router helps create SPA (single-page web app) and lets you build various routes in an app.

How to Retrieve the Current Route and Pathname in React Js

• Step 1: Generate React App
• Step 2: Install React Router Dom v6
• Step 3: Get Current Routes
• Step 4: Run App on Browser

Generate React App

Head over to command prompt, type, run the suggested command and create a new React ap.

npx create-react-app react-demo

After the app is installed, next enter inside the project folder.

cd react-demo

If you have already created the React app, follow the subsequent step.

Install React Router Dom v6

To integrate dynamic routing in a React web app requires React Router DOM module to be installed.

Run the suggested command to invoke the routing in React.

npm i react-router-dom

Get Current Routes

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

We can now show pages, get current path / url and let users navigate in React app.

Update 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, make sure to import BrowserRouter, Routes, Route, Link from the ‘react-router-dom’ module.

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

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

Run App on Browser

To start the react app, you now need to start the react server.

You may use the suggested command to evoke the react project.

npm start

Hit the given url on the browser and click on either of the link to retrieve the url below the routing elements:

http://localhost:3000

Summary

In this tutorial, we discussed an effortless and efficient way to set up routes in React.

At the same time, we learned how to fetch the route name in React and display it on the browser’s window.

We hope this guide has effectively helped and showed you the right path to work with React Router DOM 6.