如何从 React-Router-Dom 停止对 Link 元素的传播？

Question

我想在LinkReact-Router-Dom 的组件内的事件对象上触发停止传播方法。我的问题是，当我单击Link元素内的按钮时，它无论如何都会将我移动到另一个页面。我看到 stopPropagation 方法无法正常工作，并且Link元素上的 onClick 事件正在启动。如何防止这种行为？我在 codeSandbox 上准备了一个示例，但在此示例中，Link并没有将我移动到另一个页面，而只是刷新了页面。示例 https://codesandbox.io/s/serene-surf-h65dz?file=/src/Home.js我的代码：const handleClick = e => {  e.stopPropagation();  return console.log("Works?");};return (  <Link to={`/edytuj/${item.ID}`} className="table__row">    <Checkbox      isSelected={isSelected}      toggleSelection={() => handleSelection(item, isSelected)}    ></Checkbox>    <TableRowItem>{item.ID}</TableRowItem>    <TableRowItem      src={item.IMAGE}      additionalClassName="table__image"    ></TableRowItem>    <TableRowItem>{item.NAME}</TableRowItem>    <TableRowItem>{item.DESCRIPTION}</TableRowItem>    <TableRowItem additionalClassName="table__cost">      {item.COST} zł    </TableRowItem>    <TableRowItem additionalClassName="table__buttons">      <Button className="btn btn__edit" icon="fas fa-pen btn__icon">        Edytuj      </Button>      <Button        onClick={e => handleClick(e)}        className="btn btn__delete"        icon="fas fa-times btn__icon"      >        Usuń      </Button>    </TableRowItem>  </Link>);按钮：const Button = ({ className, icon, children, onClick }) => {  return (    <button onClick={onClick} className={className}>      {children}      {icon && <i className={icon}></i>}    </button>  );};

Answer 1

只需使用 e.preventDefault();

const handleClick = (e) => {

    e.preventDefault();

    return console.log("It works");

  };

https://codesandbox.io/s/small-bird-65zgb?file=/src/Home.js