Nested Routes and useIonViewDidEnter

Ionic Framework Ionic React
1

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.

2

So I’d avoid nested routes if possible. I tend to look at nested routes as being a sign of overcomplicated structure.

For instance, what you are seeing would make sense, since there is already a router-outlet in the DOM, so adding a second one is going to cause issues with what outlet should fire events.

1 Like
3

Ok thanks! I was trying it out because I thought it might be simpler over time to put all the routes for each tab on the individual tabs, but if there is a risk of messing up my hooks, it’s definitely not worth it.