fix(react): support history@5 in preparation for react router 6 (#23297)

resolves #23294

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

@@ -25,9 +25,19 @@ export class IonReactHashRouter extends React.Component<IonReactHashRouterProps>
     this.registerHistoryListener = this.registerHistoryListener.bind(this);
   }
 
+  /**
+   * history@4.x passes separate location and action
+   * params. history@5.x passes location and action
+   * together as a single object.
+   * TODO: If support for React Router <=5 is dropped
+   * this logic is no longer needed. We can just assume
+   * a single object with both location and action.
+   */
   handleHistoryChange(location: HistoryLocation, action: HistoryAction) {
+    const locationValue = (location as any).location || location;
+    const actionValue = (location as any).action || action;
     if (this.historyListenHandler) {
-      this.historyListenHandler(location, action);
+      this.historyListenHandler(locationValue, actionValue);
     }
   }
 

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

@@ -19,9 +19,19 @@ export class IonReactMemoryRouter extends React.Component<IonReactMemoryRouterPr
     this.registerHistoryListener = this.registerHistoryListener.bind(this);
   }
 
+  /**
+   * history@4.x passes separate location and action
+   * params. history@5.x passes location and action
+   * together as a single object.
+   * TODO: If support for React Router <=5 is dropped
+   * this logic is no longer needed. We can just assume
+   * a single object with both location and action.
+   */
   handleHistoryChange(location: HistoryLocation, action: HistoryAction) {
+    const locationValue = (location as any).location || location;
+    const actionValue = (location as any).action || action;
     if (this.historyListenHandler) {
-      this.historyListenHandler(location, action);
+      this.historyListenHandler(locationValue, actionValue);
     }
   }
 

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

@@ -25,11 +25,21 @@ export class IonReactRouter extends React.Component<IonReactRouterProps> {
     this.registerHistoryListener = this.registerHistoryListener.bind(this);
   }
 
+ /**
+  * history@4.x passes separate location and action
+  * params. history@5.x passes location and action
+  * together as a single object.
+  * TODO: If support for React Router <=5 is dropped
+  * this logic is no longer needed. We can just assume
+  * a single object with both location and action.
+  */
   handleHistoryChange(location: HistoryLocation, action: HistoryAction) {
-    if (this.historyListenHandler) {
-      this.historyListenHandler(location, action);
-    }
-  }
+   const locationValue = (location as any).location || location;
+   const actionValue = (location as any).action || action;
+   if (this.historyListenHandler) {
+     this.historyListenHandler(locationValue, actionValue);
+   }
+ }
 
   registerHistoryListener(cb: (location: HistoryLocation, action: HistoryAction) => void) {
     this.historyListenHandler = cb;

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

@@ -203,8 +203,16 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
     this.incomingRouteParams = undefined;
   }
 
+  /**
+   * history@4.x uses goBack(), history@5.x uses back()
+   * TODO: If support for React Router <=5 is dropped
+   * this logic is no longer needed. We can just
+   * assume back() is available.
+   */
   handleNativeBack() {
-    this.props.history.goBack();
+    const history = this.props.history as any;
+    const goBack = history.goBack || history.back;
+    goBack();
   }
 
   handleNavigate(
@@ -256,7 +264,15 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
             routeInfo.tab === '' && prevInfo.tab === ''
           )
         ) {
-          this.props.history.goBack();
+          /**
+           * history@4.x uses goBack(), history@5.x uses back()
+           * TODO: If support for React Router <=5 is dropped
+           * this logic is no longer needed. We can just
+           * assume back() is available.
+           */
+          const history = this.props.history as any;
+          const goBack = history.goBack || history.back;
+          goBack();
         } else {
           this.handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back');
         }