How to get the parameter after question mark in react router?

Question

In react in my routes, I have mapped the components like

<Route path="/search/:id" component={Search}/>

So, i am expecting a URL like search/jeans, or search/shirts . But on some occasions i am getting a URL pattern like

/search/?text=shirts

Which i am not able to handle. Please suggest how can i proceed with this. I want to get the value of "shirts" from that URL. How to get make the existing route to handle this this different URL ?

Answer 1

The ability to parse query strings was taken out of V4 unfortunately. You can choose which method to use. 3rd party package:

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

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

Or use a built in:

const params = new URLSearchParams(props.location.search);

const foo = params.get('foo'); // bar

and for URLSearchParams, there is also a polyfill for compatibility.