React-Router:为什么 <Link>组件的 onClick 处理程序不会调度我的操作

React-Router: Why won't <Link> component's onClick handler dispatch my action?

本文关键字：程序 处理 调度 操作 我的 onClick 组件 为什么 Link React-Router      更新时间：2023-09-26

我希望 React-Router 的<Link>在单击时触发一个函数，但看起来<Link>在函数有机会触发之前导航到下一页。

我的组件看起来像这样：

<Link to={`/path/to/${foo}`} onClick={() => myFunc(foo, bar)}>
  <div>This is my Link</div>
</Link>

foo和bar是从父组件传下来的道具。

但是，如果我调用 e.preventDefault ，任何后续函数都可以正常工作： 

<Link
    to={`/path/to/${foo}`}
    onClick={(e) => e.preventDefault(); console.log('This works!')}>
  <div>This is my Link</div>
</Link>

我想我可以做类似的事情，然后以编程方式导航到我的路线，但必须有一种更好（即更少的黑客）方法来实现这种效果。

有人有任何建议，可能对我有所帮助吗？

这

直接不是解决方案，但您可以尝试不使用Link组件，使用简单的a元素，并在处理程序onClick移动到所需的路由：

import { browserHistory } from 'react-router';
<a onClick={
  browserHistory.push(`/path/to/${foo}`)
  myFunc(foo, bar)
}>
  <div>This is my Link</div>
</a>
相关文章：