React Router v4
https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router
With v4 of React Router, there are three approaches that you can take to programmatic routing within components.
Use the withRouter higher-order component.
Use composition and render a
A history instance has two methods for navigating: push and replace. If you think of the history as an array of visited locations, push will add a new location to the array and replace will replace the current location in the array with the new one. Typically you will want to use the push method when you are navigating.
In earlier versions of React Router, you had to create your own history instance, but in v4 the
import { withRouter } from 'react-router-dom' // this also works with react-router-native
const Button = withRouter(({ history }) => ( ))
import { Route } from 'react-router-dom'
const Button = () => (
The last option is one that you should only use if you feel comfortable working with React's context model. Although context is an option, it should be stressed that context is an unstable API and React has a section Why Not To Use Context in their documentation. So use at your own risk!
const Button = (props, context) => ( )
// you need to specify the context type so that it // is available within the component Button.contextTypes = { history: React.PropTypes.shape({ push: React.PropTypes.func.isRequired }) } 1 and 2 are the simplest choices to implement, so for most use cases they are your best bets.