React Router Link重新加载页面:与外部事件冲突

杰瑞德

我正在使用React Router的Link组件来处理应用程序中的页面转换。

我的应用程序包含在外部网页中,该网页包含一些脚本(即Google跟踪代码管理器),这些脚本定义了文档级链接上的事件。

这会导致与Link事件发生冲突:单击链接时,页面始终会重新加载。

我试图通过onClick回调停止在Link组件上的传播,但是没有运气: <Link onClick={(e) => { e.stopPropagation(); }} [...]>...</Link>

我看到Link事件也是在文档级别定义的,所以我不知道如何停止外部事件。

关于这个有什么线索吗?

谢谢 !

马修·里奥斯(Mathieu Rios)

我在其中一个应用程序上遇到了非常相似的问题,我认为解决方案是避免使用react-router <Link /> componentif。

代替使用的<Link />组分,我使用了withRouter()由设置HOC react-router

你写的是:

Class MyComponent extends React.Component{
  <Link onClick={(e) => { e.stopPropagation(); }} [...]>
    ...
  </Link>
}

export default MyComponent;

可以替换为:

Class MyComponent extends React.Component{

  navigate = (event, location) => {
    event.preventDefault();
    this.props.history.push(location);
  }

  <a onClick={(e, href) => { this.navigate(e, href) }} [...]>
    ...
  </a>
}

export default withRouter(MyComponent);

这样可以防止您的链接在文档级别捕获其他事件,并获得与<Link />组件相同的结果

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章