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 is great in keeping your U

Answer 1

I don't have enough reputation to comment, but in answer to @singularity's question, you have to include the context properties you wish to make available on the component class' contextTypes static property.

From the React docs on context:

If contextTypes is not defined, then context will be an empty object.

In this case:

class NavigateNext extends React.Component {

  // ...

  static contextTypes = {
    router: PropTypes.object
  }

  // ...

}

Unlike propTypes, contextTypes actually cause React to behave differently and is not only for typechecking.

Answer 2

In the past you might have used browserHistory to push a new path. This won't work with react-router v4. Instead you have make use of React's context and router's transitionTo method.

Here's a simple example:

import React from 'react';

class NavigateNext extends React.Component {
  constructor() {
    super();
    this.navigateProgramatically = this.navigateProgramatically.bind(this);
  }

  navigateProgramatically(e) {
    e.preventDefault();

    this.context.router.transitionTo(e.target.href)
  }

  render() {
    return (
      <Link to={"/next-page"}
            onClick={this.navigateProgramatically}
      >Continue</Link>
    );
  }
}

NavigateNext.contextTypes = {
  router: React.PropTypes.object
};

transitionTo is just one of available router methods. router object also contains blockTransitions(getPromptMessage), createHref(to) and replaceWith(loc) which are worth checking out.

Here's official react-router tutorial that mentions above method. If you wanna learn more about using react's context check out the docs.

Answer 3

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>
    )
  }
}

Answer 4

Using withRouter will add router properties to you component, then you can access the history and use push like you did with v3:

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

class Form extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      input: '',
    };

    this._submit = this._submit.bind(this);
  }

  render() {
    return (
      <form onSubmit={this._submit}>
        <input type="text" onChange={(event) => this.setState({input: event.target.value})}/>

        <button type="submit">Submit</button>
      </form>
    );
  }

  _submit(event) {
    event.preventDefault();

    this.props.history.push(`/theUrlYouWantToGoTo`);
  }
}

export default withRouter(Form);