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

Question

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

我的组件看起来与此类似:

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

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

但是，如果我调用 e.preventDefault ，任何后续功能都可以正常工作:

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

我想我可以做类似的事情，然后以编程方式导航到我的路线，但必须有更好的(即更少 hack-y)方法来实现这种效果。

有没有人有任何建议，这可能对我有帮助？

Answer 1

这不是一个直接的解决方案，但你可以尝试使用简单的 a 元素，而不是使用 Link 组件，并移动到 onClick 中所需的路由 处理程序:

import { browserHistory } from 'react-router';

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