Get url Query parameters with react-router


#1

I am using react and react-router on meteor. I have a route like /post/:id. There is an example on meteorchef but it is with stateless component. I want to get id and make mongo query. Can i do in stateless function? If i can’t how can get url parametes with normal React component class?


#2

React Router will pass params into components in a params property. So you could access them in your React.Component class using this.props.params.yourParam.


#3

I couldn’t make it work. Can you provide an example?


#4

Take a look at the Route Configuration section of the React Router docs. They show an example using React.createClass and this.props.params.id. Even though they’re using React.createClass instead of React.Component in the example, the params approach is still the same.


#5

For those like me who ended up here looking on how to read the URL query parameters with React Router: the new version (v4, as of 2017), there is no official support to obtain query parameters.

This issue explains it and gives the official solution, which is:

// When the URL is /the-path?some-key=a-value ...
const query = new URLSearchParams(location.search)
const value = query.get('some-key')

The issue: