React Link包裹商品卡片时，按钮点击触发链接跳转的解决办法

问题核心是事件冒泡：按钮嵌套在Link组件内部，点击按钮的onClick事件会向上冒泡到外层Link组件，触发跳转行为。下面是两种可行的解决方法：

方法一：阻止事件冒泡 #

在按钮的点击事件中阻止事件向上传播，让Link接收不到点击信号。

方式1：直接在按钮回调中处理 #

修改按钮的onClick属性，先执行阻止冒泡操作，再运行添加商品逻辑：

<div className="product__plus" onClick={(e) => {
  e.stopPropagation(); // 阻止事件向上冒泡
  addProduct();
}}>
  <img src={plus} alt="" className="product__plus-img" />
</div>

方式2：修改addProduct函数 #

让addProduct接收事件参数，在函数内部完成阻止冒泡：

// 调整addProduct函数，加入event参数
const addProduct = (e) => {
  e.stopPropagation();
  // 你的添加商品逻辑代码
};

// 按钮直接绑定该函数
<div className="product__plus" onClick={addProduct}>
  <img src={plus} alt="" className="product__plus-img" />
</div>

方法二：调整DOM结构（更符合语义） #

将Link仅包裹需要跳转的区域（比如商品图片、标题、描述），把添加按钮移出Link范围，从根源避免事件冲突：

<div className="product__card">{props.count}
  {/* 仅让商品信息区域触发跳转 */}
  <Link to={'Bigcard'} className="product__link">
    <img className="product__img" src={props.url} alt="" />
    <h4 className="product__title">{props.title}</h4>
    <p className="product__description">{props.description}</p>
  </Link>
  
  <div className="product__parameters-button">
    <div className="product__parameters">
      <p className="product__price">{props.price} ₽</p>
      <p className="product__weight"> / {props.weight} г.</p>
    </div>
    {/* 按钮不在Link内部，点击不会触发跳转 */}
    <div className="product__plus" onClick={addProduct}>
      <img src={plus} alt="" className="product__plus-img" />
    </div>
  </div>
</div>

两种方法都能解决问题，方法二更符合页面语义（添加按钮本身不属于跳转触发点），方法一适合不想调整原有DOM结构的场景。

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