ionic-team / ionic-team/ionic-framework
bug: `match.params` is always an empty object when using `Redirect` in `IonRouterOutlet`
- Dominant language
- TypeScript
- Stars
- 52.7k
- Forks
- 13.3k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 51
Description
### Prequisites
- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.
### Ionic Framework Version
- [ ] v4.x
- [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
Contributor guide
Research direction
Start with the IonRouterOutlet and Redirect entry points, then reproduce the navigation flow from the linked code reproduction using a parameterized route such as /tab1/:id. Trace how the redirect affects match.params and useParams, and consider the issue done when the destination page receives TESTING instead of undefined after navigating through the fallback route.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100