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

Posted 2023-02-21

【中文标题】如何使用 react-router 和 ES6 类模拟 window.location

【英文标题】：How to emulate window.location with react-router and ES6 classes

【发布时间】：2015-10-10 22:11:28

【问题描述】：

我正在使用 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在构造函数中）。

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

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

【参考方案1】：

在用 react 路由器浪费时间之后，我终于切换到基本的 javascript。

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

Route path="*" component=NotFound

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

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

【讨论】：

问题被标记为 react-router -- 如果您主张不使用该工具，您应该详细解释为什么它不起作用

不要落入trap of thinking a library should prescribe how to do everything。如果你想在 JavaScript 中对位置做一些事情，你可以使用 window.location。 react-outer 没有任何不同的理由。

【参考方案2】：

在此处找到解决方案：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);

【参考方案3】：

如果你为 React-router 使用 browserHistory，生活就更简单了。

import browserHistory from "react-router";

functionName() 
 browserHistory.push("/path-to-link");

【讨论】：

错误：“react-router”不包含名为“browserHistory”的导出。

浏览器历史的使用方式发生了变化。 ***.com/questions/43822589/…

【参考方案4】：

看看来自 react-router 的 Navigation mixin。 http://rackt.github.io/react-router/#Navigation

来自文档：

var Navigation = require('react-router').Navigation;

React.createClass(
  mixins: [Navigation],

  render: function() 
    return (
      <div onClick=() => this.transitionTo('foo')>Go to foo</div>
      <div onClick=() => this.replaceWith('bar')>Go to bar without creating a new history entry</div>
      <div onClick=() => this.goBack()>Go back</div>
    );
  
);

【讨论】：

谢谢@paulshen。不幸的是，我使用的是 ES6 类，所以我不能使用 mixins。我不确定是否可能，但我正在尝试导入 Navigation 方法，例如import Navigation from 'react-router'... 试图看看这是否可能，在我现在想弄清楚的 transitionTo 中遇到this.context 的一些问题。

【参考方案5】：

在这种情况下，我通常使用hashHistory 或browserHistory，具体取决于您使用的内容，然后只需调用hashHistory.push(<url>)。如果您使用的是 ES6 类，您也可以使用 react-router 提供的 withRouter Hoc，如提到的 here。这个高阶组件在您的组件中公开了一个名为 router 的道具。使用此道具，您可以使用 this.props.router.push(<url>) 重定向。

如果您必须从上下文中使用路由器，则必须提供@Ben 的答案中提到的上下文类型。

【讨论】：

链接失效了，我今天也遇到了类似的问题，请问现在有没有更好的解决方案？

【参考方案6】：

使用react-router-dom中的Link，在我的sn-p中我使用的是material-ui <Button>

import Link from "react-router-dom";
    
<Button color="primary" 
to="/join" component=Link>
Join a Room
</Button>

【参考方案7】：

使用useHistory获取历史对象并推送到它以更改url

import  useHistory  from 'react-router-dom';

export default function ModificarUsuario( url ) 
  const history = useHistory();
  
  function newRoute()
    history.push('/my-route')
  

【讨论】：

请说明您的短代码被截断以及如何使用。