Hoe push je naar de geschiedenis in React Router v4?

React Router v4 is fundamenteel anders dan v3 (en eerder) en je kunt niet browserHistory.push() doen zoals je gewend was.

Deze discussie lijkt gerelateerd als je meer info wilt:

• Het aanmaken van een nieuwe browserHistory zal'`niet werken omdat zijn eigen history instantie aanmaakt, en daarop luistert naar veranderingen. Dus een andere instantie zal de url veranderen, maar niet de bijwerken.
• browserHistory wordt niet blootgesteld door react-router in v4, alleen in v2.

In plaats daarvan heb je een paar opties om dit te doen:

• Gebruik de withRouter hoge-orde component

In plaats daarvan moet je de withRouter hoge orde component gebruiken, en die wikkelen naar de component die naar de geschiedenis zal pushen. Bijvoorbeeld:

    importeer React uit "react";
    importeer { withRouter } uit "react-router-dom";

    klasse MijnComponent breidt React.Component uit {
      ...
      mijnFunctie() {
        this.props.history.push("/some/Path");
      }
      ...
    }
    export default withRouter(MijnComponent);

Bekijk de officiële documentatie voor meer info:

Je kunt toegang krijgen tot de eigenschappen van het history object en de dichtstbijzijnde ``'s match via de withRouter hogere-orde component. withRouter zal zijn component elke keer dat de route verandert opnieuw renderen met dezelfde props als `` render props: { match, location, history }.

• Gebruik de context API

De context gebruiken is misschien een van de gemakkelijkste oplossingen, maar omdat het een experimentele API is, is hij onstabiel en wordt hij niet ondersteund. Gebruik het alleen als al het andere faalt. Hier's een voorbeeld:

    importeer React uit "react";
    importeer PropTypes uit "prop-types";

    klasse MijnComponent breidt React.Component uit {
      static contextTypes = {
        router: PropTypes.object
      }
      constructor(props, context) {
         super(props, context);
      }
      ...
      mijnFunctie() {
        this.context.router.history.push("/some/Path");
      }
      ...
    }

Kijk eens naar de officiële documentatie over context:

Als je wilt dat je applicatie stabiel is, gebruik dan geen context. Het is een experimentele API en het zal waarschijnlijk breken in toekomstige releases van React.

Als je erop staat om context te gebruiken ondanks deze waarschuwingen, probeer dan je gebruik van context te isoleren tot een klein gebied en vermijd het gebruik van de context API direct wanneer mogelijk, zodat het's makkelijker is om te upgraden wanneer de API verandert.

Dit is hoe ik het deed:

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

Gebruik this.props.history.push('/cart'); om door te verwijzen naar winkelwagen pagina het zal worden opgeslagen in geschiedenis object.

Veel plezier, Michael.

this.context.history.push zal niet werken.

Het is me gelukt om push zo werkend te krijgen:

static contextTypes = {
    router: PropTypes.object
}

handleSubmit(e) {
    e.preventDefault();

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

}