如何使用 react-router-dom 防止事件冒泡<Link> ?

Question

好的。 所以我有这样的事情。

我在整个帖子周围添加了链接，认为我可以停止单个按钮的冒泡，但是 stopPropagation() 没有按预期工作。

我已将按钮操作拆分为一个单独的组件，这是另一篇关于该主题的帖子所建议的，但这并没有奏效。 我假设这与它是一个 react-router-dom 链接的事实有关，但它可能是其他东西。

有任何想法吗？

import React from 'react';
import { Link } from 'react-router-dom';

const MyComponent = ({
  doSomething
})=>(
  <Link to={`/some/url`}>
  <div className="post">
    <span className="button" onClick={e=>{
      e.stopPropagation();
      doSomething();
    }}>My Button</span>
  </div>
  </Link>
)

Answer 1

应该管用：

e.preventDefault()

更详细的解释： 链接内元素的stopPropagation/preventDefault行为

此外， stopPropagation是一个函数，它正在等待被调用。