bug: Tabs + React Router + Ionic lifecycle hooks combo causes inconsistent data

[avalanche1]

Bug Report

Ionic version:

[x] 5.6.8

Current behavior:

There is a problem with useIonViewWillEnter and useParams of react-router.
If I try to access the params object of useParams inside the useIonViewWillEnter callback WHILE I previously navigated using IonTabs - the params object will contain obsolete\erroneous data.
See the Steps to reproduce: section for a more understandable explanation.

Expected behavior:

Steps to reproduce:

In the linked repo app do the following:

• In Customer List view click the 1st customer; it shows the data with id1.
• Now go back with browser Back button and click another customer - the view will display other customer's data correctly. That is how it's supposed to work.
• Now refresh the page and repeat the process, BUT instead of going Back on the 1st customer - click Customers IonTabButton below.
• Go to another customer. You will see that in spite of the url having the correct id, the data displayed is still for the 1st customer. Whereas, the id that is used in the Header is correct - because it is set directly from useParams, avoiding useIonViewWillEnter.
  Related code:
  https://github.com/avalanche1/ionic-router-problem-app

The module in question is src\pages\CustomerForm.tsx.
It has console.log's in it, that show that useIonViewWillEnter uses incorrect customer id.

Ionic info:

Ionic:

   Ionic CLI       : 6.16.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.6.8

Capacitor:

   Capacitor CLI      : not installed
   @capacitor/android : not installed
   @capacitor/core    : not installed
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v16.1.0 (/usr/local/bin/node)
   npm    : 7.11.2
   OS     : macOS Mojave

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of #21594. (Same underlying issue).

[avalanche1]

Thank you, but I do not agree that you should close it.
Plz read the issue description: it works ok when using browser Back button. It only bugs out when using IonTabs.
I think there might be a different underlying cause than in #21594.
I suggest we keep my issue open as well, so that we don't miss a totally different bug.

[liamdebeasi]

The problem here is not exclusive to Tabs as it seems to happen when certain pages are kept in the DOM. There is another developer in that thread who is having the same issue and their code example is also using tabs: #21594 (comment)

As noted in #21594 (comment) you might be able to replace the lifecycle hook with useEffect to get the right parameter.

[avalanche1]

Ok, will continue in that older thread then.
ps, the workaround I am currently using to get the route params in useIonViewWillEnter hook - is to parse location.href global.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.