How to get the Current URL in React JS

Knowing how to get the current URL in a React JS application is essential for various purposes such as handling routing, conditional rendering, and more. In this blog post, we will explore different methods to get the current URL in a React JS application.

Prerequisites

Before we dive into the implementation, ensure you have the following:

1. A basic understanding of React JS.
2. Node.js and npm installed on your machine.
3. A React project set up. If you don’t have one, you can create it using Create React App:

   npx create-react-app get-current-url-demo
   cd get-current-url-demo
   npm start

Methods to Get the Current URL

Method 1: Using the window.location Object

The simplest way to get the current URL is by using the window.location object, which is a standard JavaScript property.

Here’s an example:

import React from 'react';

function App() {
  const currentUrl = window.location.href;

  return (
    <div className="App">
      <h1>Current URL</h1>
      <p>{currentUrl}</p>
    </div>
  );
}

export default App;

Method 2: Using React Router

If you are using React Router for routing in your application, you can access the current URL using hooks provided by React Router.

First, install React Router if you haven’t already:

npm install react-router-dom

Then, you can use the useLocation hook to get the current URL:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, useLocation } from 'react-router-dom';

function CurrentUrl() {
  const location = useLocation();
  const currentUrl = `${window.location.origin}${location.pathname}${location.search}`;

  return (
    <div>
      <h1>Current URL</h1>
      <p>{currentUrl}</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={CurrentUrl} />
        {/* Add more routes as needed */}
      </Switch>
    </Router>
  );
}

export default App;

Method 3: Using a Custom Hook

For a cleaner and reusable approach, you can create a custom hook to get the current URL. This method is particularly useful if you need to access the URL in multiple components.

Here’s how you can create a custom hook:

import { useLocation } from 'react-router-dom';

const useCurrentUrl = () => {
  const location = useLocation();
  return `${window.location.origin}${location.pathname}${location.search}`;
};

export default useCurrentUrl;

You can then use this hook in any component:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import useCurrentUrl from './useCurrentUrl';

function CurrentUrl() {
  const currentUrl = useCurrentUrl();

  return (
    <div>
      <h1>Current URL</h1>
      <p>{currentUrl}</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={CurrentUrl} />
        {/* Add more routes as needed */}
      </Switch>
    </Router>
  );
}

export default App;

Conclusion

Getting the current URL in a React JS application can be done in several ways, depending on your use case. The window.location object provides a straightforward solution for simple scenarios. If you are using React Router, leveraging the useLocation hook or creating a custom hook can offer a more integrated and reusable approach.

By understanding and utilizing these methods, you can effectively manage routing, handle conditional rendering, and enhance the overall user experience in your React applications. Happy coding!