URL with a query string that does not match the response-router route

Question

Given this React router configuration:

<Router history={browserHistory}>
    <Route path="/farm/:type?period=:period" component={Farm} />
    <Route path="/pen/:penId" component={Pen} />
    <Route path="/pen/:penId/cow/:cowId" component={Cow} />
    <Route path="*" component={Farm} />
</Router>

Why http://localhost:8080/farm/average?period=daydoes it only match the catch-all route, and not the first?

Answer 1

Query string parameters do not have to be included in the definition <Route>.

Changing the route definition to <Route path="/farm/:type" component={Farm} /> resolved the problem.

Query string options are still available in props.location.query