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

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

[elylucas]

Hi @puku0x,

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

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