fix(react): swipe to go back gesture works on ios (#25563)

resolves #22342

Co-authored-by: masonicboom <masonicboom@users.noreply.github.com>

packages/react-router/test-app/src/App.tsx

@@ -1,4 +1,4 @@
-import { IonApp, setupIonicReact } from '@ionic/react';
+import { IonApp, setupIonicReact, IonRouterOutlet } from '@ionic/react';
 import React from 'react';
 import { Route } from 'react-router-dom';
 
@@ -36,6 +36,7 @@ import Refs from './pages/refs/Refs';
 import DynamicIonpageClassnames from './pages/dynamic-ionpage-classnames/DynamicIonpageClassnames';
 import Tabs from './pages/tabs/Tabs';
 import TabsSecondary from './pages/tabs/TabsSecondary';
+import Params from './pages/params/Params';
 
 setupIonicReact();
 
@@ -43,21 +44,24 @@ const App: React.FC = () => {
   return (
     <IonApp>
       <IonReactRouter>
-        <Route path="/" component={Main} exact />
-        <Route path="/routing" component={Routing} />
-        <Route path="/dynamic-routes" component={DynamicRoutes} />
-        <Route path="/multiple-tabs" component={MultipleTabs} />
-        <Route path="/dynamic-tabs" component={DynamicTabs} />
-        <Route path="/nested-outlet" component={NestedOutlet} />
-        <Route path="/nested-outlet2" component={NestedOutlet2} />
-        <Route path="/replace-action" component={ReplaceAction} />
-        <Route path="/tab-context" component={TabsContext} />
-        <Route path="/outlet-ref" component={OutletRef} />
-        <Route path="/swipe-to-go-back" component={SwipeToGoBack} />
-        <Route path="/dynamic-ionpage-classnames" component={DynamicIonpageClassnames} />
-        <Route path="/tabs" component={Tabs} />
-        <Route path="/tabs-secondary" component={TabsSecondary} />
-        <Route path="/refs" component={Refs} />
+        <IonRouterOutlet>
+          <Route path="/" component={Main} exact />
+          <Route path="/routing" component={Routing} />
+          <Route path="/dynamic-routes" component={DynamicRoutes} />
+          <Route path="/multiple-tabs" component={MultipleTabs} />
+          <Route path="/dynamic-tabs" component={DynamicTabs} />
+          <Route path="/nested-outlet" component={NestedOutlet} />
+          <Route path="/nested-outlet2" component={NestedOutlet2} />
+          <Route path="/replace-action" component={ReplaceAction} />
+          <Route path="/tab-context" component={TabsContext} />
+          <Route path="/outlet-ref" component={OutletRef} />
+          <Route path="/swipe-to-go-back" component={SwipeToGoBack} />
+          <Route path="/dynamic-ionpage-classnames" component={DynamicIonpageClassnames} />
+          <Route path="/tabs" component={Tabs} />
+          <Route path="/tabs-secondary" component={TabsSecondary} />
+          <Route path="/refs" component={Refs} />
+          <Route path="/params/:id" component={Params} />
+        </IonRouterOutlet>
       </IonReactRouter>
     </IonApp>
   );

packages/react-router/test-app/src/pages/Main.tsx

@@ -14,7 +14,7 @@ interface MainProps {}
 
 const Main: React.FC<MainProps> = () => {
   return (
-    <IonPage>
+    <IonPage data-pageid="home">
       <IonHeader>
         <IonToolbar>
           <IonTitle>Main</IonTitle>
@@ -58,6 +58,12 @@ const Main: React.FC<MainProps> = () => {
           <IonItem routerLink="/Refs">
             <IonLabel>Refs</IonLabel>
           </IonItem>
+          <IonItem routerLink="/tabs" id="go-to-tabs">
+            <IonLabel>Tabs</IonLabel>
+          </IonItem>
+          <IonItem routerLink="/params/0">
+            <IonLabel>Params</IonLabel>
+          </IonItem>
         </IonList>
       </IonContent>
     </IonPage>

packages/react-router/test-app/src/pages/params/Params.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+  IonButtons,
+  IonBackButton,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { RouteComponentProps } from 'react-router';
+
+interface PageProps
+extends RouteComponentProps<{
+  id: string;
+}> {}
+
+
+const Page: React.FC<PageProps> = ({ match }) => {
+  const parseID = parseInt(match.params.id);
+  return (
+    <IonPage data-pageid={'params-' + match.params.id }>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Params { match.params.id }</IonTitle>
+          <IonButtons slot="start">
+            <IonBackButton />
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonButton id="next-page" routerLink={'/params/' + (parseID + 1) } >Go to next param</IonButton>
+        <br />
+        Page ID: { match.params.id }
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Page;

packages/react-router/test-app/src/pages/tabs/Tabs.tsx

@@ -22,11 +22,12 @@ interface TabsProps {}
 
 const Tabs: React.FC<TabsProps> = () => {
   return (
-    <IonTabs>
+    <IonTabs data-pageid="tabs">
       <IonRouterOutlet id="tabs">
         <Route path="/tabs/tab1" component={Tab1} exact />
         <Route path="/tabs/tab2" component={Tab2} exact />
         <Route path="/tabs/tab1/child" component={Tab1Child1} exact />
+        <Route path="/tabs/tab1/child2" component={Tab1Child2} exact />
         <Redirect from="/tabs" to="/tabs/tab1" exact />
       </IonRouterOutlet>
       <IonTabBar slot="bottom">
@@ -71,7 +72,26 @@ const Tab1Child1 = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent>
+        Tab 1 Child 1
+        <IonButton routerLink="/tabs/tab1/child2" id="child-two">Go to Tab1Child2</IonButton>
+      </IonContent>
+    </IonPage>
+  );
+};
 
+const Tab1Child2 = () => {
+  return (
+    <IonPage data-pageid="tab1child2">
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton />
+          </IonButtons>
+          <IonTitle>Tab1</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        Tab 1 Child 2
       </IonContent>
     </IonPage>
   );