IonNav history lost when parent component is re-rendered

Ionic Framework Ionic React
1

Hi,

I’ve been using IonNav to add stack-based navigation to a modal menu. However, whenever a state change occurs the component re-renders and the menu will switch back to showing the root page, even if you were already on another page.

This example hopefully shows it well.

const App = ({ someValue }: { someValue: string }) => {
  const [present, dismiss] = useIonModal(SubMenuModal, {
    onDismiss: () => dismiss(),
  });

  return (
    <IonPage>
      <button onClick={() => present()}>{someValue}</button>
    </IonPage>
  );
};

const SubMenuModal = ({ onDismiss }: { onDismiss: () => void }) => {
  return <IonNav root={() => <MainMenuPage onDismiss={onDismiss} />} />;
};

const MainMenuPage = ({ onDismiss }: { onDismiss: () => void }) => {
  return (
    <IonPage>
      <IonNavLink routerDirection="forward" component={() => <OtherMenuPage />}>
        <IonItem>Other</IonItem>
      </IonNavLink>
    </IonPage>
  );
};

const OtherMenuPage = ({ onDismiss }: { onDismiss: () => void }) => {
  return <IonPage></IonPage>;
};

Steps:

  • Open the modal menu
  • Click on the item in the MainMenuPage to navigate to the OtherMenuPage

When the someValue state changes in the App component. I would expect the opened modal menu to remain on the OtherMenuPage. However, I'm seeing that that it will switch back to the OtherMenuPage` instead.

Is there a way I can prevent this from happening?

Thanks!

2

I think you need to set up IonReactRouter. Without the router, I don’t think there’s anything keeping track of the pages.

3

Thanks for your reply! I don’t think a router is necessary as it looks to me that IonNav was made to work separate from the router.

Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app’s overall router.

I was hoping that IonNav would keep track of this on its own.