How to Get Current URL in React

1. Get Current URL in React - Vanilla JavaScript Solution
2. Get Current URL via React Router
3. Get Current URL React Router Hooks

When developing Single Page Applications in React, routing is the key piece of the puzzle. On every URL, there may be components or other visuals that need to be displayed.

When building a React app, developers often need to perform various actions based on the current URL. Developers can use multiple different interfaces to access the current URL.

Get Current URL in React - Vanilla JavaScript Solution

Since React is based on regular JavaScript, you can access the location property on the window interface. To get the full path of the current URL, you can use window.location.href, and to get the path without the root domain, access window.location.pathname instead.

Let’s look at the example:

class App extends Component {
  render() {
    console.log(window.location.href);
    return <h1>Hi! Try edit me</h1>;
  }
}

If you render the App component on playcode.io, the console will show the full URL to your project. In this case, that would be https://playcode.io/837468/. If you console.log(window.location.pathname) instead, the console output will be /837468/. Follow this link to play around with the code yourself.

Reading window.location is a good, simple solution to get the current URL. However, it relies on the general window.location interface.

If you’re looking for a React-specific solution, continue reading.

Get Current URL via React Router

React provides a history package, and separated location object via props. It is essentially the same location object available on the window interface, but it is customized for React.

This object represents the app’s current URL. The easiest way to access it is by reading the location object of the props.

However, to provide location via props, you must install React Router, and the child component must be connected to the Route component. For example:

<Route path="/" component={App}></Route>

In this example, the App component will have access to the location object via props. Inside this component, we can read this.props.location.pathname, which will return a path URL that doesn’t include the root domain.

Child components rendered with a <Route> component also have the access to location prop. Here’s an example:

<Route path="/" render={() => <App></App>} />

In this case, the App component will still retain access to the location prop.

If this.props.location returns undefined, your React component is most likely rendered outside the custom <Route> component. In this case, you can import high-order component (HOC) withRouter and use it to access location and history props.

withRouter can be imported from the react-router-dom package. Here’s an example:

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class App extends Component {
      render(){...}
}

export default withRouter(App)

Wrapping the default export App component in a withRouter HOC will allow you to access props that would be otherwise only available for components rendered with a special <Route> component.

Get Current URL React Router Hooks

Functional components allow you to use hooks. In our situation, useLocation() is an excellent hook that provides an easy way to access the location object.

It can be imported from the react-router-dom package. This example uses the useLocation() hook to get a location object and store it in a variable.

Let’s have a look:

import { useLocation } from "react-router-dom"
const sampleLocation = useLocation();

Once you’ve stored the location object in a variable, you can access the path (URL without the root domain) by accessing sampleLocation.pathname.

You can also access the location property of the history object.

The useHistory hook allows you to get access to it. However, due to mutability concerns, official react-router docs recommend sticking with the location object.