反应路由器链接重新加载页面：与外部事件冲突

Question

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

我的应用程序包含在一个外部网页中，该网页包含一些脚本（即 Google 标签管理器），用于定义文档级别链接上的事件。

这会导致与链接事件发生冲突：单击链接时页面总是重新加载。

我试图通过 onClick 回调停止在我的 Link 组件上传播，但没有成功： <Link onClick={(e) => { e.stopPropagation(); }} [...]>...</Link>

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

关于这个的任何线索？

谢谢 ！

Answer 1

我在我的一个应用程序上遇到了类似的问题，我认为解决方案是避免使用“react-router <Link /> component如果可以的话”。

<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 />组件相同的结果。