chore: this is a trashy commit

This commit does a lot to try and meld the v6 migration to work against the test app. The introduction of `<Routes>` component from react-router means much of the logic around querying the `<Route>` as the direct child of the outlet and also cloning the element, leads to a broken experience. This commit tries to handle that requirement. Additional discovery will try to uncover if we can move the `<Routes>` inside of the outlet so the developer doesn't need to specify it when upgrading (and perhaps can simplify how we query the nodes).
2026-03-13 10:22:08 +08:00 · 2023-06-29 15:56:01 -04:00
parent faa553faf9
commit 7236dabdce
13 changed files with 418 additions and 493 deletions
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -17,14 +17,14 @@
        "@ionic/prettier-config": "^2.0.0",
        "@rollup/plugin-node-resolve": "^8.1.0",
        "@types/node": "^14.0.14",
-        "@types/react": "16.14.0",
-        "@types/react-dom": "^16.9.0",
+        "@types/react": "^17.0.0",
+        "@types/react-dom": "^17.0.0",
        "@typescript-eslint/eslint-plugin": "^5.48.2",
        "@typescript-eslint/parser": "^5.48.2",
        "eslint": "^7.32.0",
        "prettier": "^2.8.3",
-        "react": "^16.9.0",
-        "react-dom": "^16.9.0",
+        "react": "^17.0.0",
+        "react-dom": "^17.0.0",
        "react-router": "^6.0.0",
        "react-router-dom": "^6.0.0",
        "rimraf": "^3.0.2",
@@ -35,8 +35,8 @@
      "peerDependencies": {
        "react": ">=16.8.6",
        "react-dom": ">=16.8.6",
-        "react-router": "^5.0.1 || ^6.0.0",
-        "react-router-dom": "^5.0.1 || ^6.0.0"
+        "react-router": "^6.0.0",
+        "react-router-dom": "^6.0.0"
      }
    },
    "node_modules/@babel/code-frame": {
@@ -521,20 +521,23 @@
      "license": "MIT"
    },
    "node_modules/@types/react": {
-      "version": "16.14.0",
+      "version": "17.0.44",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.44.tgz",
+      "integrity": "sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "@types/prop-types": "*",
+        "@types/scheduler": "*",
        "csstype": "^3.0.2"
      }
    },
    "node_modules/@types/react-dom": {
-      "version": "16.9.14",
+      "version": "17.0.20",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.20.tgz",
+      "integrity": "sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
-        "@types/react": "^16"
+        "@types/react": "^17"
      }
    },
    "node_modules/@types/resolve": {
@@ -545,6 +548,12 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
+      "dev": true
+    },
    "node_modules/@types/semver": {
      "version": "7.3.13",
      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
@@ -2720,15 +2729,6 @@
        "node": ">=0.4.0"
      }
    },
-    "node_modules/prop-types": {
-      "version": "15.7.2",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.8.1"
-      }
-    },
    "node_modules/punycode": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.2.0.tgz",
@@ -2759,34 +2759,30 @@
      ]
    },
    "node_modules/react": {
-      "version": "16.14.0",
-      "license": "MIT",
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
      "dependencies": {
        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
+        "object-assign": "^4.1.1"
      },
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/react-dom": {
-      "version": "16.14.0",
-      "license": "MIT",
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
      "dependencies": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
+        "scheduler": "^0.20.2"
      },
      "peerDependencies": {
-        "react": "^16.14.0"
+        "react": "17.0.2"
      }
    },
-    "node_modules/react-is": {
-      "version": "16.13.1",
-      "license": "MIT"
-    },
    "node_modules/react-router": {
      "version": "6.14.0",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.0.tgz",
@@ -2980,8 +2976,9 @@
      }
    },
    "node_modules/scheduler": {
-      "version": "0.19.1",
-      "license": "MIT",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
      "dependencies": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1"
@@ -3767,18 +3764,23 @@
      "dev": true
    },
    "@types/react": {
-      "version": "16.14.0",
+      "version": "17.0.44",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.44.tgz",
+      "integrity": "sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==",
      "dev": true,
      "requires": {
        "@types/prop-types": "*",
+        "@types/scheduler": "*",
        "csstype": "^3.0.2"
      }
    },
    "@types/react-dom": {
-      "version": "16.9.14",
+      "version": "17.0.20",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.20.tgz",
+      "integrity": "sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==",
      "dev": true,
      "requires": {
-        "@types/react": "^16"
+        "@types/react": "^17"
      }
    },
    "@types/resolve": {
@@ -3788,6 +3790,12 @@
        "@types/node": "*"
      }
    },
+    "@types/scheduler": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
+      "dev": true
+    },
    "@types/semver": {
      "version": "7.3.13",
      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
@@ -5304,14 +5312,6 @@
      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
      "dev": true
    },
-    "prop-types": {
-      "version": "15.7.2",
-      "requires": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.8.1"
-      }
-    },
    "punycode": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.2.0.tgz",
@@ -5325,25 +5325,24 @@
      "dev": true
    },
    "react": {
-      "version": "16.14.0",
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
      "requires": {
        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
+        "object-assign": "^4.1.1"
      }
    },
    "react-dom": {
-      "version": "16.14.0",
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
+        "scheduler": "^0.20.2"
      }
    },
