Getting the Current URL with React

In modern web development, being able to access the current URL is often essential for building dynamic and interactive user interfaces. Whether it's for tracking analytics, managing navigation, or dynamically rendering content, having the ability to obtain the current URL within a React application is crucial. In this article, we will explore different ways to achieve this functionality, providing you with a comprehensive guide and practical examples.

Using window.location

One of the most straightforward methods to acquire the current URL in a React application is by leveraging the window.location object. This method provides direct access to information about the current location of the document.

Copycopy code to clipboard
1import React from 'react';
2
3const CurrentURLComponent = () => {
4  return (
5    <div>
6      <p>Current URL: {window.location.href}</p>
7    </div>
8  );
9}
10
11export default CurrentURLComponent;

The above example demonstrates a simple React component that displays the current URL using window.location.href. While this method is effective, it directly accesses the browser's global window object, which might not be ideal for all use cases.

Using React Router

For more complex applications utilizing routing, React Router offers a built-in way to access the current URL. The useLocation hook provided by React Router enables components to access the current URL along with other location-related information.

Copycopy code to clipboard
1import React from 'react';
2import { useLocation } from 'react-router-dom';
3
4const CurrentURLComponent = () => {
5  let location = useLocation();
6
7  return (
8    <div>
9      <p>Current URL: {location.pathname}</p>
10    </div>
11  );
12}
13
14export default CurrentURLComponent;

In the above example, the useLocation hook from React Router is employed to retrieve the current URL's pathname. This method is particularly useful when building single-page applications (SPAs) with multiple views and nested routes.

Using Hooks and Custom Logic

In scenarios where neither the window.location nor React Router suffice, custom hooks can be created to encapsulate URL-related logic. By abstracting this functionality into a reusable hook, the codebase becomes more maintainable and modular.

Copycopy code to clipboard
1import { useState, useEffect } from 'react';
2
3const useCurrentURL = () => {
4  const [currentURL, setCurrentURL] = useState(window.location.href);
5
6  useEffect(() => {
7    const handleURLChange = () => {
8      setCurrentURL(window.location.href);
9    };
10
11    window.addEventListener('popstate', handleURLChange);
12
13    return () => {
14      window.removeEventListener('popstate', handleURLChange);
15    };
16  }, []);
17
18  return currentURL;
19};
20
21export default useCurrentURL;

The custom hook useCurrentURL demonstrated above maintains the current URL state and ensures it stays updated as the URL changes. By utilizing the popstate event and the useState and useEffect hooks, this solution offers greater flexibility and control over handling URL changes within a React application.