React-router: this.props.location.query ends up being undefined

[hgezim]

This issue comes up once in a while in my unit tests (jest). The following output is from a console.log(this.props) in the component:

Object {
  history: 
   Object {
     listenBefore: [Function: listenBefore],
     listen: [Function: listen],
     transitionTo: [Function: transitionTo],
     pushState: [Function: pushState],
     replaceState: [Function: replaceState],
     go: [Function: go],
     goBack: [Function: goBack],
     goForward: [Function: goForward],
     createKey: [Function: createKey],
     createPath: [Function: createPath],
     createHref: [Function: createHref],
     createLocation: [Function: createLocation],
     setState: [Function],
     registerTransitionHook: [Function],
     unregisterTransitionHook: [Function],
     isActive: [Function: isActive],
     match: [Function: match],
     listenBeforeLeavingRoute: [Function: listenBeforeLeavingRoute] },
  location: 
   Object {
     pathname: '/logs',
     search: '',
     hash: '',
     state: null,
     action: 'POP',
     key: 'kazhd3',
     query: undefined },
  params: Object {},
  route: 
   Object {
     path: '/logs',
     component: { [Function] contextTypes: [Object], displayName: 'Logs' } },
  routeParams: Object {},
  routes: [ Object { path: '/logs', component: [Object] } ],
  children: null }

I'm not sure what causing it. Here's how the components and routes are setup:

// test
const createHistory = require('history/lib/createMemoryHistory');

history = createHistory(path);
routes = <Router history={history}><Route path="/logs" component={Logs} /></Router>;
var handler = ReactDOM.render(routes, node);

// Logs.jsx:
...
renderToolbar() {
  var generateClassName = (destObj) =>
  {
    console.log(this.props);
    var query = this.props.location.query
  }
  ...

  return <Button to="/logs" className={generateClassName({kind: 'all'})}>All</Button>;
}

render() {
  return <Grid toolbar={this.renderToolbar} />;
}

// Grid.jsx:
...
renderToolbar() {
  return this.props.toolbar ? this.props.toolbar() : '';
},

render() {
  return <div> { this.renderToolbar(); } </div>;
}

[timdorr]

Thanks for your question!

We want to make sure that the GitHub issue tracker remains the best place to track bug reports and feature requests that affect the development of React Router.

Questions like yours deserve a purpose-built Q&A forum. Would you like to post this question to Stack Overflow with the tag #react-router? https://stackoverflow.com/questions/ask?tags=react-router.

We also have an active and helpful React Router community on Reactiflux, which is a great place to get fast help with React Router and with the rest of the React ecosystem. You can join at https://discord.gg/0ZcbPKXt5bYaNQ46.

[hgezim]

Here's the question in StackOverflow:
http://stackoverflow.com/questions/34296228/this-props-location-query-ends-up-being-undefined-in-my-component

[MikeTaylor]

Many thanks for the onward link!