ionic-team / ionic-team/ionic-framework
bug: Route match params not readable in lifecycle hooks in Ionic React
还没有人认领这个 Issue。
- 主要语言
- TypeScript
- 星标
- 52.7k
- 派生
- 13.3k
- 平均合并
- 1 天 14 小时
- 30 天内合并 PR
- 50
描述
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
```
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
阅读 issue 中链接的 Ionic React 生命周期文档,然后使用所示的 IonReactRouter、IonRouterOutlet 和 GamePage 示例,通过将 history push 到 /game/10 和 /game/11 来复现该行为。完成的标准是生命周期钩子接收到更新后的路由参数,而不是保留初始 id。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react, typescript
- 领域
- frontend, mobile-dev
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 38/100