diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index 89ac06bbe3..83d2be5cbc 100644
--- 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"
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index 78dea80528..9ebfa89550 100644
--- 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",
diff --git a/packages/react-router/src/ReactRouter/IonReactRouter.tsx b/packages/react-router/src/ReactRouter/IonReactRouter.tsx
index e34ece3c8b..f366705415 100644
--- 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>
   );
 }
diff --git a/packages/react-router/src/ReactRouter/IonRouter.tsx b/packages/react-router/src/ReactRouter/IonRouter.tsx
index 14cd3ab55c..0c1beec010 100644
--- 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 = () => {
diff --git a/packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx b/packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx
index 0f0decb4cc..593691bfb2 100644
--- 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);
 
diff --git a/packages/react-router/src/ReactRouter/StackManager.tsx b/packages/react-router/src/ReactRouter/StackManager.tsx
index 603735946d..fa4715a05f 100644
--- 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;
+      }
     }
   });
 
diff --git a/packages/react/src/components/IonRouterOutlet.tsx b/packages/react/src/components/IonRouterOutlet.tsx
index d7c75b1318..4b5d9cbf69 100644
--- 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,
diff --git a/packages/react/test/apps/react18/package-lock.json b/packages/react/test/apps/react18/package-lock.json
index 3623f236fc..1d756b6eaf 100644
--- 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",
diff --git a/packages/react/test/apps/react18/package.json b/packages/react/test/apps/react18/package.json
index 0517114668..99efd42398 100644
--- 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"
   },
diff --git a/packages/react/test/base/src/App.tsx b/packages/react/test/base/src/App.tsx
index 9278550f15..954d8b50af 100644
--- 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>
diff --git a/packages/react/test/base/src/pages/Tabs.tsx b/packages/react/test/base/src/pages/Tabs.tsx
index 08a2cfa8af..6925298475 100644
--- 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')}>
diff --git a/packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx b/packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx
index cd9a4ff104..c9cfe96f3c 100644
--- 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">
diff --git a/packages/react/test/base/src/pages/overlay-hooks/OverlayHooks.tsx b/packages/react/test/base/src/pages/overlay-hooks/OverlayHooks.tsx
index 4cc9bf88dd..b650aeadb8 100644
--- 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">