How to get current URL in React

Routing is an important part of any web application. Unfortunately, React does not have a built-in solution for routing. React developers are forced to use external libraries, most commonly react-router. This library does more than define routes and components for specific URLs. It helps you deal with everything related to page URLs and web app navigation.

In this article, we will discuss how to access current URL in React. Obviously, there are a number of ways to do this – starting from plain JavaScript to react-router approach. There are also other routing libraries you can use as an alternative, but most popular is the react-router approach. So we will explain that and walk you through how to get current URL using react-router library.

Window interface

Before we delve into this topic, we need to explain what window interface is, count its many properties, and then explain location property. Window is a global interface available for all web application that run in the browser. Like its name suggests, this interface contains information about browser window. There is a wealth of information about window height, width, and fortunately, it also contains information about current URL in the browser. That information is stored in the location property of the interface.

React apps run in the browser, so you can access the window interface and all its properties to determine current URL in React. However, generally it’s a bad practice to work directly with DOM in React. For this reason, it’s better to use the useLocation() hook which accesses the location object so you can get the information you need.

Find current URL with react-router

First, you’re going to need to install react-router. Once you have, then you can import many useful components to implement navigation features in your app. You’re going to need <BrowserRouter>, <Route>, <Link> and other custom components to set up a fully fleshed-out navigation system for your app.

Since version 6, react-router also provides the useLocation() hook. To use it, you need to create a variable and set it equal to the result of useLocation() hook. It returns the reference to window.location object, which will be stored in the variable. Then you can access the variable and use it throughout your application. You also need to read the href property of the variable to output the actual URL.

SimpleFrontEnd has a comprehensive tutorial on how to get current URL in React:
https://simplefrontend.com/how-to-get-current-url-in-react/

The downside of using the useLocation() hook is that this approach doesn’t work in class components. As you may know, this type of component doesn’t support hooks. Instead, you’ll have to use a native JavaScript approach we described before. Alternatively, you can find another routing library that provides a custom component to access current URL in React.

Final words

Like any other react-router feature, this only works if the entire application is wrapped with custom components. You don’t need to wrap the child component itself, it’s enough that parent is wrapped with it.