fix(react): adding HashRouter to available ion routers, fixes #19621 (#19683)

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { HashRouter, HashRouterProps } from 'react-router-dom';
+
+import { RouteManagerWithRouter } from './Router';
+
+export const IonReactHashRouter = /*@__PURE__*/ (() => class IonReactHashRouterInternal extends React.Component<HashRouterProps> {
+  render() {
+    console.log('hash router in your bundle!!!');
+    const { children, ...props } = this.props;
+    return (
+      <HashRouter {...props}>
+        <RouteManagerWithRouter>{children}</RouteManagerWithRouter>
+      </HashRouter>
+    );
+  }
+})();

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BrowserRouter, BrowserRouterProps } from 'react-router-dom';
+
+import { RouteManagerWithRouter } from './Router';
+
+export const IonReactRouter = /*@__PURE__*/ (() => class IonReactRouterInternal extends React.Component<BrowserRouterProps> {
+  render() {
+    const { children, ...props } = this.props;
+    return (
+      <BrowserRouter {...props}>
+        <RouteManagerWithRouter>{children}</RouteManagerWithRouter>
+      </BrowserRouter>
+    );
+  }
+})();

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

@@ -15,6 +15,7 @@ interface NavManagerProps extends RouteComponentProps {
   findViewInfoByLocation: (location: HistoryLocation) => { view?: ViewItem, viewStack?: ViewStack };
   findViewInfoById: (id: string) => { view?: ViewItem, viewStack?: ViewStack };
   getActiveIonPage: () => { view?: ViewItem, viewStack?: ViewStack };
+  onNavigate: (type: 'push' | 'replace', path: string, state?: any) => void;
 }
 
 export class NavManager extends React.Component<NavManagerProps, NavContextState> {
@@ -27,8 +28,6 @@ export class NavManager extends React.Component<NavManagerProps, NavContextState
     this.state = {
       goBack: this.goBack.bind(this),
       hasIonicRouter: () => true,
-      getHistory: this.getHistory.bind(this),
-      getLocation: this.getLocation.bind(this),
       navigate: this.navigate.bind(this),
       getStackManager: this.getStackManager.bind(this),
       getPageManager: this.getPageManager.bind(this),
@@ -66,36 +65,28 @@ export class NavManager extends React.Component<NavManagerProps, NavContextState
       if (enteringView) {
         const lastLocation = this.locationHistory.findLastLocation(enteringView.routeData.match.url);
         if (lastLocation) {
-          this.props.history.replace(lastLocation.pathname + lastLocation.search, { direction: 'back' });
+          this.props.onNavigate('replace', lastLocation.pathname + lastLocation.search, 'back');
         } else {
-          this.props.history.replace(enteringView.routeData.match.url, { direction: 'back' });
+          this.props.onNavigate('replace', enteringView.routeData.match.url, 'back');
         }
       } else {
         if (defaultHref) {
-          this.props.history.replace(defaultHref, { direction: 'back' });
+          this.props.onNavigate('replace', defaultHref, 'back');
         }
       }
     } else {
       if (defaultHref) {
-        this.props.history.replace(defaultHref, { direction: 'back' });
+        this.props.onNavigate('replace', defaultHref, 'back');
       }
     }
   }
 
-  getHistory() {
-    return this.props.history as any;
-  }
-
-  getLocation() {
-    return this.props.location as any;
-  }
-
   navigate(path: string, direction?: RouterDirection | 'none') {
-    this.props.history.push(path, { direction });
+    this.props.onNavigate('push', path, direction);
   }
 
