如何使用 react-router 和 ES6 类模拟 window.location

Question

我正在使用 react-router，所以我在整个应用程序中使用 <Link /> 组件作为我的链接，在某些情况下我需要根据用户输入动态生成链接，所以我需要类似 window.location ，但没有页面刷新。

我发现了这个小笔记-（ https://github.com/rackt/react-router/issues/835 ）-我尝试使用 this.context.router.transitionTo(mylink) 但我遇到了上下文问题…

这导致我（ https://github.com/rackt/react-router/issues/1059 ），但是上下文返回和空对象，所以当我尝试做类似的事情时： this.context.router.transitionTo(mylink); 我得到 Cannot read property 'transitionTo' of undefined （如果我尝试在构造函数中设置 this.context = context）。

不要拖延，但我也厌倦了过多地混淆上下文，因为它是故意没有记录的，因为它仍在进行中，所以我已经阅读了。

有没有人遇到过类似的问题？

原文由 Ben 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在这里找到了一个解决方案：https://github.com/rackt/react-router/issues/975，在这里： https : //github.com/rackt/react-router/issues/1499

构造函数中需要：

 class SidebarFilter extends React.Component {

    constructor(props, context) {
        super(props, context);

还需要添加一个静态属性：

 SidebarFilter.contextTypes = {
  router: React.PropTypes.func.isRequired
};

然后我可以打电话：

 this.context.router.transitionTo(/path-to-link);

原文由 Ben 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在用 React Router 浪费时间后，我终于切换到基本的 JavaScript。

1. 为您的重定向创建一个组件：

路线路径=“*”组件={NotFound}

1. 在组件中使用 window.location 重定向：

     componentDidMount() {
         if (typeof window !== 'undefined') {
              window.location.href = "http://foo.com/error.php";
         }
    }

原文由 Priyanshu Chauhan 发布，翻译遵循 CC BY-SA 3.0 许可协议