JIYIK CN >

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

With the release of React Router v4 in 2017, the parsed this.props.location.queryattribute was removed. Developers had to find a new way to read parameter values ​​from the query string. In this article, we’ll look at the solution for both old and new versions of React.

Extracting parameter values ​​from strings in React Router v3 queryis easy. This version of React does all the work for you and provides the parsed location as a prop. If you inspect the value of the following object:

this.props.location.query

You will find that it contains 键-值pairs for all the parameters in the query. (The query is ?the part of the URL after the ampersand)

If querythe object does not contain the parameter you are looking for, then you should also look at paththe 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 will accept and you can get parameter values props​​from querystrings and .path

Starting with v4, this.props.location.querythe object was removed. The main reason for removing it was to allow developers to create unique ways to store querystrings.

React Router v4 queriesstill has access to String , but developers have to convert it to a string themselves. Libraries like String qsand query-stringString were created to solve this exact problem.

In newer React Router versions, you can use the updated interface and query-stringlibrary to resolve your queryobjects.

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

The above example works well with class components in React.

Using the library to parse this.props.location.searcha can return a parsed queryobject with 键-值pairs of arguments and their values.

Over the past few years, the React community has started to move away from class components in favor of functional components. The main reason behind the switch is the new ability of functional components to use React hooks.

queryWhen extracting parameter values ​​from a string, do not use this.props.location.searchthe value of , but instead use useLocation()an instance of the hook.

The hook does not return a resolved queryobject. You still need to parse the hook instance to get access 键-值to the arguments and their values.

If you're running your application with v4 (or higher) of React-Router, the following code should give you the desired results:

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

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