-    "react-is": {
-      "version": "16.13.1"
-    },
    "react-router": {
      "version": "6.14.0",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.0.tgz",
@@ -5452,7 +5451,9 @@
      }
    },
    "scheduler": {
-      "version": "0.19.1",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1"
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -43,22 +43,22 @@
  "peerDependencies": {
    "react": ">=16.8.6",
    "react-dom": ">=16.8.6",
-    "react-router": "^5.0.1 || ^6.0.0",
-    "react-router-dom": "^5.0.1 || ^6.0.0"
+    "react-router": "^6.0.0",
+    "react-router-dom": "^6.0.0"
  },
  "devDependencies": {
    "@ionic/eslint-config": "^0.3.0",
    "@ionic/prettier-config": "^2.0.0",
    "@rollup/plugin-node-resolve": "^8.1.0",
    "@types/node": "^14.0.14",
-    "@types/react": "16.14.0",
-    "@types/react-dom": "^16.9.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
    "@typescript-eslint/eslint-plugin": "^5.48.2",
    "@typescript-eslint/parser": "^5.48.2",
    "eslint": "^7.32.0",
    "prettier": "^2.8.3",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
    "react-router": "^6.0.0",
    "react-router-dom": "^6.0.0",
    "rimraf": "^3.0.2",
--- a/packages/react-router/src/ReactRouter/IonReactRouter.tsx
+++ b/packages/react-router/src/ReactRouter/IonReactRouter.tsx
@@ -1,14 +1,18 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-import type { RouterProps } from 'react-router-dom';
-import { Router } from 'react-router-dom';
+import type { BrowserRouterProps } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';

 import { IonRouter } from './IonRouter';

-export function IonReactRouter({ children, ...props }: PropsWithChildren<RouterProps>) {
+/**
+ * Wrapper around react-router-dom's BrowserRouter that provides a context for IonRouterOutlet.
+ * Ionic developers should use IonReactRouter instead of BrowserRouter when using React Router.
+ */
+export function IonReactRouter({ children, ...props }: PropsWithChildren<BrowserRouterProps>) {
  return (
-    <Router {...props}>
+    <BrowserRouter {...props}>
      <IonRouter>{children}</IonRouter>
-    </Router>
+    </BrowserRouter>
  );
 }
--- a/packages/react-router/src/ReactRouter/IonRouter.tsx
+++ b/packages/react-router/src/ReactRouter/IonRouter.tsx
@@ -22,21 +22,17 @@ function IonRouterInner(props: PropsWithChildren<any>) {

  const [currentTab, setCurrentTab] = useState<string>();
  const [incomingRouteParams, setIncomingRouteParams] = useState<Partial<RouteInfo>>({});
-  const [routeInfo, setRouteInfo] = useState<any>(null);
+  const [routeInfo, setRouteInfo] = useState({
+    id: generateId('routeInfo'),
+    pathname: location.pathname,
+    search: location.search,
+  });
  const locationHistory = useRef(new LocationHistory());

  const viewStack = useRef(new ReactRouterViewStack());

  useEffect(() => {
-    const routeInfo = {
-      id: generateId('routeInfo'),
-      pathname: location.pathname,
-      search: location.search,
-    };
-
    locationHistory.current.add(routeInfo);
-
-    setRouteInfo(routeInfo);
  }, []);

  useEffect(() => {
@@ -180,10 +176,10 @@ function IonRouterInner(props: PropsWithChildren<any>) {
        }
        locationHistory.current.add(routeInfo);
      }
-      // setState({ routeInfo });
+      setRouteInfo(routeInfo);
    }

-    setIncomingRouteParams({}); // TODO @sean was undefined
+    setIncomingRouteParams({});
  };

  const handleNativeBack = () => {
--- a/packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx
+++ b/packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx
@@ -1,7 +1,7 @@
 import type { RouteInfo, ViewItem } from '@ionic/react';
 import { IonRoute, ViewLifeCycleManager, ViewStacks, generateId } from '@ionic/react';
 import React from 'react';
-import { matchPath } from 'react-router';
+import { Route, Routes, matchPath } from 'react-router';

 export class ReactRouterViewStack extends ViewStacks {
  constructor() {
@@ -23,13 +23,11 @@ export class ReactRouterViewStack extends ViewStacks {
      ionRoute: false,
    };

-    const matchProps = {
-      exact: reactElement.props.exact,
-      path: reactElement.props.path || reactElement.props.from,
-      component: reactElement.props.component,
-    };
+    if (reactElement.type !== Route) {
+      console.warn('something is wrong, reactElement is not a Route', reactElement);
+    }

-    const match = matchPath(matchProps, routeInfo.pathname);
+    const match = matchPath(reactElement.props, routeInfo.pathname);

    if (reactElement.type === IonRoute) {
      viewItem.ionRoute = true;
@@ -47,8 +45,10 @@ export class ReactRouterViewStack extends ViewStacks {
  getChildrenToRender(outletId: string, ionRouterOutlet: React.ReactElement, routeInfo: RouteInfo) {
    const viewItems = this.getViewItemsForOutlet(outletId);

+    const routesNode = findRoutesNode(ionRouterOutlet.props.children);
+
    // Sync latest routes with viewItems
-    React.Children.forEach(ionRouterOutlet.props.children, (child: React.ReactElement) => {
+    React.Children.forEach(routesNode, (child: React.ReactElement) => {
      const viewItem = viewItems.find((v) => {
        return matchComponent(child, v.routeData.childProps.path || v.routeData.childProps.from);
      });
@@ -58,32 +58,8 @@ export class ReactRouterViewStack extends ViewStacks {
    });

    const children = viewItems.map((viewItem) => {
-      let clonedChild;
-      if (viewItem.ionRoute && !viewItem.disableIonPageManagement) {
-        clonedChild = (
-          <ViewLifeCycleManager
-            key={`view-${viewItem.id}`}
-            mount={viewItem.mount}
-            removeView={() => this.remove(viewItem)}
-          >
-            {React.cloneElement(viewItem.reactElement, {
-              computedMatch: viewItem.routeData.match,
-            })}
-          </ViewLifeCycleManager>
-        );
-      } else {
+      if (!viewItem.ionRoute || viewItem.disableIonPageManagement) {
        const match = matchComponent(viewItem.reactElement, routeInfo.pathname);
-        clonedChild = (
-          <ViewLifeCycleManager
-            key={`view-${viewItem.id}`}
-            mount={viewItem.mount}
-            removeView={() => this.remove(viewItem)}
-          >
-            {React.cloneElement(viewItem.reactElement, {
-              computedMatch: viewItem.routeData.match,
-            })}
-          </ViewLifeCycleManager>
-        );

        if (!match && viewItem.routeData.match) {
          viewItem.routeData.match = undefined;
@@ -91,6 +67,16 @@ export class ReactRouterViewStack extends ViewStacks {
        }
      }

+      const clonedChild = (
+        <ViewLifeCycleManager
+          key={`view-${viewItem.id}`}
+          mount={viewItem.mount}
+          removeView={() => this.remove(viewItem)}
+        >
+          <Routes>{React.cloneElement(viewItem.reactElement)}</Routes>
+        </ViewLifeCycleManager>
+      );
+
      return clonedChild;
    });
    return children;
@@ -140,10 +126,18 @@ export class ReactRouterViewStack extends ViewStacks {
      if (mustBeIonRoute && !v.ionRoute) {
        return false;
      }
+
+      if (pathname === undefined) {
+        // This wasn't needed in react router v5
+        // it is possible we are re-rendering or calling something too early.
+        return false;
+      }
+
      const matchProps = {
        exact: forceExact ? true : v.routeData.childProps.exact,
        path: v.routeData.childProps.path || v.routeData.childProps.from,
-        component: v.routeData.childProps.component,
+        // component: v.routeData.childProps.component, // TODO removed in v6
+        element: v.routeData.childProps.element,
      };
      const myMatch = matchPath(matchProps, pathname);
      if (myMatch) {
@@ -172,11 +166,25 @@ export class ReactRouterViewStack extends ViewStacks {
  }
 }

+const findRoutesNode = (node: React.ReactNode) => {
+  // Finds the <Routes /> component node
+  let routesNode: React.ReactNode;
+  React.Children.forEach(node as React.ReactElement, (child: React.ReactElement) => {
+    if (child.type === Routes) {
+      routesNode = child;
+    }
+  });
+  if (routesNode) {
+    return (routesNode as React.ReactElement).props.children;
+  }
+  return undefined;
+};
+
 function matchComponent(node: React.ReactElement, pathname: string, forceExact?: boolean) {
  const matchProps = {
    exact: forceExact ? true : node.props.exact,
    path: node.props.path || node.props.from,
-    component: node.props.component,
+    element: node.props.element,
  };
  const match = matchPath(matchProps, pathname);

--- a/packages/react-router/src/ReactRouter/StackManager.tsx
+++ b/packages/react-router/src/ReactRouter/StackManager.tsx
@@ -1,7 +1,7 @@
 import type { RouteInfo, StackContextState, ViewItem } from '@ionic/react';
 import { RouteManagerContext, StackContext, generateId, getConfig } from '@ionic/react';
 import React from 'react';
-import { matchPath } from 'react-router-dom';
+import { Route, Routes, matchPath } from 'react-router-dom';

 import { clonePageElement } from './clonePageElement';

@@ -430,17 +430,35 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa

 export default StackManager;

+const findRoutesNode = (node: React.ReactNode) => {
+  // Finds the <Routes /> component node
+  let routesNode: React.ReactNode;
+  React.Children.forEach(node as React.ReactElement, (child: React.ReactElement) => {
+    if (child.type === Routes) {
+      routesNode = child;
+    }
+  });
+  if (routesNode) {
+    return (routesNode as React.ReactElement).props.children;
+  }
+  return undefined;
+};
+
 function matchRoute(node: React.ReactNode, routeInfo: RouteInfo) {
  let matchedNode: React.ReactNode;
-  React.Children.forEach(node as React.ReactElement, (child: React.ReactElement) => {
-    const matchProps = {
-      exact: child.props.exact,
-      path: child.props.path || child.props.from,
-      component: child.props.component,
-    };
-    const match = matchPath(matchProps, routeInfo.pathname);
-    if (match) {
-      matchedNode = child;
+
+  const routesNode = findRoutesNode(node);
+
+  if (!routesNode) {
+    console.error('No <Routes /> component found in the stack');
+  }
+
+  React.Children.forEach(routesNode as React.ReactElement, (child: React.ReactElement) => {
+    if (child.type === Route) {
+      const match = matchPath(child.props, routeInfo.pathname);
+      if (match) {
+        matchedNode = child;
+      }
    }
  });

--- a/packages/react/src/components/IonRouterOutlet.tsx
+++ b/packages/react/src/components/IonRouterOutlet.tsx
@@ -1,5 +1,6 @@
 import type { JSX as LocalJSX } from '@ionic/core/components';
-import React from 'react';
+import type { PropsWithChildren } from 'react';
+import React, { useContext } from 'react';

 import { NavContext } from '../contexts/NavContext';
 import OutletPageManager from '../routing/OutletPageManager';
@@ -18,43 +19,70 @@ interface InternalProps extends Props {
  forwardedRef?: React.ForwardedRef<HTMLIonRouterOutletElement>;
 }

-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface InternalState {}
+const IonRouterOutletContainer = (props: PropsWithChildren<InternalProps>) => {
+  const { hasIonicRouter, routeInfo, getStackManager } = useContext(NavContext);
+  const { children, forwardedRef, ...restProps } = props;

-class IonRouterOutletContainer extends React.Component<InternalProps, InternalState> {
-  context!: React.ContextType<typeof NavContext>;
+  if (hasIonicRouter()) {
+    const StackManager = getStackManager();

-  constructor(props: InternalProps) {
-    super(props);
-  }
-
-  render() {
-    const StackManager = this.context.getStackManager();
-    const { children, forwardedRef, ...props } = this.props;
-
-    return this.context.hasIonicRouter() ? (
-      props.ionPage ? (
-        <OutletPageManager StackManager={StackManager} routeInfo={this.context.routeInfo} {...props}>
+    if (restProps.ionPage) {
+      return (
+        <OutletPageManager StackManager={StackManager} routeInfo={routeInfo} {...restProps}>
          {children}
        </OutletPageManager>
-      ) : (
-        <StackManager routeInfo={this.context.routeInfo}>
-          <IonRouterOutletInner {...props} forwardedRef={forwardedRef}>
-            {children}
-          </IonRouterOutletInner>
-        </StackManager>
-      )
-    ) : (
-      <IonRouterOutletInner ref={forwardedRef} {...this.props}>
-        {this.props.children}
-      </IonRouterOutletInner>
+      );
+    }
+    return (
+      <StackManager routeInfo={routeInfo}>
+        <IonRouterOutletInner {...restProps} forwardedRef={forwardedRef}>
+          {children}
+        </IonRouterOutletInner>
+      </StackManager>
    );
  }

-  static get contextType() {
-    return NavContext;
-  }
-}
+  return (
+    <IonRouterOutletInner ref={forwardedRef} {...restProps}>
+      {children}
+    </IonRouterOutletInner>
+  );
+};
+
+// class IonRouterOutletContainer extends React.Component<InternalProps, InternalState> {
+//   context!: React.ContextType<typeof NavContext>;
+
+//   constructor(props: InternalProps) {
+//     super(props);
+//   }
+
+//   render() {
+//     const StackManager = this.context.getStackManager();
+//     const { children, forwardedRef, ...props } = this.props;
+
+//     return this.context.hasIonicRouter() ? (
+//       props.ionPage ? (
+//         <OutletPageManager StackManager={StackManager} routeInfo={this.context.routeInfo} {...props}>
+//           {children}
+//         </OutletPageManager>
+//       ) : (
+//         <StackManager routeInfo={this.context.routeInfo}>
+//           <IonRouterOutletInner {...props} forwardedRef={forwardedRef}>
+//             {children}
+//           </IonRouterOutletInner>
+//         </StackManager>
+//       )
+//     ) : (
+//       <IonRouterOutletInner ref={forwardedRef} {...this.props}>
+//         {this.props.children}
+//       </IonRouterOutletInner>
+//     );
+//   }
+
+//   static get contextType() {
+//     return NavContext;
+//   }
+// }

 export const IonRouterOutlet = createForwardRef<Props & IonicReactProps, HTMLIonRouterOutletElement>(
  IonRouterOutletContainer,
--- a/packages/react/test/apps/react18/package-lock.json
+++ b/packages/react/test/apps/react18/package-lock.json
@@ -8,17 +8,15 @@
      "name": "test-app",
      "version": "0.0.1",
      "dependencies": {
-        "@ionic/react": "^6.6.1",
-        "@ionic/react-router": "^6.6.1",
+        "@ionic/react": "^7.0.0",
+        "@ionic/react-router": "^7.0.0",
        "@types/react": "^18.0.28",
        "@types/react-dom": "^18.0.11",
-        "@types/react-router": "^5.1.20",
-        "@types/react-router-dom": "^5.3.3",
        "ionicons": "^6.0.4",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
-        "react-router": "^5.3.4",
-        "react-router-dom": "^5.3.4",
+        "react-router": "^6.0.0",
+        "react-router-dom": "^6.0.0",
        "react-scripts": "^5.0.0",
        "typescript": "^4.1.3"
      },
@@ -33,6 +31,9 @@
        "serve": "^14.0.1",
        "wait-on": "^6.0.0",
        "webpack-cli": "^4.9.1"
+      },
+      "engines": {
+        "node": ">= 16"
      }
    },
    "node_modules/@adobe/css-tools": {
@@ -2367,22 +2368,54 @@
      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
    },
    "node_modules/@ionic/core": {
-      "version": "6.6.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.6.1.tgz",
-      "integrity": "sha512-+LMBk7kUX55rvYQ35AiAXPNzbNm3zNx9ginvuCzByguMjl+N63lpdPzIEfeRURkmq7NByD1VqpodMj5c6Oq2KQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.1.tgz",
+      "integrity": "sha512-5tdOSUiAkAfCtaP94ADugRskVxdwjRl+lRmOQnInkHnbUmA9eo2sCLCAO2UHfSL6VCP8BOw41NGlz4ad+Ivijw==",
      "dependencies": {
-        "@stencil/core": "^2.18.0",
-        "ionicons": "^6.1.3",
+        "@stencil/core": "^3.4.0",
+        "ionicons": "7.1.0",
        "tslib": "^2.1.0"
      }
    },
-    "node_modules/@ionic/react": {
-      "version": "6.6.1",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.6.1.tgz",
-      "integrity": "sha512-gq8FzC0CAPt6MpOFethe9+zIU7jg1JyWPWRANJ/UudlF05f2eFOzLgqe/EH0uIIsuDjeoM50hrqfuvg6x2j3UQ==",
+    "node_modules/@ionic/core/node_modules/@stencil/core": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
+      "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=14.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
+    "node_modules/@ionic/core/node_modules/ionicons": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
+      "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
      "dependencies": {
-        "@ionic/core": "6.6.1",
-        "ionicons": "^6.1.3",
+        "@stencil/core": "^2.18.0"
+      }
+    },
+    "node_modules/@ionic/core/node_modules/ionicons/node_modules/@stencil/core": {
+      "version": "2.22.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz",
+      "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
+    "node_modules/@ionic/react": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.1.1.tgz",
+      "integrity": "sha512-XMuXtC6HZXf5dBHkfbH0qzTAbvT/cbC+A69NbtOWI9BzxJOUUM3QLhmO7DMfYEdKjAEAfJxQ1vi+iOrz9wQ5Pw==",
+      "dependencies": {
+        "@ionic/core": "7.1.1",
+        "ionicons": "^7.0.0",
        "tslib": "*"
      },
      "peerDependencies": {
@@ -2391,11 +2424,11 @@
      }
    },
    "node_modules/@ionic/react-router": {
-      "version": "6.6.1",
-      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-6.6.1.tgz",
-      "integrity": "sha512-9bHlz3MdzvkUyZ9QfxzcAGDtbRhZ7R5uMjm3UHvGhYS1Rdx4KIc8E5q31IQf7H6j2ULU9YcB7UeyW5ORxBX18Q==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.1.1.tgz",
+      "integrity": "sha512-ncu5nEmCDEvVf++4MpfrZKf+XDTBLa9IJyrPYpDYi/U3iaCdNLUwGYqKbY5Q78O69T/mjYh94fZg7gTbYM+/ZA==",
      "dependencies": {
-        "@ionic/react": "6.6.1",
+        "@ionic/react": "7.1.1",
        "tslib": "*"
      },
      "peerDependencies": {
@@ -2405,6 +2438,14 @@
        "react-router-dom": "^5.0.1"
      }
    },
+    "node_modules/@ionic/react/node_modules/ionicons": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.2.tgz",
+      "integrity": "sha512-zZ4njAqSP39H8RRvZhJvkHsv7cBjYE/VfInH218Osf2UVxJITSOutTTd25MW+tAXKN5fheYzclUXUsF55JHUDg==",
+      "dependencies": {
+        "@stencil/core": "^2.18.0"
+      }
+    },
    "node_modules/@istanbuljs/load-nyc-config": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -2957,6 +2998,14 @@
        "node": ">= 8"
      }
    },
+    "node_modules/@remix-run/router": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.0.tgz",
+      "integrity": "sha512-Eu1V3kz3mV0wUpVTiFHuaT8UD1gj/0VnoFHQYX35xlslQUpe8CuYoKFn9d4WZFHm3yDywz6ALZuGdnUPKrNeAw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
    "node_modules/@rollup/plugin-babel": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3541,11 +3590,6 @@
        "@types/node": "*"
      }
    },
-    "node_modules/@types/history": {
-      "version": "4.7.11",
-      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
-      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
-    },
    "node_modules/@types/html-minifier-terser": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -3658,25 +3702,6 @@
        "@types/react": "*"
      }
    },
-    "node_modules/@types/react-router": {
-      "version": "5.1.20",
-      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
-      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
-      "dependencies": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/react-router-dom": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
-      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
-      "dependencies": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*",
-        "@types/react-router": "*"
-      }
-    },
    "node_modules/@types/resolve": {
      "version": "1.17.1",
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -8977,32 +9002,6 @@
        "he": "bin/he"
      }
    },
-    "node_modules/history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
-      }
-    },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "node_modules/hoist-non-react-statics/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
    "node_modules/hoopy": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -9816,11 +9815,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-    },
    "node_modules/isexe": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -12349,14 +12343,6 @@
      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
    },
-    "node_modules/path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "dependencies": {
-        "isarray": "0.0.1"
-      }
-    },
    "node_modules/path-type": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -14054,46 +14040,35 @@
      }
    },
    "node_modules/react-router": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
-      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.0.tgz",
+      "integrity": "sha512-OD+vkrcGbvlwkspUFDgMzsu1RXwdjNh83YgG/28lBnDzgslhCgxIqoExLlxsfTpIygp7fc+Hd3esloNwzkm2xA==",
      "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "@remix-run/router": "1.7.0"
+      },
+      "engines": {
+        "node": ">=14"
      },
      "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8"
      }
    },
    "node_modules/react-router-dom": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
-      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.0.tgz",
+      "integrity": "sha512-YEwlApKwzMMMbGbhh+Q7MsloTldcwMgHxUY/1g0uA62+B1hZo2jsybCWIDCL8zvIDB1FA0pBKY9chHbZHt+2dQ==",
      "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.3.4",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "@remix-run/router": "1.7.0",
+        "react-router": "6.14.0"
+      },
+      "engines": {
+        "node": ">=14"
      },
      "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
      }
    },
