fix(react): duplicate page transitions do not happen on react 18 (#25798)

resolves #25797

packages/react-router/src/ReactRouter/StackManager.tsx

@@ -206,8 +206,18 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
   registerIonPage(page: HTMLElement, routeInfo: RouteInfo) {
     const foundView = this.context.findViewItemByRouteInfo(routeInfo, this.id);
     if (foundView) {
+      const oldPageElement = foundView.ionPageElement;
       foundView.ionPageElement = page;
       foundView.ionRoute = true;
+
+      /**
+       * React 18 will unmount and remount IonPage
+       * elements in development mode when using createRoot.
+       * This can cause duplicate page transitions to occur.
+       */
+      if (oldPageElement === page) {
+        return;
+      }
     }
     this.handlePageTransition(routeInfo);
   }

packages/react/src/routing/OutletPageManager.tsx

@@ -18,16 +18,26 @@ export class OutletPageManager extends React.Component<OutletPageManagerProps> {
   ionLifeCycleContext!: React.ContextType<typeof IonLifeCycleContext>;
   context!: React.ContextType<typeof StackContext>;
   ionRouterOutlet: HTMLIonRouterOutletElement | undefined;
+  outletIsReady: boolean;
 
   constructor(props: OutletPageManagerProps) {
     super(props);
+
+    this.outletIsReady = false;
   }
 
   componentDidMount() {
     if (this.ionRouterOutlet) {
+      /**
+       * This avoids multiple raf calls
+       * when React unmounts + remounts components.
+       */
+      if (!this.outletIsReady) {
         componentOnReady(this.ionRouterOutlet, () => {
+          this.outletIsReady = true;
           this.context.registerIonPage(this.ionRouterOutlet!, this.props.routeInfo!);
         });
+      }
 
       this.ionRouterOutlet.addEventListener(
         'ionViewWillEnter',