Get Current URL path query params in React Js using useLocation

In this quick tutorial, you will learn how to read URL query params in React application by deploying the useLocation hook that is provided by the React Router DOM library service.

React Router DOM library allows us to easily implement routing which enables the navigation from one page to another. We can also create dynamic URLs with number query params that are used to pass information like IDs, categories etc to show more details on a page.

In this guide, we will discuss how to fetch various query param values from a URL and print their value in the component template. We will use the useLocation hook which provides information after the navigation has ended and URL is generated completely.

How to get URL query param in React app?

Step 1 – Create React App

Step 2 – Install React Router DOM Library

Step 3 – Create Component with useLocation

Step 4 – Render URL Query Param in App

Step 5 – See In Action

 

Step 1 – Create React App

To create a new React app, your system must have create react app installed:

npm install create-react-app --global

 

Now, you are react to create a new React app. Execute following npx command create a new app with name provided:

npx create-react-app my-react-app

 

Change current directory to the app folder:

cd my-react-app

 

Step 2 – Install React Router DOM Library

Now install the react router dom libarary which works at the core on adding the location and navigation capabilites in react application:

npm install react-router-dom

 

Step 3 – Create Component with useLocation

Head towards the src folder and create components folder with file named Details.tsx with following content in it:

import * as React from 'react';
import { useLocation } from 'react-router-dom';
function Details() {
  const location = useLocation();
  const locSearch = new URLSearchParams(location.search);
  return (
    <div>
      <p>URL Path: {location.pathname}</p>
      <p>Value of 'name': {locSearch.get('name')}</p>
      <p>Value of 'type': {locSearch.get('type')}</p>
      <p>Value of 'category': {locSearch.get('category')}</p>
    </div>
  );
}
export default Details;

We used the useLocation() hook, that returns the current location object. This can be useful if you’d like to perform some side effect whenever the current location changes.

This component will print values of query param in URL path.

Step 4 – Render URL Query Param in App

Now, open the App and impor the Details component. We also added the change path link to update the path with query params.

Open the App.tsx file and update as shown below:

import * as React from 'react';
import './style.css';
// import 'bootstrap/dist/css/bootstrap.min.css';
import Details from './components/Details';
import { BrowserRouter, NavLink } from 'react-router-dom';
export default function App() {
  return (
    <BrowserRouter>
      <div>
        <NavLink
          className="btn btn-primary"
          to="/details/product?name=hardware&type=metal&category=antirust"
        >
          Set Route Path
        </NavLink>
        <Details />
      </div>
    </BrowserRouter>
  );
}

Click on the NavLink to update the path and print query param values inside the Details component template.

Step 5 – See In Action

Finally you can run the React applciation by hitting following command:

npm start

It start the development webserver at following path:

http://localhost:3000/

Conclusion

We discussed how to use react Router DOM library and fetch query param values using the useLocation hook. The React Router DOM library is very imporant module to add navigation capabilites in react application.