reactjs - Navigating Programmatically in React-Router v4

I couldn't wait and I jumped into using the latest alpha version of react-router v4. The all-new is great in keeping your UI in sync with the browser history, but how do I use it to navigate programmatically?

Answer

The router will add a history object to your component in the props hash. So in your component, simply do:

this.props.history.push('/mypath')

Here is a full example:

In App.js:

import React from 'react'

import {BrowserRouter as Router, Route} from 'react-router-dom'

import Login from './Login'

export default class App extends React.Component {
  render() {
    return (
      
        

          

        
      
    )
  }
}

In Login.js:

import React, {PropTypes} from 'react'


export default class Login extends React.Component {
  constructor(props) {
    super(props)
    this.handleLogin = this.handleLogin.bind(this)
  }

  handleLogin(event) {
    event.preventDefault()
    // do some login logic here, and if successful:

    this.props.history.push(`/mypath`)
  }

  render() {
    return (
      

        

          
        
      

    )
  }
}