ionic-framework: 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

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 7
Comments: 22 (6 by maintainers)

Most upvoted comments

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?..

avalanche1 on Jun 1, 2021

@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).

hansvn on Oct 15, 2021

Hi @JanMisker,

Found this issue, you need to pass the param to useIonViewWillEnter in the dependencies list much like useEffect:
useIonViewDidEnter(() => {
    console.log("useIonViewDidEnter ", match.params.id); // always the initial id
  }, [match.params.id]);
Give that a try and let us know.

And sorry, I don’t think thats documented, so we will get that updated.

Still no mention of this in the documentation plus I’m still stuck with this issue.

kaloczikvn on Jul 28, 2021

I have the same exact issue. Unfortunatly adding the match.params to the dependencies does not fix this. Something I found out: the history<LocationState> part of the RouteComponentProps is correct when you click again whereas the match and the location parts are wrong

tottt on Jun 24, 2020

Hi @JanMisker,

Found this issue, you need to pass the param to useIonViewWillEnter in the dependencies list much like useEffect:

useIonViewDidEnter(() => {
    console.log("useIonViewDidEnter ", match.params.id); // always the initial id
  }, [match.params.id]);

Give that a try and let us know.

And sorry, I don’t think thats documented, so we will get that updated.

elylucas on Jun 23, 2020

Hi @JanMisker,

Thanks for the repo. I just gave it a try and wasn’t seeing the issue. Here is what I did:

After loading, I hit the Push 10 button, and went into the details page. The console showed:

useEffect 10
Detail.tsx:29 mounting useEffect 10
Detail.tsx:26 useEffect 10
Detail.tsx:23 useIonViewDidEnter  10

I hit the back button, updated the text field to 101, and hit the Push 101 button, when it went to the details page the console showed:

useEffect 101
Detail.tsx:29 mounting useEffect 101
Detail.tsx:26 useEffect 101
Detail.tsx:23 useIonViewDidEnter  101

From what I gathered, the bug you were saying was that the ionViewDidEnter was reporting the id was still “10” correct? Let me know if I’m missing something.

Thanks 2020-06-23_11-32-44 (1)

elylucas on Jun 23, 2020