bug: Component mount repeatedly while invoking popTo or popToRoot of IonNav

[zhbhun]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Hi,

I use IonNav in react, invoking popTo lead to component mount twice.

1. Each element in IonNav views not have key —— https://github.com/ionic-team/ionic-framework/blob/main/packages/react/src/components/navigation/IonNav.tsx#L22
2. Each view is wrapped by Portal —— https://github.com/ionic-team/ionic-framework/blob/main/packages/react/src/framework-delegate.tsx#L25
3. Page A => Page B => Page C => Page D, from Page D popTo Page B. Page D would unmount, then mount agin, finally unmount, It causes to make multiple initialization requests of Page D.

Expected Behavior

Page D unmount only once.

Steps to Reproduce

1. Build a IonNav and four page - Page A, Page B, Page C, Page D;
2. Push page one by one;
3. popTo Page B from Page D;

Code Reproduction URL

https://stackblitz.com/edit/stackblitz-starters-zcyaaq

Ionic Info

Ionic:
Ionic Framework : @ionic/react 7.1.2

System:
NodeJS : v16.19.1
npm : 8.19.3
OS : macOS

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[zhbhun]

https://stackblitz.com/edit/stackblitz-starters-zcyaaq

When clicking "Go To Page One" in PageThree, PageThree would remount agin.

page three mount
page three unmount
page three mount
page three unmount

My guess is that IonNav's view is missing a key, and when popTo or popToTop is called, the intermediate routes to be skipped will be deleted first, resulting in a change in the views array, and the current route is not reused in react diff, and is destroyed and rebuilt.

[sean-perkins]

Thanks for reporting this issue and providing a reproduction @zhbhun! I see the same issue and I believe your assessment is correct regarding the lack of key for tracking the view instances. I'll label this as a bug and will prioritize taking a look at your pull request 👍

Thanks!