bug: ion-nav does not work in react

[smorris1709]

Prequisites

• 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

• v4.x
• v5.x
• v6.x

Current Behavior

There isn't rich documentation available on how to use ion-nav
Using IonNav to implement nested routing inside an IonModal in React gives framework delegate is missing error

Expected Behavior

nested routing should work.

Steps to Reproduce

https://codesandbox.io/s/confident-waterfall-ctdnr?file=/src/pages/Home.tsx

Click the button to open modal then click next to go to the next page.

Code Reproduction URL

https://codesandbox.io/s/confident-waterfall-ctdnr?file=/src/pages/Home.tsx

Ionic Info

No response

Additional Information

No response

[milang]

@liamdebeasi @sean-perkins any progress on this issue?

Our use-case is exactly what the documentation describes:

https://ionicframework.com/docs/api/nav
Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.

I created a code reproduction repository that uses the latest Ionic (6.1.1) and React (18), showing that the issue is still present (please use branch test-ionnav):
https://github.com/milang/ionic-simplevitejs/tree/test-ionnav

git clone https://github.com/milang/ionic-simplevitejs.git
cd ionic-simplevitejs
git checkout test-ionnav # <= switch branch
yarn && yarn dev

I tried using push method (lines 63-67 in src/App.tsx uncommented + lines 38-42 in src/App.tsx) => unsuccessful

I also tried using root property on IonNav component (lines 56-62 in src/App.tsx uncommented) => unsuccessful

---

Is there a workaround that allows forward and backward animations to be used in modal dialogs when using React? Based on the following article I assume ion-nav works in Angular, but I would appreciate guidance for React as well:
https://ionicframework.com/blog/how-to-navigate-in-ionic-modals-with-ion-nav/

Related issue in ionic-docs repository links to a solution, but when playing around with it I did not find it very reliable (and the code is quite hacky):
ionic-team/ionic-docs#1345 (comment)

Is there a better way?

[milang]

@liamdebeasi @sean-perkins any progress on this issue?

[sean-perkins]

@milang no need to ping us multiple times on the status of an issue. If an issue is open, it still is an active problem. If an issue has an attached PR, it is in progress. If an issue is closed with an attached commit, it is resolved and available in the next release (or nightly build).

This issue is still open and an active problem.

[sean-perkins]

The dev-build is available here to test: 6.1.12-dev.11656705976.18fe5a46

If you need an example of IonNav with React, you can look at the test app example: https://github.com/ionic-team/ionic-framework/blob/b2a27e0b623a603b536dc23ab409662219323acb/packages/react/test-app/src/pages/navigation/NavComponent.tsx

[milang]

@sean-perkins @liamdebeasi thank you for the update. I switched to the dev-build above and used <IonNav> with a trivial <HelloWorld> component:
https://github.com/milang/ionic-simplevitejs/blob/simple-ionnav/src/App.tsx#L33

However, I observed two issues:

1. rootParams value is ignored, root component is always rendered with undefined props
2. When <HelloWorld> is included via <IonNav> and I edit anything in <HelloWorld>, hot-reloaded page becomes blank. However, if I comment line 33 and uncomment line 34 (including <HelloWorld> directly, not via <IonNav>), hot-reloading works flawlessly.

To test the sample:

git clone https://github.com/milang/ionic-simplevitejs.git
cd ionic-simplevitejs
git checkout simple-ionnav # <= switch branch
yarn && yarn dev