Programmatically navigate using react router

This is a snippet code for all developers looking how to navigate between “Views” using React Router programmatically,

For React v.4 you have to wrap the component with the High Order Component withRouter:

Example 1

import { withRouter } from 'react-router-dom'
// this also works with react-router-native

const MyButton = withRouter(({ history }) => (
  <button
    type='button'
    onClick={() => { history.push('/new-location') }}
  >
    Click Me!
  </button>
))

Example 2

import { withRouter } from 'react-router-dom'

class MyClass extends React.Component {
  yourFunction = () => {
    doSomeAsyncAction(() =>
      this.props.history.push('/other_location')
    )
  }

  render() {
    return (
      <div>
        <Form onSubmit={ this.yourFunction } />
      </div>
    )
  }
}

export default withRouter(MyClass);

This is an easy snippet but a very useful when you’re starting with react

Have a blessed day :)