fix(react): adding custom history to IonReactRouter, closes #20297

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

@@ -1,15 +1,21 @@
-import { Action as HistoryAction, Location as HistoryLocation, createHashHistory as createHistory } from 'history';
+import { Action as HistoryAction, History, Location as HistoryLocation, createHashHistory as createHistory } from 'history';
 import React from 'react';
 import { BrowserRouterProps, Router } from 'react-router-dom';
 
 import { IonRouter } from './IonRouter';
 
-export class IonReactHashRouter extends React.Component<BrowserRouterProps> {
-  history = createHistory(this.props);
+interface IonReactHashRouterProps<THistoryLocationState = History.PoorMansUnknown> extends BrowserRouterProps {
+  history?: History<THistoryLocationState>;
+}
+
+export class IonReactHashRouter extends React.Component<IonReactHashRouterProps> {
+  history: History<History.PoorMansUnknown>;
   historyListenHandler?: ((location: HistoryLocation, action: HistoryAction) => void);
 
-  constructor(props: BrowserRouterProps) {
+  constructor(props: IonReactHashRouterProps) {
     super(props);
+    const { history, ...rest } = props;
+    this.history = history || createHistory(rest);
     this.history.listen(this.handleHistoryChange.bind(this));
     this.registerHistoryListener = this.registerHistoryListener.bind(this);
   }

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

@@ -1,15 +1,22 @@
-import { Action as HistoryAction, Location as HistoryLocation, createBrowserHistory as createHistory } from 'history';
+import { Action as HistoryAction, History, Location as HistoryLocation, createBrowserHistory as createHistory } from 'history';
 import React from 'react';
 import { BrowserRouterProps, Router } from 'react-router-dom';
 
 import { IonRouter } from './IonRouter';
 
-export class IonReactRouter extends React.Component<BrowserRouterProps> {
-  history = createHistory(this.props);
+interface IonReactRouterProps<THistoryLocationState = History.PoorMansUnknown> extends BrowserRouterProps {
+  history?: History<THistoryLocationState>;
+}
+
+export class IonReactRouter extends React.Component<IonReactRouterProps> {
+
   historyListenHandler?: ((location: HistoryLocation, action: HistoryAction) => void);
+  history: History<History.PoorMansUnknown>;
 
-  constructor(props: BrowserRouterProps) {
+  constructor(props: IonReactRouterProps) {
     super(props);
+    const { history, ...rest } = props;
+    this.history = history || createHistory(rest);
     this.history.listen(this.handleHistoryChange.bind(this));
     this.registerHistoryListener = this.registerHistoryListener.bind(this);
   }

packages/react-router/test-app/cypress/integration/tab-context.js

@@ -1,6 +1,6 @@
 const port = 3000;
 
-describe.only('Tab Context', () => {
+describe('Tab Context', () => {
   /*
     This spec tests the IonTabsContext API
   */

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

@@ -38,7 +38,6 @@ const App: React.FC = () => {
   return (
     <IonApp>
       <IonReactRouter>
-
         <Route path="/" component={Main} exact />
         <Route path="/routing" component={Routing} />
         <Route path="/dynamic-routes" component={DynamicRoutes} />
@@ -48,7 +47,6 @@ const App: React.FC = () => {
         <Route path="/nested-outlet2" component={NestedOutlet2} />
         <Route path="/replace-action" component={ReplaceAction} />
         <Route path="/tab-context" component={TabsContext} />
-
       </IonReactRouter>
     </IonApp>
   );