React router, pass data when navigating programmatically?

Question

We could navigate to different path using

this.props.router.push(\'/some/path\')

Is there a way to send params (object) along when navigating?

Answer 1

React Router uses location objects. One of the properties of a location object is state.

this.props.router.push({
  pathname: '/other-page',
  state: {
    id: 7,
    color: 'green'
  }
})

On the page that is navigated to, the current location will be injected into the component whose route matched, so you can access the state using this.props.location.state.

One thing to keep in mind is that there will be no state if a user navigates directly to the page, so you will still need some mechanism to load the data when it does not exist.