React Js Extract Current URL using useLocation Hook Tutorial

React js is a quite popular frontend framework that is taking control over a significant part of the web development realm.

In React, you can split extensive features into small components. Components are easy to manage and enhance the development speed.

In this tutorial, you will learn how to use the useLocation hook that is provided by React Router DOM service.

React Router DOM allows us to create dynamic routes in a web app. It enables us to develop component-based routing that can help us travel throughout the react application.

In this post, we will learn how to use the useLocation hook that came with React Router DOM v6 package.

The useLocation hook returns the current location object, and it is ideally useful if you’d like to perform some side effect whenever the current location changes.

How to Use useLocation Hook in React with React Router DOM v6

• Step 1: Download React Project
• Step 2: Install React Router DOM Module
• Step 3: Create Component in React
• Step 4: Render Current URL with useLocation
• Step 5: Update Global App File
• Step 6: Run Development Server

Download React Project

The first step, directs you to install the create-react-app tool, this is imperative for react development:

npm install create-react-app --global

Creating a new react app is easy, it can merely be done by executing the given command:

npx create-react-app react-demo

Move inside the app immediately after a new app is downloaded:

cd react-demo

Install React Router DOM Module

The most common and easy way to set up React Router DOM in react is by installing the router dom library.

npm install react-router-dom@6 --legacy-peer-deps

Create Component in React

In your src/ folder, you now have to create the components/ folder, in this folder create file named Profile.js.

import React from 'react'
function Profile() {
  return (
    <div>
      <h2>React JsuseLocation Hook Example</h2>
    </div>
  )
}
export default Profile

Render Current URL with useLocation

Import the useLocation hook from the react-router-dom library, create the location instance, then access the pathname property to check the current path in React.

Open the Profile.js file and add the given code to the file.

import React from 'react'
import { useLocation } from 'react-router-dom'
function Profile() {
  const location = useLocation()
  return (
    <div>
      <p>Pathname: {location.pathname}</p>
      <p>
        Search Parameter: {new URLSearchParams(location.search).get('name')}
      </p>
    </div>
  )
}
export default Profile

Update Global App File

Open the App.js file; here, you have to register the Profile.js component.

By doing this, the profile component will be available throughout the react app.

Additionally, we will set up the routes using the BrowserRouter service; in order to fetch the current path, we need to use the NavLink service.

import React from 'react'
import './App.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import Profile from './components/Profile'
import { BrowserRouter, NavLink } from 'react-router-dom'
export default function App() {
  return (
    <BrowserRouter>
      <div className="container mt-4">
        <h2>Use useLocation Hook in React</h2>
        <NavLink className="btn btn-primary" to="/profile/user?name=john">
          Fetch Current Route
        </NavLink>
        <Profile />
      </div>
    </BrowserRouter>
  )
}

Run Development Server

To test the app, requires us to run the development server, without wasting much time invoke the given command:

npm start

Here is the URL on which you can see the app on the browser:

http://localhost:3000

Conclusion

In this guide, we have comprehended how to profoundly and eloquently take the help of React Router DOM’s useLocaiton hook.

The useLocation hook is handy when it comes to tracking the current page URL or path.

It allows us to invoke an action based on the current URL.