bug: `match.params` is always an empty object when using `Redirect` in `IonRouterOutlet`

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

When rendering a Redirect component in IonRouterOutlet, when navigating to other pages that utilise parameters in the URL (for example, /tab1/:id), the match.params object will always be empty. This means that parameters cannot be extracted using useParams or reading the props.match.params object directly.

Expected Behavior

After a Redirect component is rendered and it takes the user to the desired page, I would expect any subsequent page visits to be populated with parameters if they are in the URL.

Steps to Reproduce

To reproduce using the code reproduction repo listed:

1. Navigate to localhost:8100 (or the test app) in a new tab. This should load tab 2.
2. Click on “Tab 1”. This should take you to /tab1/TESTING.
3. The page should read “Tab 1 with param: undefined” when it should actually say “Tab 1 with param: TESTING”.

Code Reproduction URL

https://github.com/Nevvulo/ionic-router-redirect-issue

Ionic Info

Ionic:

Ionic CLI : 6.16.3 (/Users/bswar/.nvm/versions/node/v14.16.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 5.6.13

Utility:

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

System:

NodeJS : v14.16.0 (/Users/bswar/.nvm/versions/node/v14.16.0/bin/node) npm : 6.14.11 OS : macOS Big Sur

Additional Information

Related issues: https://github.com/ionic-team/ionic-framework/issues/22230

It’s worth mentioning that the official documentation for v5 states that this is valid for a fallback route: https://ionicframework.com/docs/react/navigation#fallback-route

Here is the diff containing just the changes that introduce the problem: https://github.com/Nevvulo/ionic-router-redirect-issue/commit/dfb52bacad714864a8faf1ae435d456eb0a5b956

[wmadden]

@thomasklemm using <Switch> instead of <IonRouterOutlet> means there will be no transitions between pages.

It’s shocking the Ionic team hasn’t even responded to this bug in the router since it was raised in 2018.

Bump

[thomasklemm]

Created a minimal reproduction of this bug including a screen recording, where the match.params are empty if a redirect via a fallback route has happened at the beginning of the session.

Wrapping the routes in a <Switch> component from react-router inside of <IonRouterOutlet> fixed the situation for me, the fallback route is now working, params get parsed properly (Found this solution via this message in Discord)