React Js Get Current Page Route and Page URL Tutorial

Routes or URLs are virtual addresses they help in many ways, for instance, it helps in processing the incoming web request, and also help you to redirect to a diffrent location within or outside the app.

This article discusses the simple technique for getting the current route name or path name using the window.location.href object. Sometimes, you might have to get the current page URL in React and use that URL to add some programming logic to it.

In this example, we will create a basic react app, set up react router DOM package, create components and configures some of the routes associated with the component and show you how to grab the current page URL or path name.

How to Get Current Page Address Name or Route in React Js

  • Step 1: Install React Project
  • Step 2: Add React Router Dom
  • Step 3: Get Current Path Name
  • Step 4: Run React App

Install React Project

In order to get your hands on React development, you must install the node run time environment and npm package manager globally on your machine.

After the suggested tools downloaded, use command to create the new react app.

Directly go on to the next step, if you have already created the app.

npx create-react-app react-demo

Add React Router Dom

React router dom is an ultimate elixir for creating routes; you can install this library from the public npm registry through npm or yarn.

Specifically, install the react-router-dom package from the public npm registry through npm or yarn if you are developing a web app.

npm install react-router-dom

Get Current Path Name

Now, you need to add the following code into src/App.js file.

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/product-page-555">Product</Link>
            </li>
            <li>
              <Link to="/product-details-9999">Product Details</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/product-page-555">
            <Product />
          </Route>
          <Route path="/product-details-9999">
            <ProductDetail />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  const currentPathName = window.location.href;
  return <h2>{currentPathName}</h2>;
}

function Product() {
  const currentPathName = window.location.href;
  return <h2>{currentPathName}</h2>;
}

function ProductDetail() {
  const currentPathName = window.location.href;
  return <h2>{currentPathName}</h2>;
}

First, import the BrowserRouter as Router, Switch, Route, and Link submodules from the “react-router-dom” package.

Use the Link tag to set the path names for respective components.

Use the Switch directive as a wrapper around the Routes with path names and the function level components.

To detect the URL name, use the window location object; it helps get the current page address (URL).

Use the href prefix to get the current page URL. However, not just the current page name, but you can also get hostname, pathname, protocol, and assign prefixes with it.

Run React App

Let us start the React’s development server; you need to open the command prompt, start typing the command and execute.

npm start

Open the provided URL to view the route name.

http://localhost:3000

React Js Get Current Page Route and Page URL Tutorial

Conclusion

We hope this guide will significantly enhance your understanding of the basic routing in react; however, this was not our primary goal. Our goal was to get the current route name in React while navigating from one page to another.

We showed you how to use the React Router DOM package in conjunction to get the current URL name in react. This package allows you to implement dynamic routing in a web app. On the other hand, It profoundly handles the views of the component, especially when it detects changes in the browser URL.