How to parse query string in react-router v4

reactjs react-router react-router-dom
Peter Bengtsson picture Peter Bengtsson · Mar 17, 2017 · Viewed 72.9k times · Source

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

In [email protected] 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): enter image description here (Note how from ?artist=band here I'd like to get the value from artist which is the value band)

Answer

Tyler McGinnis picture Tyler McGinnis · Mar 17, 2017

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

Related questions

Detect Route Change with react-router

I have to implement some business logic depending on browsing history. What I want to do is something like this: reactRouter.onUrlChange(url => { this.history.push(url); }); Is there any way to receive a callback from react-router when the …

Read More
React : difference between <Route exact path="/" /> and <Route path="/" />

Can someone explain the difference between <Route exact path="/" component={Home} /> and <Route path="/" component={Home} /> I don't know the meaning of 'exact'

Read More
Invariant failed: You should not use <Route> outside a <Router>

I use react-router-dom for routing in my React application. Part of my app extracted in another package. List of dependencies looks like this: ./app/dashboard/package.json { "dependencies": { "@app/components": "^1.0.0", "react": "^16.8.5", "react-dom": "^16.8.5", "react-router-dom": "^5.0.0" } } ./app/components/package.json { "peerDependencies": { "react-router-dom": "^5.0.0" } } When …

Read More