React Fetch Current URL with useLocation Hook Tutorial

React get current url example; In this definitive post, we will learn how to retrieve the current URL, path, or route in React js application using the router dom’s useLocation hook.

React router dom library is pretty helpful in building routes in React js. It offers tons of APIs that make navigation possible in your react app.

We can create and set up routing in React using the router dom library but do you know how to fetch or get the current URL in React js. Well, if your answer is now, don’t worry; we are here to help you out with this feature.

The useLocation is a handy hook that comes with the react-router library; it is mainly used for getting the current URL.

The useLocation hook is merely a function that returns the location object that holds the data about the current URL. The beauty of this hook is that whenever the URL changes, this hook will return a new location object.

How to Get Current URL in React using useLocation Hook

  • Step 1: Install React App
  • Step 2: Add React Router Package
  • Step 3: Make Component File
  • Step 4: Fetch Current URL
  • Step 5: Set Up Route
  • Step 6: Start React Application

Install React App

We will create a new react project, ensure that you execute the given command from the terminal.

npx create-react-app react-demo

Use the suggested command to enter into the project.

cd react-demo

Add React Router Package

By using the node package manager or npm we are going to install the react router dom library in react project. Make sure to run the following command.

npm install react-router-dom@6

Make Component File

The architecture of React is built on components, so create the components directory, create the User.js file in this folder and write the provided code.

import React from 'react'

function User() {
  return (
    <div>

    </div>
  )
}

export default User

Set Up Route

Get inside the User.js file, and write the following code within the file.

Define the location variable using the useLocation hook, and use the pathname property to fetch the current location.

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

function User() {
  const location = useLocation()

  return (
    <div>
      <p>URL: {location.pathname}</p>
      <p>
        Search Params: {new URLSearchParams(location.search).get('name')}
      </p>
    </div>
  )
}

export default User

Update Global App File

In your project folder, you must see the App.js file; open this file and write the given code into it.

First, import the User component at the top, import BrowserRouter, and NavLink modules from the react-router-dom library. Wrap the NavLink directive using the BrowserRouter component.

import React from 'react'
import './App.css'
import User from './components/User'
import { BrowserRouter, NavLink } from 'react-router-dom'

export default function App() {
  return (
    <BrowserRouter>
      <div>
        <h2>React Retrieve Current URL Example</h2>

        <NavLink to="/settings/user?name=herry">
          Get Current URL
        </NavLink>

        <User />
      </div>
    </BrowserRouter>
  )
}

Start React Application

We have created and connected everything in its proper place.

Now the last thing is to check the app, and we can do it by executing the provided command.

npm start

Suggested url can be used to test the applicaiton.

http://localhost:3000

React Fetch Current URL with useLocation Hook Tutorial

Conclusion

When it comes to building and managing routes in React, the react-router library shines like stars. It offers loads of apis, but in this tutorial, we focused on the useLocation hook.

In this post, we ascertained how to return the current location object in react and fetch the current URL.