ionic-team / ionic-team/ionic-framework
bug: Route match params not readable in lifecycle hooks in Ionic React
- Ngôn ngữ chính
- TypeScript
- Star
- 52.7k
- Fork
- 13.3k
- Merge trung bình
- 1 ngày 15 giờ
- Pull request đã merge (30 ngày)
- 51
Mô tả
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
```
Hướng dẫn đóng góp
Hướng nghiên cứu
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.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react, typescript
- Lĩnh vực
- frontend, mobile-dev
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 38/100