React-Router push 只改变 URL 不导航答案

【问题标题】：React-Router push only changes the URL and does not navigateReact-Router push 只改变 URL 不导航
【发布时间】：2016-10-11 17:22:19
【问题描述】：

我正在尝试使用 react-router 以编程方式导航，但我似乎无法这样做。

我已阅读其他相关问题，例如 this one，似乎对其他人有用，但无济于事。

我正在使用 react-router 2.4.1 版本，据我了解，它应该通过以下方式完成：

this.context.router.push('/');

甚至：

browserHistory = require('react-router').browserHistory;
//...
var browserHistory.push('/');

但无论采用哪种方法，我似乎都完成了 URL 重写，没有进行实际路由。

我的路由器上确实为“/”注册了一条路由。

我错过了什么？我距离 window.location = '/' 几英寸远，否则是单页应用程序:(

【问题讨论】：

【解决方案1】：

我知道这已经有几个月了，但以防万一有人遇到类似问题。

一个简单的解决方法是添加以下代码：

static contextTypes = {
  router: PropTypes.object,
};

然后你可以使用： this.context.router.push('/foo');

【讨论】：

【解决方案2】：

因此，显然是第三方组件摆弄了上下文和子项。删除它，现在它可以按预期工作了。

如果有人遇到这种情况，请尝试查看您路线上的组件如何处理上下文和子项。

【讨论】：

这对我不起作用，我试过this.context.router.push('/');，也使用路由器 v2.4.1。我没有任何会与this.context 混淆的第 3 方 React 组件，至少我不知道。使用ReactJS v15.1.0。从这里尝试了一些建议：stackoverflow.com/questions/31079081/…，在这里很累：github.com/reactjs/react-router/blob/master/docs/… 仍然没有运气。
我得到了它的工作，从下面这个：github.com/reactjs/react-router-tutorial/tree/master/lessons/… 并且对于 ES6 React 检查这里的 contextTypes 示例：blog.ricardofilipe.com/post/react-and-es6，提示：YourComponentName.contextTypes = { 路由器：React.PropTypes.object };

【解决方案3】：

以下代码是导航的工作示例

导航代码，

handleClick(e) {
    e.preventDefault();
    this.context.router.push('/aboutus');
  }

对于 React 组件，不要忘记引用 Context

Item.contextTypes = {
  router: PropTypes.object.isRequired
};

【讨论】：