我想要 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)方法来实现这种效果。
有没有人有任何建议,这可能对我有帮助?
最佳答案
这不是一个直接的解决方案,但你可以尝试使用简单的 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>
关于javascript - React-Router:为什么 <Link> 组件的 onClick 处理程序不会调度我的操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38329015/