我正在构建一个Ionic 7和一个REact 18应用程序。

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>

型
问题是，通常当我点击“支付”按钮时，虽然我看到我的URL中的路由发生了变化，但我并不总是看到PaymentContainer组件呈现（原始组件仍然存在）。当我在浏览器上点击“刷新”时，我确实看到正确的组件呈现。我如何纠正我的序列，以便PaymentContainer组件在我的路由发生变化时始终呈现？