-    "node_modules/react-router/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
    "node_modules/react-scripts": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -14466,11 +14441,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
    "node_modules/resolve-url-loader": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -15893,16 +15863,6 @@
      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
    },
-    "node_modules/tiny-invariant": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
-      "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
-    },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
    "node_modules/tmp": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -16328,11 +16288,6 @@
        "node": ">= 8"
      }
    },
-    "node_modules/value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
    "node_modules/vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -18924,31 +18879,63 @@
      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
    },
    "@ionic/core": {
-      "version": "6.6.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.6.1.tgz",
-      "integrity": "sha512-+LMBk7kUX55rvYQ35AiAXPNzbNm3zNx9ginvuCzByguMjl+N63lpdPzIEfeRURkmq7NByD1VqpodMj5c6Oq2KQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.1.tgz",
+      "integrity": "sha512-5tdOSUiAkAfCtaP94ADugRskVxdwjRl+lRmOQnInkHnbUmA9eo2sCLCAO2UHfSL6VCP8BOw41NGlz4ad+Ivijw==",
      "requires": {
-        "@stencil/core": "^2.18.0",
-        "ionicons": "^6.1.3",
+        "@stencil/core": "^3.4.0",
+        "ionicons": "7.1.0",
        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@stencil/core": {
+          "version": "3.4.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
+          "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g=="
+        },
+        "ionicons": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
+          "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
+          "requires": {
+            "@stencil/core": "^2.18.0"
+          },
+          "dependencies": {
+            "@stencil/core": {
+              "version": "2.22.3",
+              "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz",
+              "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng=="
+            }
+          }
+        }
      }
    },
    "@ionic/react": {
-      "version": "6.6.1",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.6.1.tgz",
-      "integrity": "sha512-gq8FzC0CAPt6MpOFethe9+zIU7jg1JyWPWRANJ/UudlF05f2eFOzLgqe/EH0uIIsuDjeoM50hrqfuvg6x2j3UQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.1.1.tgz",
+      "integrity": "sha512-XMuXtC6HZXf5dBHkfbH0qzTAbvT/cbC+A69NbtOWI9BzxJOUUM3QLhmO7DMfYEdKjAEAfJxQ1vi+iOrz9wQ5Pw==",
      "requires": {
-        "@ionic/core": "6.6.1",
-        "ionicons": "^6.1.3",
+        "@ionic/core": "7.1.1",
+        "ionicons": "^7.0.0",
        "tslib": "*"
+      },
+      "dependencies": {
+        "ionicons": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.2.tgz",
+          "integrity": "sha512-zZ4njAqSP39H8RRvZhJvkHsv7cBjYE/VfInH218Osf2UVxJITSOutTTd25MW+tAXKN5fheYzclUXUsF55JHUDg==",
+          "requires": {
+            "@stencil/core": "^2.18.0"
+          }
+        }
      }
    },
    "@ionic/react-router": {
-      "version": "6.6.1",
-      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-6.6.1.tgz",
-      "integrity": "sha512-9bHlz3MdzvkUyZ9QfxzcAGDtbRhZ7R5uMjm3UHvGhYS1Rdx4KIc8E5q31IQf7H6j2ULU9YcB7UeyW5ORxBX18Q==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.1.1.tgz",
+      "integrity": "sha512-ncu5nEmCDEvVf++4MpfrZKf+XDTBLa9IJyrPYpDYi/U3iaCdNLUwGYqKbY5Q78O69T/mjYh94fZg7gTbYM+/ZA==",
      "requires": {
-        "@ionic/react": "6.6.1",
+        "@ionic/react": "7.1.1",
        "tslib": "*"
      }
    },
