bug: Route match params not readable in lifecycle hooks in Ionic React

It seems that the route match params do not get updated in the Ionic-React lifecycle hooks.

Ionic version: [ ] 4.x [x] 5.x. @ionic/react: 5.2.2

Current behavior: When a route is visited again, Ionic reuses the existing page. This is a bit different from how React does it, but as described in the docs there are handy lifecycle hooks available to help with it.

However the route match params don’t seem to update.

Expected behavior: I would expect that the match params are updated.

Steps to reproduce:

Some pseudo-code to show the issue:

  <IonApp>
     <IonReactRouter>
       <IonRouterOutlet>
              <Route path="/home" component={Home} exact />
              <Route path="/game/:id" component={GamePage} exact />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>

interface GameProps
  extends RouteComponentProps<{
    id: string
  }> {}

const GamePage: React.FC<GameProps> = ({ match }) => {

useIonViewDidEnter(() => {
    console.log('useIonViewDidEnter ', match.params.id) // always the initial id
})
useEffect(() =>
    console.log('useEffect', match.params.id) // always the current id
})
return <IonPage><IonContent>{ match.params.id }</IonContent></IonPage>

In another part of the app:

history.push('/game/10');

and later

history.push('/game/11');

But

console.log('useIonViewDidEnter ', match.params.id) // always the initial id

keeps outputting 10 (the first)

Related code: If needed I can create a sample project.

Ionic info:

Ionic:

   Ionic CLI       : 6.10.1
   Ionic Framework : @ionic/react 5.2.2

Capacitor:

   Capacitor CLI   : 2.2.0
   @capacitor/core : 2.2.0

Utility:

   cordova-res (update available: 0.15.0) : 0.14.1
   native-run                             : 1.0.0

System:

   NodeJS : v14.3.0
   npm    : 6.14.5
   OS     : macOS Catalina

[avalanche1]

Can we raise the priority for this bug? It’s been a year with no fix - and it’s a serious issue - Ionic lifecycle hooks not working as expected - what’s the point of having them then?..

[hansvn]

@kaloczikvn can you try this:

const getId = useCallback(() => {
  return match.params.id;
}, [match.params]);

useIonViewDidEnter(() => {
    console.log("useIonViewDidEnter ", getId());
});

I’ve come across this bug a couple of times, and my understanding is that useIonViewDidEnter falls outside of the scope of the Functional Component. Calling a method inside the scope should return the correct id (not too sure if you’ll actually need the callback, I’m writing this from the top of my head but this should be the most robust solution at this point).