ionic-team / ionic-team/ionic-framework

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

Open
#23,743 32 comments 21 reactions 0 assignees View on GitHub
package: react type: bug
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.