Question

我希望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>

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

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

Answer 1

这不是解决方案，但您可以尝试使用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>

React-Router：为什么<link />组件的onClick处理程序不会调度我的动作？

1 个答案: