bug: Nested route doesn't work after history.goBack()

[puku0x]

Bug Report

Ionic version:

[x] 4.11.1

Current behavior:

A blank page is shown when pushing a page after popping a page by using history.goBack() when routes are nested with IonRouterOutlet.

*It worked well with IonBackButton, though.

Expected behavior:

It should show a page.

Steps to reproduce:

1. Make an app with nested routes.
2. Push a page
3. Pop the page with history.goBack()
4. Push the page again
   Then, a blank page will be shown.

Related code:
https://codesandbox.io/s/ionicreact-nested-route-sample-5n5dg

const App: React.FunctionComponent = () => {
  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route exact path="/login" component={LoginPage} />
          <Route path="/" component={MainPage} />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
};

export const MainPage: React.FunctionComponent = () => {
  return (
    <IonRouterOutlet>
      <Route exact path="/" render={() => <Redirect to="/users" />} />
      <Route exact path="/users" component={UserListPage} />
      <Route exact path="/users/:id" component={UserDetailPage} />
    </IonRouterOutlet>
  );
};

export const UserListPage: React.FunctionComponent = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar color="primary">
          <IonButtons slot="start">
            <IonMenuButton />
          </IonButtons>
          <IonTitle>UserListPage</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem routerLink="/users/1">
            <IonLabel>User 1</IonLabel>
          </IonItem>
          <IonItem href="/users/2">
            <IonLabel>User 2</IonLabel>
          </IonItem>
          <IonItem href="/users/3">
            <IonLabel>User 3</IonLabel>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};

export const UserDetailPage: React.FunctionComponent = () => {
  const history = useHistory();
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton defaultHref="/users" />
          </IonButtons>
          <IonTitle>UserDetailPage</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonButton expand="full" onClick={() => history.goBack()}>
          Back
        </IonButton>
      </IonContent>
    </IonPage>
  );
};

Other information:

😭Ionic React conference app doesn't help me because it uses the outdated @ionic/react

Ionic info:

Ionic:

   Ionic CLI : 5.4.4

Utility:

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

System:

   NodeJS : v10.16.3
   npm    : 6.9.0
   OS     : macOS Mojave

[puku0x]

I found this problem didn't happen when the platform was ios.

[puku0x]

When a page is pushed, a div with .ion-page is inserted.

It is removed after returning to previous page with IonBackButton.

However, the page remains in the case using history.goBack().

When I push another page after that, display: none does not disappear.

[puku0x]

🤔Hmm, it seems to be not a router bug but an animation (or a back button) bug.

[elylucas]

Hi @puku0x,

Thanks for the issue, this should be fixed in the upcoming 4.11.2 release which should be out today.

[puku0x]

Thank you @elylucas for your reply.
I’m looking forward to the next release.

[puku0x]

I confirmed the bug was fixed in v4.11.2. Thank you!

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