@@ -19357,6 +19344,11 @@
        }
      }
    },
+    "@remix-run/router": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.0.tgz",
+      "integrity": "sha512-Eu1V3kz3mV0wUpVTiFHuaT8UD1gj/0VnoFHQYX35xlslQUpe8CuYoKFn9d4WZFHm3yDywz6ALZuGdnUPKrNeAw=="
+    },
    "@rollup/plugin-babel": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -19779,11 +19771,6 @@
        "@types/node": "*"
      }
    },
-    "@types/history": {
-      "version": "4.7.11",
-      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
-      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
-    },
    "@types/html-minifier-terser": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -19896,25 +19883,6 @@
        "@types/react": "*"
      }
    },
-    "@types/react-router": {
-      "version": "5.1.20",
-      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
-      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
-      "requires": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*"
-      }
-    },
-    "@types/react-router-dom": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
-      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
-      "requires": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*",
-        "@types/react-router": "*"
-      }
-    },
    "@types/resolve": {
      "version": "1.17.1",
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -23784,34 +23752,6 @@
      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
    },
-    "history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
-      }
-    },
-    "hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "requires": {
-        "react-is": "^16.7.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        }
-      }
-    },
    "hoopy": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -24364,11 +24304,6 @@
        "is-docker": "^2.0.0"
      }
    },
