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

Question

I can\'t seem to find how to update query params with react-router without using . hashHistory.push(url) doesn\'t seem to register que

Answer 1

From DimitriDushkin on GitHub:

import { browserHistory } from 'react-router';

/**
 * @param {Object} query
 */
export const addQuery = (query) => {
  const location = Object.assign({}, browserHistory.getCurrentLocation());

  Object.assign(location.query, query);
  // or simple replace location.query if you want to completely change params

  browserHistory.push(location);
};

/**
 * @param {...String} queryNames
 */
export const removeQuery = (...queryNames) => {
  const location = Object.assign({}, browserHistory.getCurrentLocation());
  queryNames.forEach(q => delete location.query[q]);
  browserHistory.push(location);
};

or

import { withRouter } from 'react-router';
import { addQuery, removeQuery } from '../../utils/utils-router';

function SomeComponent({ location }) {
  return 

     addQuery({ paintRed: 1 })}>Paint red
     removeQuery('paintRed')}>Paint white
  
;
}

export default withRouter(SomeComponent);