react-router match query string

Question

https://github.com/reactjs/react-router/example

I tried the example on npm start

query string match to route is not working on the example. When I click the second one, It's activating wrong one

http://localhost:8080/query-params/user/bob?showAge=1 and refreshing on the link above not matching any routes.

Even if I have change the example code to below <Route path="user/:userID(?:showAge)" component={User} /> I tried couple of things that might work based on docs but none of them worked.

Am I missing something?

Answer 1

Turned out there was error on the example on react-router github.

I've made a PR for it which removes activeClassName for Link component.

without it, it works fine, and query string is in location props, see below

this.props.location.query = { 
  query1: value1,
  query2: value2
}

this picture

Answer 2

You are missing the root (/) in path="user/:userID(?:showAge)"

This code must works:

 <Router history={history}>
    <Route path="/user/:userID/:showAge)" component={User} />
 </Router>

Check if the params are in the route:

  console.log(JSON.stringify(this.props.routeParams));

My whole file