ionic-team / ionic-team/ionic-framework

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

Abierto
#23,743 32 comentarios 21 reacciones 0 asignados Ver en GitHub
package: react type: bug
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.