In react-router V4 how can I programmatically set the query string params?

Question

Same question as here, but for react-router version 4.

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

This will probably be closed because I don't have any code to show, but at github they say "ask on Stack Overflow", and it's not in the documentation as far as I can see.

Answer 1

You can use the withRouter higher order component to access the history directly.

e.g.

import React, { Component } from 'react
import { withRouter } from 'react-router'

class MyComp extends Component {
  doStuff = () => {
    this.props.history.push({
      pathname: '/pathname',
      search: '?stuff=done'
    })
  }

  render () {
    <button onClick={this.doStuff}>Do stuff</button>
  }
}

export default withRouter(MyComp)