feature(react): rc2 release

* fix(): add a page with class ion-page back to ionrouteroutlet - fixes #19146

* wip

* fix(react): attributes show up in dom

* chore(): adding ion-page to core wip

* wip

* fix destroy method

* wrap dom writes in raf

* Add comments

* fix(react): IonPage work

* chore(): ionpage rc3 changelog text

* fix(): syncing ion-page in a new way to get rid of timeout loop

* chore(): ViewStacks refactor out of router

* fix(): remove unused method in router

* wip - before setActiveView rework

* fix(): react router ion page work

* chore(): cleanup and dev release

* fix(): remove need to name tabs

* chore(): adding dev mode helpers

* fix(): adding className prop to back button fixes #19251

* fix(): routerDirection changes

* chore(): rc2 release

* fix(): fix react version in package

* chores(): build kickoff

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

@@ -2,9 +2,10 @@ import { JSX as LocalJSX } from '@ionic/core';
 import React from 'react';
 
 import { NavContext } from '../../contexts/NavContext';
+import { ReactProps } from '../ReactProps';
 import { IonBackButtonInner } from '../inner-proxies';
 
-type Props = LocalJSX.IonBackButton & {
+type Props = LocalJSX.IonBackButton & ReactProps & {
   ref?: React.RefObject<HTMLIonBackButtonElement>;
 };
 
@@ -13,13 +14,11 @@ export const IonBackButton = /*@__PURE__*/(() => class extends React.Component<P
 
   clickButton = (e: MouseEvent) => {
     const defaultHref = this.props.defaultHref;
-    if (defaultHref !== undefined) {
-      if (this.context.hasIonicRouter()) {
-        e.stopPropagation();
-        this.context.goBack(defaultHref);
-      } else {
-        window.location.href = defaultHref;
-      }
+    if (this.context.hasIonicRouter()) {
+      e.stopPropagation();
+      this.context.goBack(defaultHref);
+    } else if (defaultHref !== undefined) {
+      window.location.href = defaultHref;
     }
   }
 

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

@@ -7,7 +7,7 @@ import { IonTabButton } from '../proxies';
 
 type Props = LocalJSX.IonTabBar & {
   ref?: React.RefObject<HTMLIonTabBarElement>;
-  navigate: (path: string) => void;
+  navigate: (path: string, direction: 'back' | 'none') => void;
   currentPath: string;
   children?: React.ReactNode;
 };
@@ -68,10 +68,11 @@ const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component<Pro
   }
 
   private onTabButtonClick = (e: CustomEvent<{ href: string, selected: boolean, tab: string }>) => {
-    const targetUrl = (this.state.activeTab === e.detail.tab) ?
-      this.state.tabs[e.detail.tab].originalHref :
-      this.state.tabs[e.detail.tab].currentHref;
-    this.props.navigate(targetUrl);
+    if (this.state.activeTab === e.detail.tab) {
+      this.props.navigate(this.state.tabs[e.detail.tab].originalHref, 'back');
+    } else {
+      this.props.navigate(this.state.tabs[e.detail.tab].currentHref, 'none');
+    }
   }
 
   private renderChild = (activeTab: string | null | undefined) => (child: (React.ReactElement<LocalJSX.IonTabButton & { onIonTabButtonClick: (e: CustomEvent) => void }>) | null | undefined) => {
@@ -100,8 +101,8 @@ export const IonTabBar: React.FC<LocalJSX.IonTabBar & { currentPath?: string, na
   return (
     <IonTabBarUnwrapped
       {...props as any}
-      navigate={props.navigate || ((path: string) => {
-        context.navigate(path);
+      navigate={props.navigate || ((path: string, direction: 'back' | 'none') => {
+        context.navigate(path, direction);
       })}
       currentPath={props.currentPath || context.currentPath}
     >

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { NavContext } from '../../contexts/NavContext';
-import { IonRouterOutlet } from '../proxies';
+import { IonRouterOutlet } from '../IonRouterOutlet';
 
 import { IonTabBar } from './IonTabBar';
 
@@ -60,19 +60,11 @@ export const IonTabs = /*@__PURE__*/(() => class extends React.Component<Props>
       throw new Error('IonTabs needs a IonTabBar');
     }
 
-    const NavManager = this.context.getViewManager();
-
     return (
       <div style={hostStyles}>
         {tabBar.props.slot === 'top' ? tabBar : null}
         <div style={tabsInner} className="tabs-inner">
-          {this.context.hasIonicRouter() ? (
-            <NavManager>
-              {outlet}
-            </NavManager>
-          ) : (
-              <>{outlet}</>
-            )}
+          {outlet}
         </div>
         {tabBar.props.slot === 'bottom' ? tabBar : null}
       </div>