ionic-team / ionic-team/ionic-framework
bug: Route match params not readable in lifecycle hooks in Ionic React
- 主要言語
- TypeScript
- スター
- 52.7k
- フォーク
- 13.3k
- 平均マージ
- 1日 15時間
- マージ済み PR(30日)
- 51
説明
It seems that the route match params do not get updated in the Ionic-React lifecycle hooks.
**Ionic version:**
[ ] **4.x**
[x] **5.x**.
@ionic/react: 5.2.2
**Current behavior:**
When a route is visited again, Ionic reuses the existing page.
This is a bit different from how React does it, but as described in the [docs](https://ionicframework.com/docs/react/lifecycle) there are handy lifecycle hooks available to help with it.
However the route match params don't seem to update.
**Expected behavior:**
I would expect that the match params are updated.
**Steps to reproduce:**
Some pseudo-code to show the issue:
```
```
```
interface GameProps
extends RouteComponentProps<{
id: string
}> {}
const GamePage: React.FC = ({ match }) => {
useIonViewDidEnter(() => {
console.log('useIonViewDidEnter ', match.params.id) // always the initial id
})
useEffect(() =>
console.log('useEffect', match.params.id) // always the current id
})
return { match.params.id }
```
In another part of the app:
```
history.push('/game/10');
```
and later
```
history.push('/game/11');
```
But
```
console.log('useIonViewDidEnter ', match.params.id) // always the initial id
```
keeps outputting 10 (the first)
**Related code:**
If needed I can create a sample project.
**Ionic info:**
```
Ionic:
Ionic CLI : 6.10.1
Ionic Framework : @ionic/react 5.2.2
Capacitor:
Capacitor CLI : 2.2.0
@capacitor/core : 2.2.0
Utility:
cordova-res (update available: 0.15.0) : 0.14.1
native-run : 1.0.0
System:
NodeJS : v14.3.0
npm : 6.14.5
OS : macOS Catalina
```
コントリビューションガイド
調査の方向性
Read the Ionic React lifecycle documentation linked in the issue, then reproduce the behavior using the shown IonReactRouter, IonRouterOutlet, and GamePage example with history pushes to /game/10 and /game/11. Done means the lifecycle hook receives the updated route parameter rather than retaining the initial id.
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react, typescript
- 領域
- frontend, mobile-dev
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 38/100