Navigating Programmatically in React-Router v4

Question

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

Answer 1

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 (       <Router>         <div>           <Route exact path='/login' component={Login} />         </div>       </Router>     )   } } 

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 (       <div>         <form onSubmit={this.handleLogin}>           <input type='submit' value='Login' />         </form>       </div>     )   } }