Querystring in react-router

I am trying to set a Route path with a query string. Something in the lines of:

www.mywebsite.com/results?query1=:query1&query2=:query2&query3=:query3

I would than transition to the "Results" component like so:

<Route path="/" component={Main}>
  <IndexRoute component={Home} />
  <Route path="results?query1=:query1&query2=:query2&query3=:query3"
    component={SearchResults} />
</Route>

In the SearchResults container I would like to be able to have access do query1, query2 and query3 params.

I have not been able to make it work. I get the following error:

bundle.js:22627 Warning: [react-router] Location "/results?query1=1&query2=2&query3=3" did not match any routes

I tried following the steps in the following guide: (Section: What about query string parameters?) https://www.themarketingtechnologist.co/react-router-an-introduction/

Can I get some help here?

Querystring in react-router

2 Answers