Comment pousser vers l'historique dans React Router v4 ?

React Router v4 est fondamentalement différent de la v3 (et des précédentes) et vous ne pouvez pas faire browserHistory.push() comme vous le faisiez auparavant.

Cette discussion semble être en rapport si vous voulez plus d'informations :

• Créer une nouvelle browserHistory ne fonctionnera pas parce que crée sa propre instance d'historique, et écoute les changements sur celle-ci. Donc une instance différente changera l'url mais ne mettra pas à jour le.
• browserHistory n'est pas exposé par react-router dans la v4, seulement dans la v2.

Au lieu de cela, vous avez quelques options pour le faire :

• Utiliser le composant de haut niveau withRouter.

Au lieu de cela, vous devriez utiliser le composant d'ordre supérieur withRouter, et l'envelopper dans le composant qui va pousser vers l'historique. Par exemple :

    import React de "react" ;
    import { withRouter } de "react-router-dom" ;

    class MyComponent extends React.Component {
      ...
      myFunction() {
        this.props.history.push("/some/Path&quot ;);
      }
      ...
    }
    export default withRouter(MyComponent) ;

Consultez la [documentation officielle] (https://reacttraining.com/react-router/web/api/withRouter) pour plus d'informations :

Vous pouvez accéder aux propriétés de l'objet history et à la ``'s match la plus proche via le composant d'ordre supérieur withRouter. withRouter effectuera un nouveau rendu de son composant à chaque fois que l'itinéraire changera avec les mêmes props que ceux du rendu de `` : { match, location, history }.

• Utiliser l'API context.

L'utilisation du contexte pourrait être l'une des solutions les plus simples, mais étant une API expérimentale, elle est instable et non supportée. Ne l'utilisez que lorsque tout le reste échoue. Voici un exemple :

    import React from "react" ;
    import PropTypes from "prop-types" ;

    class MyComponent extends React.Component {
      static contextTypes = {
        routeur : PropTypes.objet
      }
      constructor(props, context) {
         super(props, contexte) ;
      }
      ...
      myFunction() {
        this.context.router.history.push("/some/Path&quot ;);
      }
      ...
    }

Jetez un coup d'œil à la [documentation officielle] (https://reactjs.org/docs/context.html) sur le contexte :

Si vous voulez que votre application soit stable, n'utilisez pas context. Il s'agit d'une API expérimentale et il est probable qu'elle ne fonctionne plus dans les futures versions de React.

Si vous persistez à utiliser le contexte malgré ces avertissements, essayez d&#8217isoler votre utilisation du contexte dans une petite zone et évitez d&#8217utiliser directement l&#8217API du contexte lorsque c&#8217est possible, afin de faciliter la mise à niveau lorsque l&#8217API change.

C'est comme ça que j'ai fait :

import React, {Component} from 'react';

export default class Link extends Component {
    constructor(props) {
        super(props);
        this.onLogout = this.onLogout.bind(this);
    }
    onLogout() {
        this.props.history.push('/');
    }
    render() {
        return (
            <div>
                <h1>Your Links</h1>
                Logout
            </div>
        );
    }
}

Utilisez this.props.history.push('/cart&#39 ;); pour rediriger vers la page du panier qui sera enregistrée dans l'objet historique.

Amusez-vous bien, Michael.

this.context.history.push ne fonctionnera pas.

J'ai réussi à faire fonctionner push comme ceci :

static contextTypes = {
    router: PropTypes.object
}

handleSubmit(e) {
    e.preventDefault();

    if (this.props.auth.success) {
        this.context.router.history.push("/some/Path")
    }

}