How to parse query string in react-router v4

Question

In react-router v3 I could access it with props.location.query.foo (if the current location was ?foo=bar)

In react-router-dom@4.0.0 props.location only has props.location.search with is a string like ?foo=bar&other=thing.

Perhaps I need to manually parse and deconstruct that string to find the value for foo or other.

Screenshot of console.log(this.props): (Note how from ?artist=band here I'd like to get the value from artist which is the value band)

To tie me over I'll import https://www.npmjs.com/package/query-string and do it manually. — Peter Bengtsson, Mar 17 '17 at 16:08
you got already the query string here ! nothing with React. It's more about pure Javascript. — Thomas Decaux, Jan 16 '19 at 14:46

score 120 · Accepted Answer · answered Mar 17 '17 at 17:58

120

Looks like you already assumed correct. The ability to parse query strings was taken out of V4 because there have been requests over the years to support different implementation. With that, the team decided it would be best for users to decide what that implementation looks like. We recommend importing a query string lib. The one you mentioned has worked great for me so far.

const queryString = require('query-string');

const parsed = queryString.parse(props.location.search);

You can also use new URLSearchParams if you want something native and it works for your needs

const search = props.location.search; // could be '?foo=bar'
const params = new URLSearchParams(search);
const foo = params.get('foo'); // bar

You can read more about the decision here

answered Mar 17 '17 at 17:58

Tyler McGinnis

30,798
16
69
74

3

where did you add this so it's available on every route's render? – claya Apr 13 '17 at 18:55
10

URLSearchParams is not available on iOS and SSR. query-string is more stable solution. – emil Nov 06 '17 at 14:07
2

If you need to support IE11, this package currently have issues with it. – Sep Sep 19 '18 at 21:13

score 20 · Answer 2 · answered Jun 13 '18 at 12:03

20

You may get the following error while creating an optimized production build when using query-string module.

Failed to minify the code from this file: ./node_modules/query-string/index.js:8

To overcome this, kindly use the alternative module called stringquery which does the same process well without any issues while running the build.

import querySearch from "stringquery";

var query = querySearch(this.props.location.search);

Thank you.

answered Jun 13 '18 at 12:03

Balasubramani M

5,478
1
37
43

2

To get around this, you can also use an older version of `query-string`. You can install it by either doing `yarn add query-string@5` or `npm install query-string@5` – MoonDawg Aug 30 '18 at 02:32

score 20 · Answer 3 · answered Jul 16 '18 at 09:54

I proffer my little ES6 shape function, awesome, light weight and useful:

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

Every thing is here, hope to help you.

DORRITO · Answer 4 · 2017-05-02T12:59:25.777

Glad I found this post. Thanks for the links, after a couple of hours I finally got my code upgraded.

For those of you using query-string, you might have to do something like

var nameYouWant = queryString.parse(this.props.location.search).nameYouWant;

This happened in my case, and this.props.location.search.theUrlYouWant would refuse to work. The second option Tyler mentioned also worked for me with some similar tweaking.

score 4 · Answer 5 · answered Apr 30 '20 at 08:27

Using third party package is overkill to simple solutions

componentDidMount() {
        const query = new URLSearchParams(
            this.props.location.search
        );

        let data= {};

        for (let params of query.entries()) {
            data[params[0]] = +params[1];
        }
        this.setState({ urldata: data});
    }

this will simply convert URL data into object.

score 3 · Answer 6 · answered Jul 16 '20 at 18:08

3

I'm surprised no one has mentioned UrlSearchParam and the .get method.

answered Jul 16 '20 at 18:08

Thomas

4,827
5
28
60

score 2 · Answer 7 · answered Jun 15 '20 at 08:27

instead of installing a package you can use a simple function for extracting your query params.

//Param Extractor
const parseParams = (params = "") => {
  const rawParams = params.replace("?", "").split("&");
  const extractedParams = {};
  rawParams.forEach((item) => {
    item = item.split("=");
    extractedParams[item[0]] = item[1];
  });
  return extractedParams;
};

//Usage
const params = parseParams(this.props?.location?.search); // returns an object like:
// {id:1,name:john...}

How to parse query string in react-router v4

7 Answers7

Linked