ionic-team / ionic-team/ionic-framework

bug: Route match params not readable in lifecycle hooks in Ionic React

未关闭
#21,594 22 条评论 8 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

package: react type: bug
主要语言
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

```

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 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

把新 issue 发到你的邮箱

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