How to use the useLocation hook in React
Overview
ReactJS is a popular framework that allows us to develop component-based webpages, which are robust, fast, and easier to maintain. In this shot, we'll 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. We'll 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:
Next, we 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
Use the below command for yarn:
yarn add react-router-dom
The useLocation hook
In order to use any hooks from react-router-dom, we 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);
The useLocation hook returns the location object from the current URL, which includes the following:
pathname: This is the path of the URL.search: This is the query string(?)included in the URL.hash: This is the result of the hash fragment(#)from the URL.
For example, if I have a URL, http://localhost:3000/products/school/?name=bags, the result from the 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 we want to trigger a function based on the change of our URL. We can also extract the query parameters from the URL through the useLocation object and make some decisions, 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. Therefore, 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.
The code below contains a "Click Me" button, which navigates the user to the URL, 'https:localhost:3000/products/school?name=bags'.
Note: The above URL and search parameter (bags) is extracted in the products component of the app (code mentioned below) using the
useLocationhook.
{
"name": "simple-reactjs-app",
"version": "0.1.0",
"private": true,
"homepage": "https://aditya-sridhar.github.io/simple-reactjs-app",
"dependencies": {
"axios": "^0.18.0",
"react": "^16.4.1",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"devDependencies": {
"gh-pages": "^1.2.0"
}
}
Running the above code snippet by clicking the button "Click Me" (for http://localhost:3000/products/school?name=bags) will return the following results:
pathname: /products/schoolQuery parameter: bags
Thus, we have learned that useLocation is one of the very useful hooks in react-router-dom library when it comes to URL tracking. We can use it easily in our applications for making decisions based on the URL the app has been routed to.
Happy coding!
- undefined by undefined