-    "isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-    },
    "isexe": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -26251,14 +26186,6 @@
      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
    },
-    "path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "requires": {
-        "isarray": "0.0.1"
-      }
-    },
    "path-type": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -27341,40 +27268,20 @@
      "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
    },
    "react-router": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
-      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.0.tgz",
+      "integrity": "sha512-OD+vkrcGbvlwkspUFDgMzsu1RXwdjNh83YgG/28lBnDzgslhCgxIqoExLlxsfTpIygp7fc+Hd3esloNwzkm2xA==",
      "requires": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        }
+        "@remix-run/router": "1.7.0"
      }
    },
    "react-router-dom": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
-      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.0.tgz",
+      "integrity": "sha512-YEwlApKwzMMMbGbhh+Q7MsloTldcwMgHxUY/1g0uA62+B1hZo2jsybCWIDCL8zvIDB1FA0pBKY9chHbZHt+2dQ==",
      "requires": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.3.4",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "@remix-run/router": "1.7.0",
+        "react-router": "6.14.0"
      }
    },
    "react-scripts": {
@@ -27669,11 +27576,6 @@
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
    },
-    "resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
    "resolve-url-loader": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -28734,16 +28636,6 @@
      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
    },
-    "tiny-invariant": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
-      "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
-    },
-    "tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
    "tmp": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -29068,11 +28960,6 @@
        }
      }
    },
