Navigation par programme dans React-Router v4

Question

Je ne pouvais pas attendre et j'ai commencé à utiliser la dernière version alpha de react-router v4. Le tout nouveau <BrowserRouter/> est parfait pour garder votre interface utilisateur synchronisée avec l'historique du navigateur, mais comment l'utiliser pour naviguer par programme?

Answer 1

Le routeur ajoutera un objet history à votre composant dans le hachage props . Donc, dans votre composant, faites simplement:

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

Voici un exemple complet:

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

En 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 2

Dans le passé, vous pourriez avoir utilisé browserHistory de pousser un nouveau chemin d'accès. Cela ne fonctionnera pas avec react-router v4. Au lieu de cela vous devez faire usage de Réagir de l' context et routers' transitionTo méthode.

Voici un exemple simple:

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 est seulement un de disponible router méthodes. router objet contient également de l' blockTransitions(getPromptMessage), createHref(to) et replaceWith(loc) qui sont la peine de vérifier.

Voici officielles react-router tutoriel qui parle de méthode ci-dessus. Si vous voulez en savoir plus sur l'utilisation de reacts' context découvrez les docs.

Answer 3

Je n'ai pas assez de réputation pour le commentaire, mais en réponse à @singularité de la question, vous devez inclure les propriétés de contexte que vous souhaitez rendre disponible sur la classe du composant' contextTypes propriété statique.

De la de Réagir docs sur context:

Si contextTypes n'est pas défini, alors le contexte qui va être un objet vide.

Dans ce cas:

class NavigateNext extends React.Component {

  // ...

  static contextTypes = {
    router: PropTypes.object
  }

  // ...

}

Contrairement aux propTypes, contextTypes effectivement causer Réagir à se comporter différemment et n'est pas seulement pour le typage.

Answer 4

L'utilisation de withRouter ajoutera des propriétés de routeur à votre composant, vous pourrez alors accéder au history et utiliser push comme vous l'avez fait avec la 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);
 

Answer 5

react-router v4 beta est sorti et l'API a un peu changé. Au lieu de this.context.router.transitionTo(e.target.href) Do, this.context.router.push(e.target.href) si vous utilisez la dernière version.

Lien vers le nouveau document: https://reacttraining.com/react-router/#context.router