ionic-team / ionic-team/ionic-framework

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

Open
#21,594 22 comments 8 reactions 0 assignees View on GitHub
package: react type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

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

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.