-  tabNavigate(url: string) {
+  tabNavigate(path: string) {
-    this.props.history.replace(url, { direction: 'back' });
+    this.props.onNavigate('replace', path, 'back');
   }
 
   getPageManager() {

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

@@ -2,7 +2,7 @@ import { NavDirection } from '@ionic/core';
 import { RouterDirection } from '@ionic/react';
 import { Action as HistoryAction, Location as HistoryLocation, UnregisterCallback } from 'history';
 import React from 'react';
-import { BrowserRouter, BrowserRouterProps, RouteComponentProps, matchPath, withRouter } from 'react-router-dom';
+import { RouteComponentProps, matchPath, withRouter } from 'react-router-dom';
 
 import { generateId } from '../utils';
 
@@ -20,10 +20,12 @@ interface RouteManagerState extends RouteManagerContextState {
 class RouteManager extends React.Component<RouteComponentProps, RouteManagerState> {
   listenUnregisterCallback: UnregisterCallback | undefined;
   activeIonPageId?: string;
+  currentDirection?: RouterDirection;
 
   constructor(props: RouteComponentProps) {
     super(props);
     this.listenUnregisterCallback = this.props.history.listen(this.historyChange.bind(this));
+    this.handleNavigate = this.handleNavigate.bind(this);
     this.state = {
       viewStacks: new ViewStacks(),
       hideView: this.hideView.bind(this),
@@ -57,6 +59,8 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
   }
 
   historyChange(location: HistoryLocation, action: HistoryAction) {
+    location.state = location.state || { direction: this.currentDirection };
+    this.currentDirection = undefined;
     this.setState({
       location,
       action
@@ -65,7 +69,7 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
 
   setActiveView(location: HistoryLocation, action: HistoryAction) {
     const viewStacks = Object.assign(new ViewStacks(), this.state.viewStacks);
-    let direction: RouterDirection = location.state && location.state.direction || 'forward';
+    let direction: RouterDirection = (location.state && location.state.direction) || 'forward';
     let leavingView: ViewItem | undefined;
     const viewStackKeys = viewStacks.getKeys();
 
@@ -120,7 +124,6 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
       if (enteringView && viewStack) {
         const enteringEl = enteringView.ionPageElement ? enteringView.ionPageElement : undefined;
         const leavingEl = leavingView && leavingView.ionPageElement ? leavingView.ionPageElement : undefined;
-
         if (enteringEl) {
           // Don't animate from an empty view
           const navDirection = leavingEl && leavingEl.innerHTML === '' ? undefined : direction === 'none' ? undefined : direction;
@@ -266,11 +269,21 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
     }
   }
 
+  handleNavigate(type: 'push' | 'replace', path: string, direction?: RouterDirection) {
+    this.currentDirection = direction;
+    if (type === 'push') {
+      this.props.history.push(path);
+    } else {
+      this.props.history.replace(path);
+    }
+  }
+
   render() {
     return (
       <RouteManagerContext.Provider value={this.state}>
         <NavManager
           {...this.props}
+          onNavigate={this.handleNavigate}
           findViewInfoById={(id: string) => this.state.viewStacks.findViewInfoById(id)}
           findViewInfoByLocation={(location: HistoryLocation) => this.state.viewStacks.findViewInfoByLocation(location)}
           getActiveIonPage={() => this.state.viewStacks.findViewInfoById(this.activeIonPageId)}
@@ -282,16 +295,5 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
   }
 }
 
-const RouteManagerWithRouter = withRouter(RouteManager);
+export const RouteManagerWithRouter = withRouter(RouteManager);
 RouteManagerWithRouter.displayName = 'RouteManager';
-
-export class IonReactRouter extends React.Component<BrowserRouterProps> {
-  render() {
-    const { children, ...props } = this.props;
-    return (
-      <BrowserRouter {...props}>
-        <RouteManagerWithRouter>{children}</RouteManagerWithRouter>
-      </BrowserRouter>
-    );
-  }
-}

packages/react-router/src/ReactRouter/index.ts

@@ -1,2 +1,2 @@
-
+export { IonReactRouter } from './IonReactRouter';
-export { IonReactRouter } from './Router';
+export { IonReactHashRouter } from './IonReactHashRouter';

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

@@ -72,7 +72,7 @@ const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component<Pro
       if (this.context.hasIonicRouter()) {
         this.context.tabNavigate(originalHref);
       } else {
-        this.context.navigate(originalHref, 'back');
+      this.context.navigate(originalHref, 'back');
       }
     } else {
       this.context.navigate(this.state.tabs[e.detail.tab].currentHref, 'none');

packages/react/src/contexts/NavContext.ts

@@ -2,8 +2,6 @@ import { RouterDirection } from '@ionic/core';
 import React from 'react';
 
 export interface NavContextState {
-  getHistory: () => History;
-  getLocation: () => Location;
   getPageManager: () => any;
   getStackManager: () => any;
   goBack: (defaultHref?: string) => void;
@@ -15,8 +13,6 @@ export interface NavContextState {
 }
 
 export const NavContext = /*@__PURE__*/React.createContext<NavContextState>({
-  getHistory: () => window.history,
-  getLocation: () => window.location,
   getPageManager: () => undefined,
   getStackManager: () => undefined,
   goBack: (defaultHref?: string) => {