bug: IonRouterOutlet with routerLink does not unmount routes

[OoDeLally]

Bug Report

Ionic version:

5.0.0

Current behavior:

Leaving a page by clicking on <IonButton routerLink=".."> does not unmount the route's component.

Expected behavior:

The route component should be unmounted.

Steps to reproduce:

const Page: React.FC = () => {
  useEffect(
    () => {
      console.log('Mount Page');
      return () => {
        console.log('Unmount Page'); // Never called
      }
    },
    [],
  );
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonButton routerLink="/">Back</IonButton>
          </IonButtons>
          <IonTitle>Page</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        Page
      </IonContent>
    </IonPage>
  );
};

const MainMenu: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>MainMenu</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonButton routerLink="/page/foo">Go to Page</IonButton>
      </IonContent>
    </IonPage>
  );
};

export const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
        <IonRouterOutlet>
          <Route path="/" component={MainMenu} exact={true} />
          <Route path="/page" component={Page} />
        </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;

Other information:

Ionic info:

▶ ionic info

Ionic:

   Ionic CLI       : 5.4.4 (/home/user/.nvm/versions/node/v8.16.0/lib/node_modules/ionic)
   Ionic Framework : @ionic/react 5.0.0

Utility:

   cordova-res : not installed
   native-run  : 0.2.9 (update available: 0.3.0)

System:

   NodeJS : v8.16.0 (/home/user/.nvm/versions/node/v8.16.0/bin/node)
   npm    : 6.4.1
   OS     : Linux 4.15

[OoDeLally]

Similar/equal to #19984

[elylucas]

This is by design. please see https://ionicframework.com/docs/react/navigation#ionrouteroutlet

[OoDeLally]

Hello @elylucas
I realized that it does unmount if in addition to routerLink="...", I use routerDirection="back", then the page is effectively unmounted.
This is quite an unexpected behavior.
The doc mentions:
Each of these components also have a routerDirection prop to explicitly set the type of page transition to use ("back", "forward", or "none").
It is not obvious to me that this above implies which values unmount the component or not. May I suggest to make it extremely clear? I was banging my head for several hours on that problem.

[elylucas]

Yep, I will look into that.

The idea is if you are leaving a page by going back, the state of the page no longer needs to be maintained. Contrast that by navigating between tabs or going forward from a list page to a details page, you want the same scroll position, form inputs, etc.. in place, so we keep those around in the dom and show/hide them via css.

[OoDeLally]

Yes, this makes sense. However the default behavior is misleading.
imho not providing routerDirection should unmount the component, while a purposeful routerDirection="forward" should keep the component.

Now, a large part of my app uses programmatical redirections, with history.replace. history.replace does not seem to trigger an unmount. Any way I can achieve these routerLink-like transitions programmatically?

Thanks a lot

[elylucas]

Ya, you can pass in the direction as a part of the state object (2nd param to replace):

history.replace('', { direction: 'forward'}) // or back / none

[OoDeLally]

@elingerojo Thank you.
It doesnt seem to work if the page is accessed via a redirection.

This doesnt work for both version of the Redirect:

<Route path={ origin } exact render={ () => <Redirect to={ target } /> } />

or

<Redirect from={ origin } exact to={ target } />

This problem appears for version 4.11.5, 4.11.10 as well as 5.0.0.

[OoDeLally]

It seems that this problem has nothing to do with redirections, but nested IonRouterOutlets.
Made a new issue for this problem #20597

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