-    "value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
    "vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
--- a/packages/react/test/apps/react18/package.json
+++ b/packages/react/test/apps/react18/package.json
@@ -3,17 +3,15 @@
  "version": "0.0.1",
  "private": true,
  "dependencies": {
-    "@ionic/react": "^6.6.1",
-    "@ionic/react-router": "^6.6.1",
+    "@ionic/react": "^7.0.0",
+    "@ionic/react-router": "^7.0.0",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
-    "@types/react-router": "^5.1.20",
-    "@types/react-router-dom": "^5.3.3",
    "ionicons": "^6.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
-    "react-router": "^5.3.4",
-    "react-router-dom": "^5.3.4",
+    "react-router": "^6.0.0",
+    "react-router-dom": "^6.0.0",
    "react-scripts": "^5.0.0",
    "typescript": "^4.1.3"
  },
--- a/packages/react/test/base/src/App.tsx
+++ b/packages/react/test/base/src/App.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
 import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';

 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -21,18 +21,18 @@ import '@ionic/react/css/display.css';

 /* Theme variables */
 import './theme/variables.css';
-import Main from './pages/Main';
-import OverlayHooks from './pages/overlay-hooks/OverlayHooks';
-import OverlayComponents from './pages/overlay-components/OverlayComponents';
-import KeepContentsMounted from './pages/overlay-components/KeepContentsMounted';
-import Tabs from './pages/Tabs';
 import Icons from './pages/Icons';
