bug: Hardware back event triggered twice (or more) if an IonReactRouter is unmounted and re-mounted

[Cyral]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:
Hardware back button triggers the back event multiple times.

Expected behavior:
Hardware back button only triggers event once

Steps to reproduce:
Create a React app with two IonReactRouters.

For example, one router for logged out users and one for logged in users. The logged out router is mounted when the user is logged out, and upon login the new router is mounted. Only one router is mounted at any given moment, but users who log in or out will cause more than one router to be created during the app lifetime.

For example: {isLoggedIn ? <AuthedApp/> : <UnauthedApp/>} where each component has it's own routing.

Navigate to at least two pages in the second router and then press back. Ionic will take you back two pages instead of one.

Related code:

I think the issue is that the ionBackButton event is registered but never removed when the router is unmounted. It should be removed when componentWillUnmount is called.

Also seeing Can't perform a React state update on an unmounted component. from IonReactRouter which further points to this being the issue.

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.12.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.6.3

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run (update available: 1.3.0)   : 1.2.2

System:

   NodeJS : v14.15.0 (/usr/local/Cellar/node@14/14.15.0/bin/node)
   npm    : 6.14.8
   OS     : macOS Big Sur

[willmartian]

Hi @Cyral, thanks for the issue! Can you reproduce this in an Ionic starter app and provide a link to the repo?

[Cyral]

@willmartindev
Yes, please see: https://github.com/Cyral/ionic-issue-23170

I don't think there is a way to simulate the back button so you will have to open the android project and run it.

There are two routers, one is when the user is "logged out" and one when they are "logged in". App.ts has a simple state to keep track of this.

Click the login button, then try:

1. Clicking into the nested page, and the double nested page. Then press the hardware back where it takes you to the original page, instead of the second nested tab.

2. Also try clicking on tab 2, then tab 3, then press the hardware back button. It takes you back to the first tab instead of tab 2

[willmartian]

@Cyral

Thank you for reporting this issue and including code for reproduction! This has been resolved via #23224, and a fix will be available in an upcoming release of Ionic Framework.

Additionally, when researching this issue, I came across facebook/react#12378, which you may also find helpful; I think it was one of the causes behind this issue.

[Cyral]

@willmartindev Thanks for the quick fix on this

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