React技术问题：点击按钮时如何同时调用函数并跳转路由？

问题出在你把Link嵌套在按钮内部，导致点击区域被拆分：点击按钮空白处触发onClick但不触发路由跳转，点击Buy Now文字触发路由跳转但没同步执行addToCart逻辑。下面是两种可靠的解决方式：

方案一：移除Link，在onClick中手动触发路由跳转 #

这是最直接的方案，利用React Router的history对象在addToCart执行后完成跳转：

1. 首先确保你的组件能获取到history对象，需要用withRouter高阶组件包裹组件：

import { withRouter } from 'react-router-dom';

// 你的类组件代码...

// 导出组件时用withRouter包裹
export default withRouter(YourComponentName);

2. 修改按钮代码，移除内部的Link，并在onClick中同时处理添加购物车和跳转：

<button 
  type="button" 
  className="btn btn-outline-secondary" 
  onClick={() => {
    // 先调用addToCart函数
    this.addToCart(
      this.state.itemDetails.product.images[0].path,
      this.state.itemDetails.name,
      this.state.itemDetails.id,
      this.state.itemDetails.unitPrice,
      this.state.quantity
    );
    // 执行路由跳转
    this.props.history.push('/proceedToCheckout');
  }}
>
  Buy Now
</button>

如果addToCart是异步操作（比如调用后端API），记得在异步完成后再跳转，避免跳转时购物车还没更新：

onClick={() => {
  this.addToCart(
    this.state.itemDetails.product.images[0].path,
    this.state.itemDetails.name,
    this.state.itemDetails.id,
    this.state.itemDetails.unitPrice,
    this.state.quantity
  )
  .then(() => {
    // 异步操作成功后再跳转
    this.props.history.push('/proceedToCheckout');
  })
  .catch(error => {
    // 处理错误，比如提示用户添加失败，不执行跳转
    console.error('添加到购物车失败:', error);
  });
}}

方案二：保留Link，统一事件处理 #

如果你坚持要保留Link组件，可以阻止Link的默认跳转行为，然后在按钮的onClick中统一执行逻辑：

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

// ...

<button 
  type="button" 
  className="btn btn-outline-secondary" 
  onClick={(e) => {
    // 阻止事件冒泡，避免Link的默认行为触发
    e.preventDefault();
    // 调用addToCart
    this.addToCart(
      this.state.itemDetails.product.images[0].path,
      this.state.itemDetails.name,
      this.state.itemDetails.id,
      this.state.itemDetails.unitPrice,
      this.state.quantity
    );
    // 手动触发路由跳转
    this.props.history.push('/proceedToCheckout');
  }}
>
  <Link to="/proceedToCheckout"> Buy Now </Link>
</button>

同样需要用withRouter包裹组件来获取history对象。不过这种方案有点冗余，更推荐方案一。

为什么原来的代码不生效？ #

当你点击Link文本时，浏览器会优先执行Link的默认跳转行为，此时按钮的onClick可能不会被正确触发（或者触发了但跳转已经执行，导致addToCart的逻辑还没完成页面就跳转了）；而点击按钮空白区域时，只会触发按钮的onClick，不会触发Link的跳转逻辑，所以两者无法同步执行。

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