Hogyan lehet a React Router v4-ben a History-ra tolni?

A React Router v4 alapvetően különbözik a v3-tól (és a korábbiaktól), és nem tudod úgy használni a browserHistory.push() parancsot, mint korábban.

Ez a vita kapcsolódónak tűnik, ha további információra van szükséged:

• Egy új browserHistory létrehozása nem fog működni, mert a létrehozza a saját history példányát, és figyel a változásokra azon. Tehát egy másik példány megváltoztatja az url-t, de nem frissíti a-t.
• A browserHistory-t a react-router a v4-ben nem teszi közzé, csak a v2-ben.

Ehelyett van néhány lehetőséged erre:

• A withRouter magasrendű komponens használata

Ehelyett a withRouter magasrendű komponenst kell használnod, és ezt kell a history-ba toló komponenshez csomagolnod. Például:

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

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

További információért nézd meg a hivatalos dokumentációt:

A withRouter magasabb rendű komponens segítségével hozzáférhetünk a history objektum tulajdonságaihoz és a legközelebbi ``'s match objektumhoz. withRouter minden alkalommal, amikor az útvonal változik, újra megjeleníti a komponensét ugyanazokkal a kellékekkel, mint a `` renderelési kellékei: { match, location, history }.

• A "kontextus" API használata

A kontextus használata lehet az egyik legegyszerűbb megoldás, de mivel ez egy kísérleti API, instabil és nem támogatott. Csak akkor használd, ha minden más kudarcot vall. Íme egy példa:

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

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

Nézd meg a hivatalos dokumentációt a kontextusról:

Ha azt akarod, hogy az alkalmazásod stabil legyen, ne használd a context-et. Ez egy kísérleti API, és a React jövőbeli kiadásaiban valószínűleg elromlik.

Ha e figyelmeztetések ellenére ragaszkodik a kontextus használatához, próbálja meg a kontextus használatát egy kis területre elszigetelni, és lehetőség szerint kerülje a kontextus API közvetlen használatát, hogy könnyebb legyen frissíteni, amikor az API változik.

Én így csináltam:

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

A this.props.history.push('/cart'); használatával átirányíthatod a kosár oldalra, amely el lesz mentve a history objektumba.

Jó szórakozást, Michael.

A this.context.history.push nem fog működni.

Sikerült elérnem, hogy a push így működjön:

static contextTypes = {
    router: PropTypes.object
}

handleSubmit(e) {
    e.preventDefault();

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

}