Nested Routes and useIonViewDidEnter

I am trying to refactor my v5 app to use nested routes.

The documentation gives this example:

const DashboardPage: React.FC = () => {
  return (
    <IonPage>
      <IonRouterOutlet>
        <Route exact path="/dashboard" component={UsersListPage} />
        <Route path="/dashboard/users/:id" component={UserDetailPage} />
        <Route exact path="/dashboard/setup-welcome" component={SetupWelcome} />
      </IonRouterOutlet>
    </IonPage>
  );
};

So I removed the <IonPage> tag from my <SetupWelcome> component:

const SetupWelcome: React.VFC = () => {
  useIonViewDidEnter(() => {
    console.log('useIonViewDidEnter SetupWelcome');
  });

  return (
    <>
      <IonHeader>
        <IonToolbar>
          <IonTitle>
            <Trans id="setup.page_title.welcome">Hi!</Trans>
          </IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding-top">
        <p>Here is some content.</p>
      </IonContent>
    </>
  );
};

The problem is that my router still works but the useIonViewDidEnter() no longer gets fired. Do I need to have an <IonPage> component in the same file to get the useIonViewDidEnter() hook to fire?

Also, if someone could explain why the nested route in the documentation is wrapped in the <IonPage> component, that would really help me understand what is going on.

1 post - 1 participant

Read full topic