Как да натиснете в История в React Router v4?

React Router v4 се различава коренно от v3 (и по-ранните версии) и не можете да правите browserHistory.push() както преди.

Тази дискусия изглежда е свързана с нея, ако искате повече информация:

• Създаването на нова browserHistory няма да работи, защото създава своя собствена инстанция на историята и слуша за промени в нея. Така че друга инстанция ще промени url адреса, но няма да актуализира.
• browserHistory не се разкрива от react-router във версия 4, а само във версия 2.

Вместо това имате няколко възможности за това:

• Използвайте компонента от висок порядък withRouter

Вместо това трябва да използвате компонента от висок порядък withRouter и да го обгърнете с компонента, който ще се изпраща към историята. Например:

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

Вижте официалната документация за повече информация:

Можете да получите достъп до свойствата на обекта history и до най-близкия ``'s match чрез компонента от по-висок ред withRouter. withRouter ще визуализира отново своя компонент при всяка промяна на маршрута със същите реквизити като `` реквизити за визуализация: { match, location, history }.

• Използване на API context

Използването на контекста може да е едно от най-лесните решения, но като експериментален API той е нестабилен и не се поддържа. Използвайте го само когато всичко останало се провали. Ето един пример:

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

Разгледайте официалната документация за контекста:

Ако искате приложението ви да е стабилно, не използвайте контекст. Това е експериментален API и има вероятност да се счупи в бъдещите версии на React.

Ако държите да използвате контекст въпреки тези предупреждения, опитайте се да изолирате използването на контекст в малка област и избягвайте да използвате директно API на контекста, когато е възможно, за да'е по-лесно да надграждате, когато API се промени.

Ето как го направих:

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

Използвайте this.props.history.push('/cart');, за да пренасочите към страницата на количката, която ще бъде запазена в обекта история.

Наслаждавайте се, Майкъл.

this.context.history.push няма да работи.

Успях да накарам push да работи по следния начин:

static contextTypes = {
    router: PropTypes.object
}

handleSubmit(e) {
    e.preventDefault();

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

}