bug: weird routing behavior when view content is changed while navigation

[legendar]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When the page content is changed while we push new route, an invalid view is rendered. In our project, we navigate to the shop menu when the cart is empty. Also we want to show an empty view for the cart if a user opens the cart URL manually. So somewhere in the code we have the following:

function Cart() {
  //...

  const clearCartAndNavigateToMenu = () => {
    clearCart().then(() => {
      push('/menu/')
    })
  }

  if(isCartEmpty) {
   return <EmptyView />
  }

  return (
    // cart content here
  )
}

After navigation the route changed to '/menu/' and we expect to see the menu page. But instead, we see EmptyView although the route has changed.

Expected Behavior

We expect to see correct view when the route is changed.

Steps to Reproduce

Minimal reprodusible example provided in the repo. STR:

1. Open Tab2
2. Click "Go to list page" button
3. Click "Remove all items and navigate to home" button
4. The view will flicker double times and you will see the correct URL ('/tab2') but an invalid view 'There no items'reproducible

Code Reproduction URL

https://github.com/legendar/ionic-issues

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/***/ionic-issues/node_modules/@ionic/cli) Ionic Framework : @ionic/react 7.6.6

Capacitor:

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

Utility:

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

System:

NodeJS : v18.15.0 (/home/***/.nvm/versions/node/v18.15.0/bin/node) npm : 9.5.0 OS : Linux 5.15

Additional Information

After further debugging I found that there is double animation and the reason why this happens is this line in Ionic Router: https://github.com/ionic-team/ionic-framework/blob/e86f4f1cc9f8ce583c751fc63d44e5f8ccf82ae6/packages/react-router/src/ReactRouter/StackManager.tsx#L209

Before clearing the list we have the following components structure:

Route -> Tab2Nested -> IonPage -> IonContent

when we clear the list Tab2EmptyView view will be rendered and the next components structure is:

Route -> Tab2Nested -> Tab2EmptyView-> IonPage -> IonContent

this change causes the IonPage component remounting, registerIonPage call in IonicRouter and extra page transition. Alongside we trigger navigation to the home/Tab2 page and as a result, we have two different transitions at the same time. And this is why we have inconsistency between the route path and rendered view.

So we need to somehow prevent transition to the same page and/or prevent to call several transitions at the same time.

As a workaround we can move IonPage to Tab2Nested so we will have a similar component structure before and after removing a cart:

Route -> CartDetail -> IonPage -> IonContent ->
Route -> CartDetail -> IonPage -> Tab2Nested -> IonContent

if(items.length === 0) {
  return <IonPage><Tab2EmptyView /></IonPage>
}

In this case IonPage will not be remounted and we will not have an extra transition.

[brandyscarney]

Thank you for the issue and the reproduction! I was able to reproduce the behavior you reported. I have created an internal ticket to investigate this further. 🙂