fix(react): IonNav apply properties to page components (#25603)

Resolves #25602

packages/react/src/components/navigation/IonNav.tsx

@@ -4,27 +4,34 @@ import React, { useState } from 'react';
 
 import { ReactDelegate } from '../../framework-delegate';
 import { createReactComponent } from '../react-component-lib';
+import { createForwardRef } from '../utils';
 
 const IonNavInner = createReactComponent<
   JSX.IonNav & { delegate: FrameworkDelegate },
   HTMLIonNavElement
 >('ion-nav', undefined, undefined, defineCustomElement);
 
-export const IonNav: React.FC<JSX.IonNav> = ({ children, ...restOfProps }) => {
-  const [views, setViews] = useState<React.ReactPortal[]>([]);
+type IonNavProps = JSX.IonNav & {
+  forwardedRef?: React.ForwardedRef<HTMLIonNavElement>;
+};
+
+const IonNavInternal: React.FC<IonNavProps> = ({ children, forwardedRef, ...restOfProps }) => {
+  const [views, setViews] = useState<React.ReactElement[]>([]);
 
   /**
    * Allows us to create React components that are rendered within
    * the context of the IonNav component.
    */
-  const addView = (view: React.ReactPortal) => setViews([...views, view]);
-  const removeView = (view: React.ReactPortal) => setViews(views.filter((v) => v !== view));
+  const addView = (view: React.ReactElement) => setViews([...views, view]);
+  const removeView = (view: React.ReactElement) => setViews(views.filter((v) => v !== view));
 
   const delegate = ReactDelegate(addView, removeView);
 
   return (
-    <IonNavInner delegate={delegate} {...restOfProps}>
+    <IonNavInner delegate={delegate} ref={forwardedRef} {...restOfProps}>
       {views}
     </IonNavInner>
   );
 };
+
+export const IonNav = createForwardRef<IonNavProps, HTMLIonNavElement>(IonNavInternal, 'IonNav');

packages/react/src/framework-delegate.tsx

@@ -1,15 +1,17 @@
 import { FrameworkDelegate } from '@ionic/core/components';
 import { createPortal } from 'react-dom';
 
+type ReactComponent = (props?: any) => JSX.Element;
+
 export const ReactDelegate = (
-  addView: (view: React.ReactPortal) => void,
-  removeView: (view: React.ReactPortal) => void
+  addView: (view: React.ReactElement) => void,
+  removeView: (view: React.ReactElement) => void
 ): FrameworkDelegate => {
-  let Component: React.ReactPortal;
+  const refMap = new WeakMap<ReactComponent, React.ReactElement>();
 
   const attachViewToDom = async (
     parentElement: HTMLElement,
-    component: () => JSX.Element,
+    component: ReactComponent,
     propsOrDataObj?: any,
     cssClasses?: string[]
   ): Promise<any> => {
@@ -17,17 +19,20 @@ export const ReactDelegate = (
     cssClasses && div.classList.add(...cssClasses);
     parentElement.appendChild(div);
 
-    Component = createPortal(component(), div);
+    const componentWithProps = component(propsOrDataObj);
+    const hostComponent = createPortal(componentWithProps, div);
 
-    Component.props = propsOrDataObj;
+    refMap.set(component, hostComponent);
 
-    addView(Component);
+    addView(hostComponent);
 
     return Promise.resolve(div);
   };
 
-  const removeViewFromDom = (): Promise<void> => {
-    Component && removeView(Component);
+  const removeViewFromDom = (_container: any, component: ReactComponent): Promise<void> => {
+    const hostComponent = refMap.get(component);
+    hostComponent && removeView(hostComponent);
+
     return Promise.resolve();
   };
 

packages/react/test-app/cypress/integration/navigation/IonNav.spec.ts

@@ -7,6 +7,10 @@ describe('IonNav', () => {
     cy.get('ion-nav').contains('Page one content');
   });
 
+  it('should have a ref defined', () => {
+    cy.get('#navRef').should('have.text', 'Nav ref is defined: true');
+  });
+
   it('should push a page', () => {
     cy.get('ion-button').contains('Go to Page Two').click();
     cy.get('#pageTwoContent').should('be.visible');
@@ -25,4 +29,16 @@ describe('IonNav', () => {
     cy.get('ion-nav').contains('Page one content');
   });
 
+  it('should pass params to the page', () => {
+    cy.get('#pageOneProps').should('have.text', '{"someString":"Hello","someNumber":3,"someBoolean":true}');
+  });
+
+  it('should pass componentProps to sub pages', () => {
+    cy.get('ion-button').contains('Go to Page Two').click();
+
+    cy.get('#pageTwoContent').should('be.visible');
+
+    cy.get('#pageTwoProps').should('have.text', '{"someValue":"Hello"}');
+  });
+
 });

packages/react/test-app/src/pages/navigation/NavComponent.tsx

@@ -11,13 +11,17 @@ import {
   IonBackButton,
   IonPage,
 } from '@ionic/react';
-import React from 'react';
+import React, { useRef } from 'react';
 
-const NavComponent: React.FC = () => {
-  return (
-    <IonPage>
-      <IonNav
-        root={() => {
+const PageOne = ({
+  nav,
+  ...restOfProps
+}: {
+  someString: string;
+  someNumber: number;
+  someBoolean: boolean;
+  nav: React.MutableRefObject<HTMLIonNavElement>;
+}) => {
   return (
     <>
       <IonHeader>
@@ -30,9 +34,21 @@ const NavComponent: React.FC = () => {
       </IonHeader>
       <IonContent id="pageOneContent">
         <IonLabel>Page one content</IonLabel>
+        <div id="pageOneProps">{JSON.stringify(restOfProps)}</div>
+        <div id="navRef">Nav ref is defined: {nav.current !== null ? 'true' : 'false'}</div>
         <IonNavLink
           routerDirection="forward"
-                  component={() => {
+          component={PageTwo}
+          componentProps={{ someValue: 'Hello' }}
+        >
+          <IonButton>Go to Page Two</IonButton>
+        </IonNavLink>
+      </IonContent>
+    </>
+  );
+};
+
+const PageTwo = (props?: { someValue: string }) => {
   return (
     <>
       <IonHeader>
@@ -45,9 +61,17 @@ const NavComponent: React.FC = () => {
       </IonHeader>
       <IonContent id="pageTwoContent">
         <IonLabel>Page two content</IonLabel>
-                          <IonNavLink
-                            routerDirection="forward"
-                            component={() => (
+        <div id="pageTwoProps">{JSON.stringify(props)}</div>
+        <IonNavLink routerDirection="forward" component={PageThree}>
+          <IonButton>Go to Page Three</IonButton>
+        </IonNavLink>
+      </IonContent>
+    </>
+  );
+};
+
+const PageThree = () => {
+  return (
     <>
       <IonHeader>
         <IonToolbar>
@@ -61,22 +85,23 @@ const NavComponent: React.FC = () => {
         <IonLabel>Page three content</IonLabel>
       </IonContent>
     </>
-                            )}
-                          >
-                            <IonButton>Go to Page Three</IonButton>
-                          </IonNavLink>
-                        </IonContent>
-                      </>
   );
+};
+
+const NavComponent: React.FC = () => {
+  const ref = useRef<any>();
+  return (
+    <IonPage>
+      <IonNav
+        ref={ref}
+        root={PageOne}
+        rootParams={{
+          someString: 'Hello',
+          someNumber: 3,
+          someBoolean: true,
+          nav: ref,
         }}
-                >
-                  <IonButton>Go to Page Two</IonButton>
-                </IonNavLink>
-              </IonContent>
-            </>
-          );
-        }}
-      ></IonNav>
+      />
     </IonPage>
   );
 };