How to get URL query Params in React?

React is a popular JavaScript library used for building user interfaces. It allows developers to create reusable components that can be easily composed to create complex user interfaces. One of the common use cases in web development is to access the query parameters in the URL. In this blog post, we will discuss how to get URL query parameters in a React application.

 

How to get URL query Params in React?

• What are Query Parameters?
• Accessing Query Parameters using the useLocation Hook
• Accessing Query Parameters using qs library

 

What are Query Parameters?

Before diving into the technical details of how to access query parameters in a React application, let’s first understand what query parameters are. Query parameters are a way to pass additional information to the server with a URL. They are usually used to filter or sort data on the server-side. The query parameters are added to the end of the URL, after a question mark (?), and are separated by an ampersand (&). For example, in the URL http://example.com/users?sort=asc&page=2, sort and page are query parameters.

 

Accessing Query Parameters using the useLocation Hook

React Router is the de-facto standard routing library for React applications. It provides a useLocation hook that allows you to access the current location in your components. The useLocation hook returns an object containing the current location, which includes the pathname, search (query string), and state.

Here’s an example of how to use the useLocation hook to access query parameters in a functional component:

import { useLocation } from 'react-router-dom'

function Users() {
  const location = useLocation()
  const query = new URLSearchParams(location.search)
  const sort = query.get('sort')
  const page = query.get('page')
  // ...
}

In the above example, we first imported the useLocation hook from the react-router-dom library. Then, we called the useLocation hook to get the current location object. We then created a new URLSearchParams object and passed the search property of the location object to it. This allows us to easily access the query parameters by calling the get method on the URLSearchParams object and passing the name of the query parameter.

 

Accessing Query Parameters using qs library

Alternatively, we can use q library for parsing query parameters in a more efficient and clean way. Here’s an example of how to use the qs library to access query parameters:

import qs from 'qs'

function Users() {
  const search = window.location.search.substring(1)
  const params = qs.parse(search)
  const sort = params.sort
  const page = params.page
  // ...
}

 

In this example, we first imported the qs library, which is a library for parsing and stringifying query strings. Then, we called the parse method of qs and passed it the search property of the window.location object. This returns an object containing all the query parameters, which we can then access directly by their name.

 

Conclusion

In conclusion, accessing query parameters in a React application is relatively straightforward. We can use the useLocation hook from the react-router-dom library or qs library to parse the query string and access the query parameters. With this knowledge, you can now easily filter or sort data in your React application