How to Use useLocation Hook in React Router DOM V6

You are already familiar with the basics of React. Also, having a good understanding of React Router DOM. This post will be totally dependent on these.

If you don’t have a React app setup, then you can create it. Else, you can move ahead with the existing React App.

Create React App

You can create a new app in React Js using the below command.

npx create-react-app react-router-app

After creating the app, open it in your favorite editor and run it.

npm start

The application will be started in the browser as shown below.

In the next step, you will require to install the React Router DOM library in your app.

Install React Router DOM

We are going to use the useLocation hook in this post. So, this hook is provided by the React Router DOM library. So, install it using the below command.

npm i react-router-dom

Once, this library is installed, we need a few components to implement the useLocation hook.

Create Components in React

We will create a few components in our app. So, initially, inside the src folder, create a folder named components. Now, inside the components folder, create the below components.

• Home.jsx
• About.jsx

After creating the components(Home.jsx), let’s add the snippets.

import React from "react";
import { useNavigate } from "react-router-dom";

export const Home = () => {
  const navigate = useNavigate();

//   redirecting to about component
  const redirectToAbout = () => {
    navigate("/about", {
        state: {
            name: 'Home',
            message: 'Message from home component',
        },
    });
  };

  return (
    <div className="container text-center py-5">
      <h3> Home component </h3>
      <button
        type="button"
        className="btn btn-primary"
        onClick={redirectToAbout}
      >
        Redirect to About
      </button>
    </div>
  );
};

In this component, I have used useNavigate hook to redirect to the About component with some props.

Now, in the About component, we will capture these props using the useLocation hook.

So, let’s understand in the below snippet.(About.jsx)

import React from "react";
import { useLocation, useNavigate } from "react-router-dom";

export const About = () => {
  const navigate = useNavigate();
  const location = useLocation();

  console.log('location', location)

  const redirectToHome = () => {
    navigate("/");
  };

  return (
    <div className="container text-center py-5">
      <h3> About Us Component </h3>
      <h5> {location.state.name} </h5>
      <p> {location.state.message} </p> 
      <button
        type="button"
        className="btn btn-primary"
        onClick={redirectToHome}
      >
        Redirect to Home
      </button>
    </div>
  );
};

Here, in the About component, I have imported the React useLocation hook. Then created an object of this hook.

Let’s check the result first. I have logged the location object in the console.

if you will notice the console, we have the location object. It returns the following –

• hash – It is a result of the hash fragment (#) which will come through the URL.
• pathname – This will return the current URL (pathname).
• search – You can get the query string if any in the URL.
• state – The state object is used to handle props with navigate object.

Handle Query String in React Using useLocation Hook

Let’s try to pass a query string from the Home component to About. So, in the navigate function, we can pass the query parameter.

const redirectToAbout = () => {
    navigate("/about?name=react", {
        state: {
            name: 'Teach',
            message: 'Message from home component',
        },
    });
  };

So, that’s it for this post, I hope this basic concept will help you to use the useLocation Hook in React app.