+import Main from './pages/Main';
+import Tabs from './pages/Tabs';
 import NavComponent from './pages/navigation/NavComponent';
-import IonModalConditionalSibling from './pages/overlay-components/IonModalConditionalSibling';
 import IonModalConditional from './pages/overlay-components/IonModalConditional';
+import IonModalConditionalSibling from './pages/overlay-components/IonModalConditionalSibling';
 import IonModalDatetimeButton from './pages/overlay-components/IonModalDatetimeButton';
-import IonPopoverNested from './pages/overlay-components/IonPopoverNested';
 import IonModalMultipleChildren from './pages/overlay-components/IonModalMultipleChildren';
+import IonPopoverNested from './pages/overlay-components/IonPopoverNested';
+import KeepContentsMounted from './pages/overlay-components/KeepContentsMounted';
+import OverlayComponents from './pages/overlay-components/OverlayComponents';
+import OverlayHooks from './pages/overlay-hooks/OverlayHooks';

 setupIonicReact();

@@ -40,27 +40,20 @@ const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
-        <Route path="/" component={Main} />
-        <Route path="/overlay-hooks" component={OverlayHooks} />
-        <Route path="/overlay-components" component={OverlayComponents} />
-        <Route path="/overlay-components/nested-popover" component={IonPopoverNested} />
-        <Route
-          path="/overlay-components/modal-conditional-sibling"
-          component={IonModalConditionalSibling}
-        />
-        <Route path="/overlay-components/modal-conditional" component={IonModalConditional} />
-        <Route
-          path="/overlay-components/modal-datetime-button"
-          component={IonModalDatetimeButton}
-        />
-        <Route
-          path="/overlay-components/modal-multiple-children"
-          component={IonModalMultipleChildren}
-        />
-        <Route path="/keep-contents-mounted" component={KeepContentsMounted} />
-        <Route path="/navigation" component={NavComponent} />
-        <Route path="/tabs" component={Tabs} />
-        <Route path="/icons" component={Icons} />
+        <Routes>
+          <Route path="/" element={<Main />} />
+          <Route path="/overlay-hooks" element={<OverlayHooks />} />
+          <Route path="/overlay-components" element={<OverlayComponents />} />
+          <Route path="/overlay-components/nested-popover" element={<IonPopoverNested />} />
+          <Route path="/overlay-components/modal-conditional-sibling" element={<IonModalConditionalSibling />} />
+          <Route path="/overlay-components/modal-conditional" element={<IonModalConditional />} />
+          <Route path="/overlay-components/modal-datetime-button" element={<IonModalDatetimeButton />} />
+          <Route path="/overlay-components/modal-multiple-children" element={<IonModalMultipleChildren />} />
+          <Route path="/keep-contents-mounted" element={<KeepContentsMounted />} />
+          <Route path="/navigation" element={<NavComponent />} />
+          <Route path="/tabs" element={<Tabs />} />
+          <Route path="/icons" element={<Icons />} />
+        </Routes>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
--- a/packages/react/test/base/src/pages/Tabs.tsx
+++ b/packages/react/test/base/src/pages/Tabs.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
 import { IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
-import { Route, Redirect } from 'react-router';
+import React from 'react';
+import { Route, Navigate } from 'react-router';

 interface TabsProps {}

@@ -8,8 +8,10 @@ const Tabs: React.FC<TabsProps> = () => {
  return (
    <IonTabs>
      <IonRouterOutlet>
-        <Redirect from="/tabs" to="/tabs/tab1" exact />
-        <Route path="/tabs/tab1" render={() => <IonLabel>Tab 1</IonLabel>} />
+        <Route path="/tabs/tab1">
+          <IonLabel>Tab 1</IonLabel>
+        </Route>
+        <Route path="/tabs" element={<Navigate to="/tabs/tab1" />} />
      </IonRouterOutlet>
      <IonTabBar slot="bottom">
        <IonTabButton tab="tab1" onClick={() => window.alert('Tab was clicked')}>
--- a/packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx
+++ b/packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx
@@ -1,15 +1,8 @@
-import React from 'react';
 import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
-import { Route, Redirect } from 'react-router';
-import {
-  addCircleOutline,
-  alarm,
-  alertCircle,
-  logoGoogle,
-  logoIonic,
-  newspaper,
-  star,
-} from 'ionicons/icons';
+import { addCircleOutline, alarm, alertCircle, logoGoogle, logoIonic, newspaper, star } from 'ionicons/icons';
+import React from 'react';
+import { Route, Routes, Navigate } from 'react-router';
+
 import ActionSheetComponent from './ActionSheetComponent';
 import AlertComponent from './AlertComponent';
 import LoadingComponent from './LoadingComponent';
@@ -24,14 +17,16 @@ const OverlayHooks: React.FC<OverlayHooksProps> = () => {
  return (
    <IonTabs>
      <IonRouterOutlet>
-        <Redirect from="/overlay-components" to="/overlay-components/actionsheet" exact />
-        <Route path="/overlay-components/actionsheet" component={ActionSheetComponent} />
-        <Route path="/overlay-components/alert" component={AlertComponent} />
-        <Route path="/overlay-components/loading" component={LoadingComponent} />
-        <Route path="/overlay-components/modal" component={ModalComponent} />
-        <Route path="/overlay-components/picker" component={PickerComponent} />
-        <Route path="/overlay-components/popover" component={PopoverComponent} />
-        <Route path="/overlay-components/toast" component={ToastComponent} />
+        <Routes>
+          <Route path="/overlay-components/actionsheet" element={<ActionSheetComponent />} />
+          <Route path="/overlay-components/alert" element={<AlertComponent />} />
+          <Route path="/overlay-components/loading" element={<LoadingComponent />} />
+          <Route path="/overlay-components/modal" element={<ModalComponent />} />
+          <Route path="/overlay-components/picker" element={<PickerComponent />} />
+          <Route path="/overlay-components/popover" element={<PopoverComponent />} />
+          <Route path="/overlay-components/toast" element={<ToastComponent />} />
+          <Route path="/overlay-components/*" element={<Navigate to="/overlay-components/actionsheet" />} />
+        </Routes>
      </IonRouterOutlet>
      <IonTabBar slot="bottom">
        <IonTabButton tab="actionsheet" href="/overlay-components/actionsheet">
--- a/packages/react/test/base/src/pages/overlay-hooks/OverlayHooks.tsx
+++ b/packages/react/test/base/src/pages/overlay-hooks/OverlayHooks.tsx
@@ -1,16 +1,9 @@
-import React from 'react';
 import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
-import { Route, Redirect } from 'react-router';
+import { addCircleOutline, alarm, alertCircle, logoGoogle, logoIonic, newspaper, star } from 'ionicons/icons';
+import React from 'react';
+import { Route, Navigate, Routes } from 'react-router';
+
 import ActionSheetHook from './ActionSheetHook';
-import {
-  addCircleOutline,
-  alarm,
-  alertCircle,
-  logoGoogle,
-  logoIonic,
-  newspaper,
-  star,
-} from 'ionicons/icons';
 import AlertHook from './AlertHook';
 import LoadingHook from './LoadingHook';
 import ModalHook from './ModalHook';
@@ -24,14 +17,16 @@ const OverlayHooks: React.FC<OverlayHooksProps> = () => {
  return (
    <IonTabs>
      <IonRouterOutlet>
-        <Redirect from="/overlay-hooks" to="/overlay-hooks/actionsheet" exact />
-        <Route path="/overlay-hooks/actionsheet" component={ActionSheetHook} />
-        <Route path="/overlay-hooks/alert" component={AlertHook} />
-        <Route path="/overlay-hooks/loading" component={LoadingHook} />
-        <Route path="/overlay-hooks/modal" component={ModalHook} />
-        <Route path="/overlay-hooks/picker" component={PickerHook} />
-        <Route path="/overlay-hooks/popover" component={PopoverHook} />
-        <Route path="/overlay-hooks/toast" component={ToastHook} />
+        <Routes>
+          <Route path="/overlay-hooks/actionsheet" element={<ActionSheetHook />} />
+          <Route path="/overlay-hooks/alert" element={<AlertHook />} />
+          <Route path="/overlay-hooks/loading" element={<LoadingHook />} />
+          <Route path="/overlay-hooks/modal" element={<ModalHook />} />
+          <Route path="/overlay-hooks/picker" element={<PickerHook />} />
+          <Route path="/overlay-hooks/popover" element={<PopoverHook />} />
+          <Route path="/overlay-hooks/toast" element={<ToastHook />} />
+          <Route path="/overlay-hooks/*" element={<Navigate to="/overlay-hooks/actionsheet" />} />
+        </Routes>
      </IonRouterOutlet>
      <IonTabBar slot="bottom">
        <IonTabButton tab="actionsheet" href="/overlay-hooks/actionsheet">