How to Get URL Parameter Values From Query String in React

1. React Router V3
2. React Router V4 and React Router V5

Throughout the process of creating a React app, you might occasionally need to extract a parameter value from the query string. This will allow you to reference the parameter value throughout your app.

With the release of React Router v4 in 2017, the parsed this.props.location.query property was removed. Developers had to find a new approach to read the parameter value from query strings. In this article, we’ll take a look at the solutions for old and newer versions of React.

React Router V3

Extracting the parameter value from the query string in React Router v3 is easy. This version of React does all the work for you and provides the parsed location as a prop. If you check the value of the following object:

this.props.location.query

You’ll find that it contains the key-value pairs of all parameters in your query. (Query is the part of your URL that comes after ? sign)

If the query object doesn’t include the parameters that you’re looking for, then you should also check out path parameter values, which are accessible at:

this.props.match.params.redirectParam

As long as you’re running an app with React Router v3 installed, your components accept props, you can get parameter values from query strings and path.

Starting from v4, this.props.location.query object was removed. The main reason for its removal was to allow developers to create unique ways to store query strings.

React Router V4 and React Router V5

queries in React Router v4 are still accessible, but developers must convert it into a string on their own. Libraries like qs and query-string were created to solve this exact problem.

In newer React Router versions, you can parse your query object using the updated interface and the query-string library.

const queryToStr = require('query-string');
const result = queryToStr.parse(this.props.location.search);

for Class Components

The above example applies to class components in React.

Using the libraries to parse this.props.location.search can return a parsed query object, with key-value pairs of parameters and their values.

for Functional Components

For the past few years, React community has started to give up class components in favor of functional components. The main reason behind the switch was the functional components’ new ability to use React hooks.

When extracting parameter values from a query string, instead of using the value of this.props.location.search, use the instance of useLocation() hook.

The hook does not return parsed query object. You still need to parse the instance of the hook to get key-value pairs of parameters and their values.

If you run the application with v4 (or higher) version of React-Router, the following code should give you the desired result:

const queryToStr = require('query-string');
const result = queryToStr.parse(useLocation().search);

Thanks to the useLocation() hook, this code looks much cleaner.