The hooks should be triggered if your routes are defined correctly-- I have an app with several hundred routes, including manually defined routes, dynamically defined routes, and nested routes, and I have not had trouble getting IonViewDidEnter/Leave to trigger.
Looking at your routes, one thing I would try is to disable your <Route path="/home">
route section and see if you can get the hooks to work.
The issue with the <Route path="/home">
section is that the home route is not wrapped in <IonRouterOutlet>
, which is what is managing the transitions between IonPages.
So the structure should be something like:
<IonRouterOutlet>
<Route path="/login" render={() => user ? <Redirect to="/home/pending-chats"/> : <Login/>} exact={true}/>
<Route path="/pending-chats/:contactId" component={LinkChat} />
<Route path="/conversations/:contactUserSwitchboardId" component={Chat} />
<Route path="/contacts/:contactId" component={ContactDetails} />
<Route path="/home" component={routerOutletHome} />
</IonRouterOutlet>
And then component routerOutletHome
:
<IonPage>
<IonRouterOutlet>
<Route path="/home/pending-chats" component={PendingChats} exact={true} />
<Route path="/home/conversations" component={Conversations} exact={true} />
<Route path="/home/contacts" component={Contacts} exact={true} />
<Route path="/home/configuration" component={Configuration} exact={true} />
</IonRouterOutlet>
</IonPage>
Note that the nested router outlet is wrapped in <IonPage>
. This is necessary to prevent the IonRouterOutlets from fighting each other.
Anyway, nested routes have several tricky points, so first I would remove the route nesting from your app and test the hooks that way.