ionic-team / ionic-team/ionic-framework

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

未关闭
#23,743 32 条评论 21 个 reaction 已指派 0 人 在 GitHub 查看
package: react type: bug
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

### 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

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。