单击 Link React 内的按钮后阻止重定向

【问题标题】：Block redirecting after clicking on the button inside Link React单击 Link React 内的按钮后阻止重定向
【发布时间】：2022-01-13 07:34:06
【问题描述】：

我该怎么做才能使单击<Link> 组件内的<Button/> 不会将我重定向到to 内的站点，并且在单击<OtherStuff /> 后它将重定向我。

<Link to="">
 <OtherStuff />
 <Button />
</Link>

【问题讨论】：

如果您只是将组件包装在中会怎样？

标签： java html reactjs react-router-dom

【解决方案1】：

通常认为将交互式元素嵌套在其他交互式元素中是不正确的，但如果您想链接到工作只有在OtherStuff 组件被点击时，您可以阻止Button 组件的点击事件的传播，因此它不会传播到Link 组件。

例如Button:

const Button = () => {
  const clickHandler = e => {
    e.stopPropagation();
    // ... other click logic
  };

  return <button type="button onClick={clickHandler}>Text</button>;
};

...

<Link to="">
 <OtherStuff />
 <Button />
</Link>

【讨论】：