score:11

Accepted answer

As of react-router v4 (latest version), it does not support query params (? user=nerve&name=no-one). It does support URL params though. There is a GitHub issue discussing the same point. Go ahead and read it, there are some good solutions but nothing baked right into the core library.

A workaround that I usually implement is adding multiple routes that render the same component.

<Route exact path='/' component={ HomePageConnector } />
<Route exact path='/search/:searchTerm' component={ HomePageConnector } />

Edit

The only issue with v4, as I understand, is that it NO LONGER exposes the location.query object. However, you still have access to location.search (which is a STRING, not an object). You can read this string and pass it to a library like query-string to get a more meaningful object out of it. This way, you can continue to use query parameters rather than URL params. This information is already written in the GitHub issue but is a little scattered across comments. Something like (though not tested):

Routes:

<Route exact path='/test' component={HomePageConnector} />

Fetching the params in component:

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

let queryString = this.props.location.search;
let queryParams = parseQueryString.parse(queryString);

Related Query

More Query from same tag