How do you programmatically update query params in react-router?

reactjs react-router
claireablani picture claireablani · Oct 20, 2016 · Viewed 163.5k times · Source

I can't seem to find how to update query params with react-router without using <Link/>. hashHistory.push(url) doesn't seem to register query params, and it doesn't seem like you can pass a query object or anything as a second argument.

How do you change the url from /shop/Clothes/dresses to /shop/Clothes/dresses?color=blue in react-router without using <Link>?

And is an onChange function really the only way to listen for query changes? Why aren't query changes automatically detected and reacted-to the way that param changes are?

Answer

John F. picture John F. · Oct 20, 2016

Within the push method of hashHistory, you can specify your query parameters. For instance, 

history.push({
  pathname: '/dresses',
  search: '?color=blue'
})

or

history.push('/dresses?color=blue')

You can check out this repository for additional examples on using history

Related questions

Programmatically navigate using react router

With react-router I can use the Link element to create links which are natively handled by react router. I see internally it calls this.context.transitionTo(...). I want to do a navigation. Not from a link, but from a dropdown …

Read More
React - How to get parameter value from query string?

How can I define a route in my routes.jsx file to capture the __firebase_request_key parameter value from a URL generated by Twitter's single sign on process after the redirect from their servers? http://localhost:8000/#/signin?_k=v9…

Read More
How to push to History in React Router v4?

In the current version of React Router (v3) I can accept a server response and use browserHistory.push to go to the appropriate response page. However, this isn't available in v4, and I'm not sure what the appropriate way to …

Read More