如何阻止React Router Link点击嵌套按钮时触发路由跳转？

问题分析 #

你遇到的问题是：商品卡片被Link组件包裹后，点击卡片任意区域都会触发路由跳转，但卡片内的按钮需要独立执行自身逻辑而不触发跳转。尝试使用e.stopPropagation()无效，可能是事件处理写法有误，或是组件结构设计导致事件冒泡无法被正确拦截。

解决方案 #

方案一：重构组件结构（推荐） #

不要将整个卡片包裹在Link内，仅把卡片中需要跳转的区域（如商品名称、价格）用Link包裹，按钮单独放置。这种方式从结构上彻底避免了按钮点击触发跳转的问题：

映射组件代码：

<>
  {list.map((item) => {
    return <ItemCard 
      key={item.id} 
      name={item.name} 
      price={item.price} 
      addToCart={addToCart} 
      id={item.id} // 传递id给子组件用于生成跳转路径
    />;
  })}
</>

ItemCard组件代码：

const { name, price, addToCart, id } = props;
return (
  <div>
    {/* 仅将需要跳转的区域用Link包裹 */}
    <Link to={`/item/${id}`}>
      <h2>{name}</h2>
      <h4>{price}</h4>
    </Link>
    {/* 按钮不在Link内部，点击仅执行自身逻辑 */}
    <button onClick={addToCart} type="button">Do Something</button>
  </div>
);

方案二：正确拦截事件冒泡 #

如果无法修改组件结构，需确保在按钮的点击事件中正确阻止事件冒泡到外层的Link组件，注意要先执行事件拦截再处理按钮逻辑：

修改ItemCard的按钮处理逻辑：

<button 
  onClick={(e) => {
    e.stopPropagation(); // 阻止事件冒泡到外层Link
    addToCart(); // 执行按钮自身的业务逻辑
  }} 
  type="button"
>
  Do Something
</button>

也可以在addToCart函数内部处理事件拦截：

// 父组件中的addToCart函数
const addToCart = (e) => {
  e.stopPropagation(); // 先拦截事件冒泡
  // 这里写添加到购物车的具体逻辑，比如更新状态、调用接口等
};

// ItemCard中的按钮
<button onClick={(e) => addToCart(e)} type="button">Do Something</button>

为什么之前的做法失效？ #

你之前尝试的e.stopPropagation()无效，大概率是以下原因：

1. 事件参数e没有被正确传递到处理函数中
2. 事件拦截逻辑被函数内的其他异步操作覆盖，导致冒泡未被及时阻止

方案一从结构上规避了事件冒泡问题，是最稳妥的解决方式；方案二则适用于无法调整组件结构的场景。

内容的提问来源于stack exchange，提问作者Vipul Khedekar