Accessing URL Information in React Applications

In React applications, accessing URL information is a common requirement for various use cases such as routing, data fetching, and analytics. In this tutorial, we will explore different ways to access URL information in React applications.

Using Vanilla JavaScript

The most straightforward way to access URL information is by using vanilla JavaScript’s window.location object. This object provides several properties that can be used to extract different parts of the URL.

• window.location.href: Returns the full URL, including the protocol, domain name, path, and query parameters.
• window.location.origin: Returns the origin of the URL, which includes the protocol and domain name.
• window.location.pathname: Returns the path part of the URL, excluding the domain name.

Here’s an example:

console.log(window.location.href); // Returns the full URL
console.log(window.location.origin); // Returns the origin of the URL
console.log(window.location.pathname); // Returns the path part of the URL

Using React Router

If you are using React Router in your application, you can access URL information through the location object provided by the router. There are two ways to access this object:

• Using this.props.location: If you are using a class component and your component is a route component (i.e., it’s rendered by a Route), you can access the location object through this.props.location.
• Using useLocation hook: If you are using functional components or want to access the location object in a non-route component, you can use the useLocation hook from react-router-dom.

Here’s an example:

// Using this.props.location
import React from 'react';
import { Route } from 'react-router-dom';

const MyComponent = () => {
    return (
        <Route path="/my-path" render={() => (
            <div>
                <h1>My Component</h1>
                <p>Path: {this.props.location.pathname}</p>
            </div>
        )} />
    );
};

// Using useLocation hook
import React from 'react';
import { useLocation } from 'react-router-dom';

const MyComponent = () => {
    const location = useLocation();
    return (
        <div>
            <h1>My Component</h1>
            <p>Path: {location.pathname}</p>
        </div>
    );
};

Using useHistory Hook

Another way to access URL information is by using the useHistory hook from react-router-dom. The useHistory hook returns an object with a location property, which contains information about the current URL.

Here’s an example:

import React from 'react';
import { useHistory } from 'react-router-dom';

const MyComponent = () => {
    const history = useHistory();
    return (
        <div>
            <h1>My Component</h1>
            <p>Path: {history.location.pathname}</p>
        </div>
    );
};

In conclusion, accessing URL information in React applications can be achieved through various methods, including using vanilla JavaScript’s window.location object, React Router’s location object, and the useLocation and useHistory hooks from react-router-dom. The choice of method depends on your specific use case and application requirements.