Ionic应用页面跳转异常：目标页面在Home页后方渲染但URL已更新

Looks like you're hitting a common Ionic React routing snag where your target page renders behind the Home page instead of replacing it—even though the URL updates correctly. Let's break down the likely causes and actionable fixes:

1. Fix Modal Dismissal & Navigation Order #

Your current code triggers navigate.push() before calling onDismiss(). Since modals sit on top of Ionic's router outlet, navigation firing while the modal is still in the DOM can cause the new page to render underneath existing Home content.

Solution: #

Reorder the logic to wait for the modal to fully dismiss before navigating. If your onDismiss() returns a Promise (standard for Ionic's modal.dismiss()), use await to ensure completion:

const handleConfirm = async () => { 
  const containerList: any = []; 
  try { 
    containers.map((container) => { 
      containerList.push(container.id); 
    }); 
    const response = await logisticsApi.selfAssign(containerList); 
    if (response.success) { 
      updateIsContainerScan(false); 
      setLendConfig(containers); 
      // Wait for modal to fully unmount first
      await onDismiss(); 
      // Then trigger navigation
      navigate.push('/self-assign'); 
      toaster.flashSuccess(t('SuccessfullyAdded')); 
    } else { 
      toaster.flashError(t('GeneralError')); 
      await onDismiss(); 
    }
  } catch (error) { 
    updateScanning(true); 
    toaster.flashError(t('GeneralError')); 
  } 
};

2. Wrap Your Target Page in Ionic's Required Components #

Ionic React relies on <IonPage> and <IonContent> to manage page stacking, transitions, and DOM cleanup. Your ConfirmationSelfAssign component is missing these, which breaks the page hierarchy.

Solution: #

Update your component to include Ionic's core page wrapper:

import { IonPage, IonContent } from '@ionic/react';

const ConfirmationSelfAssign = ({ lendConfig }: ConfirmationModalProps) => { 
  console.log(lendConfig, 'confirmation'); 
  const [showAlert1, setShowAlert1] = useState(false); 
  const { t } = useTranslation(); 
  return ( 
    <IonPage>
      <IonContent className="ion-padding">
        <Placeholder selfAssignConfirmation icon="assets/confirmationTick.svg" title={t('SelfAssignConfirmation', { total: lendConfig.length })} /> 
        <Cart confirmationModal key={lendConfig} items={lendConfig} /> 
        <Button onClick={() => setShowAlert1(true)} primary> 
          {t('Close')}
        </Button> 
        <ConfirmationAlert showAlert={showAlert1} /> 
      </IonContent>
    </IonPage>
  ); 
};

3. Use Ionic's useIonRouter Instead of React Router's useNavigate #

React Router's useNavigate doesn't always integrate perfectly with Ionic's page lifecycle management. Ionic's native useIonRouter handles page transitions and stacking more reliably.

Solution: #

Swap out your navigation hook:

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

// Inside your QRModal component:
const ionRouter = useIonRouter();

// Replace navigate.push with this:
ionRouter.push('/self-assign');

4. Verify Your PrivateRoute Implementation #

If your custom PrivateRoute component wraps the page in unnecessary elements or breaks the routing context, it can cause unexpected stacking. Ensure it passes the page component directly to the router:

import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ as, component: Component, ...rest }) => {
  const isAuthenticated = /* Your auth check logic */;
  const userRole = /* Get current user role */;

  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated && userRole === as ? (
          <Component {...props} />
        ) : (
          <Redirect to="/" />
        )
      }
    />
  );
};

Bonus: Add a Mounted Check #

If your modal unmounts mid-navigation, you might encounter race conditions. Add a ref to ensure the component is still mounted before executing navigation:

import { useRef, useEffect } from 'react';

// Inside your QRModal component:
const isMounted = useRef(true);

useEffect(() => {
  return () => {
    isMounted.current = false;
  };
}, []);

// In handleConfirm:
if (response.success && isMounted.current) {
  // Your success logic here
}

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