React18+Ionic7中history.push后组件未渲染的解决办法

我正在构建基于Ionic 7和React 18的应用。现有**OrderItemRecipientComponent**组件，点击“Pay”按钮时会执行设置按钮禁用、调用addToCart方法，随后通过useEffect监听isButtonDisabled状态变化，执行history.push("/payment")跳转路由。

组件代码如下：

const OrderItemRecipientComponent: React.FC = () => {
    ...
  const history = useHistory();
  const [isButtonDisabled, setButtonDisabled] = useState(false);


  useEffect(() => {
    // This effect will run after the component re-renders
    if (isButtonDisabled) {
      // move on to the payment
      history.push("/payment");
    }
  }, [isButtonDisabled, history]);
  

  const handleSaveAndContinue = () => {
    setButtonDisabled(true); // Disable the button

    // add the item to the cart
    addToCart(orderItem);
  };

  return (
    <>
    ...
      <p>
        <AddressForm
          contactInfo={contactInfo}
          setContactInfo={setContactInfo}
        />
      </p>
      <IonButton expand="full" onClick={handleSaveAndContinue}  disabled={isButtonDisabled}>
        Pay
      </IonButton>
    </>
  );
};

export default OrderItemRecipientComponent;

App.tsx中的路由配置如下：

<IonContent className="ion-padding" scroll-y>
    <IonRouterOutlet>
        ...
      <Route exact path="/payment">
        <PaymentContainer />
      </Route>
    </IonRouterOutlet>
  </IonContent>
</IonReactRouter>

点击“Pay”按钮后，URL已变更为/payment，但**PaymentContainer**组件并非总能渲染（原组件仍显示），仅刷新浏览器后才能正常显示。请问如何调整逻辑，确保路由变化时PaymentContainer组件始终能渲染？

1. 移除useEffect中转路由跳转的逻辑 #

当前通过useState+useEffect间接触发路由跳转的方式存在时序冲突风险，状态更新后的组件重渲染可能干扰Ionic路由的页面切换逻辑。直接在点击事件处理函数中完成操作后跳转即可。

2. 保证addToCart操作完成后再跳转 #

如果addToCart是异步操作（比如调用后端API），必须等待它执行完成后再跳转路由，避免因异步操作未完成导致的状态不一致问题；如果是同步操作则可直接跳转。

修改后的handleSaveAndContinue示例：

const handleSaveAndContinue = async () => {
  setButtonDisabled(true); // 禁用按钮防止重复点击

  // 若addToCart为异步函数，用await等待执行完成
  await addToCart(orderItem);

  // 直接执行路由跳转
  history.push("/payment");
};

3. 改用Ionic官方推荐的useIonRouter #

Ionic React提供的useIonRouter专门适配其页面切换机制，比原生useHistory更可靠，能确保路由变化被正确感知：

import { useIonRouter } from '@ionic/react-router';

const OrderItemRecipientComponent: React.FC = () => {
  const ionRouter = useIonRouter();
  // ...其他状态和逻辑

  const handleSaveAndContinue = async () => {
    setButtonDisabled(true);
    await addToCart(orderItem);
    // 使用ionRouter跳转
    ionRouter.push('/payment');
  };

  // ...返回JSX
};

4. 检查路由嵌套结构 #

确保OrderItemRecipientComponent所在的路由同样配置在IonRouterOutlet内部，所有需要切换的页面路由都要放在IonRouterOutlet下，否则Ionic无法正确管理页面的挂载和卸载。

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