bug: Fallback route breaks routing in ionic react

[justinpathrose]

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

v8.x

Current Behavior

In ionic project with Tabs, I have added a fallback route using the recomended way of doing it.

<Route component={NotFoundPage} />

In normal use, the routing works fine, but if I go to the invalid route directly, the navigation is broken.

Expected Behavior

The navigation works without any issues/jank.

Steps to Reproduce

1. Dowload code from github - https://github.com/justinpathrose/ionic-fallback and run.
2. Click on Tab 1 button in /login route.
3. Click on Go to Invalid Route button in /tabs/tab1 route.
4. Reload the page.
5. Click on Tab 1 Button.

Code Reproduction URL

https://github.com/justinpathrose/ionic-fallback

Ionic Info

Ionic:

Ionic CLI : 7.2.1 (/Users/justin/.nvm/versions/node/v20.19.1/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 8.5.8

Utility:

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

System:

NodeJS : v20.19.1 (/Users/justin/.nvm/versions/node/v20.19.1/bin/node) npm : 10.8.2 OS : macOS Unknown

https://github.com/user-attachments/assets/70133c70-c9ae-407a-9eae-96d660f196dd

Additional Information

No response