In this article, we will explore a number of different ways to get current URL in React.

There are basically two ways:

  1. Simpler approach – access current URL on window interface. Great for simple use cases, but insufficient for advanced use cases (working with dynamic parameters or search queries in the URL).
  2. react-router and hooks for advanced use cases.

window.location to access current URL in React

location is one of many properties on the window interface. Its value is an object that contains information about the URL. Different properties contain full URL, pathname, hash, domain name, and other values.

The href property contains the full URL.

Here’s how to get current URL in React:

In this case, we return props.location.href to console log full URL. You can open live demo and check the console.

location has other properties like pathname, search and hash that contain specific URL information.

  • pathname shows the relative path. For example, if the full URL is “blog.com/september/hello-world” then pathname is “/september/hello-world”.
  • search shows the dynamic search query. This may be useful to extract search phrases or keywords.
  • hash shows the hash part of the URL.

You can access window.location in functional as well as class components. It’s especially useful in class components where you can’t use hooks.

Window interface and location object

window interface contains information about a browser window that contains the entire page. Every web application open in an internet browser has access to window interface. This is true not only for React, but all web applications.

To get the current URL, we need to access location property on the window interface.

useLocation() hook to access current URL in React

react-router provides a useLocation() hook, which allows you to directly access the location object in React. The object itself is the same as before. To get a full URL, we need to access the href property.

export default function App() {
 const variable = useLocation()
 console.log(variable.href);
 return (
   <div className="App">
     <a href="/someURL">Some URL</a>
   </div>
 );
}

To use the useLocation() hook, you need to create a variable to store the result of the useLocation() hook, which returns a location object.

Remember that this is the same location object from before. So you can access pathname, search, hash properties to get different parts of the URL.

Note: To use the useLocation() prop, the component must be wrapped with a <Router> parent component. If you don’t want to go through the trouble of doing this, you might want to use a plain JavaScript approach.

Get parameters from the URL

You need react-router to implement dynamic features in React. <Route> custom components allow you to define dynamic routes. Dynamic parts of the URL must be preceded by colon.

Let’s imagine we have a list of products and want to create a dynamic route for every individual product.

In this case, `:productId` represents dynamic part of the URL.

<Route path="/products/:productId" element={<Product />} />

You can use useParams() to access URL parameters in the rendered component itself.

useParams() returns an object that contains URL parameters and their dynamic value.

In this case, useParams would return {productId: 1} object (assuming the route is for product with ID of 1).

In the example, we destructure the object to get the value of productId property.

import React from 'react';
import { Route, Routes, useParams } from 'react-router-dom';

function Product() {
  const { productId } = useParams();
  return <h2> Here's information about the product {productId} </h2>;
}

export default function ProductList() {
  return (
      <div>
        <Routes>
          <Route path="/products/:productId" element={<Product />} />
        </Routes>
      </div>
  );
}

You can have multiple dynamic parameters in the URL and still access them in the object returned by useParams() hook.

Routing