如何在React Router v4中推送到历史记录？

React Router v4与v3（以及更早的版本）有根本的不同，你不能像以前那样做browserHistory.push()。

如果你想了解更多信息，本讨论似乎与此有关。

创建一个新的browserHistory不会起作用，因为会创建自己的历史实例，并监听其变化。所以不同的实例会改变网址，但不会更新。

• browserHistory在v4中没有被react-router暴露，只有在v2中。

相反，你有几个选项可以做到这一点。

• 使用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);

查看官方文档以获得更多信息。

你可以通过withRouter高阶组件访问history对象的属性和最近的``'的match。withRouter将在每次路由改变时重新渲染其组件，道具与``渲染道具一样：{ match, location, history }。

• 使用context的API

使用context可能是最简单的解决方案之一，但作为一个实验性的API，它是不稳定的，也不被支持。只有在其他一切都失败时才使用它。这里有一个例子。

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

    class MyComponent extends React.Component {
      static contextTypes = {
        路由器。PropTypes.object
      }
      构造函数(props, context) {
         super(props, context);
      }
      ...
      myFunction() {
        this.context.router.history.push（"/some/Path"）。
      }
      ...
    }

请看一下关于context的[官方文档]（https://reactjs.org/docs/context.html）。

如果你希望你的应用程序是稳定的，不要使用context。它是一个实验性的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将无法工作。

我设法让推送工作像这样进行。

static contextTypes = {
    router: PropTypes.object
}

handleSubmit(e) {
    e.preventDefault();

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

}