Discover the useLocation hook in React

React js is a popular framework which allows us to develop component based web pages which are robust, fast and easier to maintain. Today, we will talk about the react-router-dom npm package which is a fully functional client and server-side routing package in React, it makes the navigation within different pages of our app easier and simple.
In this article, we will take a look at the useLocation hook included in the React Router library.

Create a React App:

Let's begin by creating a new app using the following command:

npx create-react-app myapp

Installing the React Router library:

Now, we would need to install the react-router-dom library by entering the following command in the terminal window of our app:

npm install react-router-dom

or if you are using yarn

yarn add react-router-dom

useLocation Hook:

In order to use any hooks from react-router-dom we would have to import them as follows:

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

We can get the output of uselocation hook in the following manner:

const location = useLocation();
console.log(location);

useLocation hook returns the location object from the current url which includes the following

• pathname: this the path of the url
• search: the query string (?) included in the url
• hash: result of the hash fragment (#) from the url

For example if I have a url http://localhost:3000/products/school/?name=bags then the result from useLocation object will be the following:

{pathname: '/products/school/', search: '?bags', hash: '', state: undefined}
hash: ""
pathname: "/products/school/"
search: "?bags"
state: undefined

Please note that the useLocation object will update each time when the url changes hence it is very useful in the cases when you want to trigger a function based on the change of your url. You can also extract the query parameters from the url through the useLocation object and make some decision based on the query parameter.
For example in the above url http://localhost:3000/products/school/?bags location.search will be equal to ?name=bags so we can display the products belonging to the "bags" category depending on the result obtained through the uselocation hook.

Example

Below is a small code snippet showing how we can extract the pathname and search parameter from uselocation hook:

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

function Products() {

  const location = useLocation();
  console.log(location);

  return (
    <div>
      <h1>Products page</h1>
      <p>{location.pathname}</p>
      <p>{new URLSearchParams(location.search).get('name')}</p>
    </div>
  );
}

Running the above code snippet for http://localhost:3000/products/school?name=bags will return the following results:

• pathname: /products/school
• Query: bags

Thus we found out the useLocation is one of the very useful hooks in react-router-dom library and you can use it easily in your applications.

I hope you enjoyed reading this article.

If you are looking for a learning experience that makes you a professional developer with hands-on coding skills, join one of the best courses here

Happy coding....