From a65886ba373d7053597a66a61126e8fbe6fa70bd Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Fri, 20 Jun 2025 17:41:22 -0700
Subject: [PATCH] test(app, routing): use index

---
 .../src/ReactRouter/ReactRouterViewStack.tsx  | 12 ++++++++---
 .../src/ReactRouter/utils/matchPath.ts        |  1 +
 packages/react-router/test/base/src/App.tsx   |  2 +-
 .../test/base/src/pages/routing/Routing.tsx   | 20 +++++++++----------
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx b/packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx
index 54264ad564..2eb966437a 100644
--- a/packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx
+++ b/packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx
@@ -89,9 +89,15 @@ export class ReactRouterViewStack extends ViewStacks {
 
     // Sync child elements with stored viewItems (e.g. to reflect new props)
     React.Children.forEach(ionRouterOutlet.props.children, (child: React.ReactElement) => {
-      const viewItem = viewItems.find((v) => matchComponent(child, v.routeData.childProps.path));
-      if (viewItem) {
-        viewItem.reactElement = child;
+      // Ensure the child is a valid React element sincewe
+      // might have whitespace strings or other non-element children
+      if (React.isValidElement(child)) {
+        const viewItem = viewItems.find((v) =>
+          matchComponent(child, v.routeData.childProps.path || routeInfo.pathname)
+        );
+        if (viewItem) {
+          viewItem.reactElement = child;
+        }
       }
     });
 
diff --git a/packages/react-router/src/ReactRouter/utils/matchPath.ts b/packages/react-router/src/ReactRouter/utils/matchPath.ts
index 7684dd89b6..b451b159a8 100644
--- a/packages/react-router/src/ReactRouter/utils/matchPath.ts
+++ b/packages/react-router/src/ReactRouter/utils/matchPath.ts
@@ -13,6 +13,7 @@ interface MatchPathOptions {
     path?: string;
     caseSensitive?: boolean;
     end?: boolean;
+    index?: boolean;
   };
 }
 
diff --git a/packages/react-router/test/base/src/App.tsx b/packages/react-router/test/base/src/App.tsx
index 7a7003e865..b3407f6ee8 100644
--- a/packages/react-router/test/base/src/App.tsx
+++ b/packages/react-router/test/base/src/App.tsx
@@ -47,7 +47,7 @@ const App: React.FC = () => {
       <IonReactRouter>
         <IonRouterOutlet>
           <Route path="/" element={<Main />} />
-          <Route path="/routing" element={<Routing />} />
+          <Route path="/routing/*" element={<Routing />} />
           <Route path="/dynamic-routes" element={<DynamicRoutes />} />
           <Route path="/multiple-tabs" element={<MultipleTabs />} />
           <Route path="/dynamic-tabs" element={<DynamicTabs />} />
diff --git a/packages/react-router/test/base/src/pages/routing/Routing.tsx b/packages/react-router/test/base/src/pages/routing/Routing.tsx
index 6ba605a854..5105eca6b1 100644
--- a/packages/react-router/test/base/src/pages/routing/Routing.tsx
+++ b/packages/react-router/test/base/src/pages/routing/Routing.tsx
@@ -20,16 +20,15 @@ const Routing: React.FC<RoutingProps> = () => {
     <IonSplitPane contentId="main">
       <Menu />
       <IonRouterOutlet id="main">
-        <Route path="/routing/tabs" element={<Tabs />} />
-        {/* <Route path="/routing/tabs" element={<Tabs />} /> */}
-        <Route path="/routing" element={<Navigate to="/routing/tabs" replace />} />
-        <Route path="/routing/favorites" element={<Favorites />} />
-        {/* <Route path="/routing/favorites" element={<IonRouterOutlet id="favorites"><Route path="/routing/favorites" element={<Favorites />} /></IonRouterOutlet>} /> */}
-        {/* <Route path="/routing/otherpage" element={<IonRouterOutlet id="otherpage"><Route path="/routing/otherpage" element={<OtherPage />} /></IonRouterOutlet>} /> */}
-        <Route path="/routing/otherpage" element={<OtherPage />} />
-        <Route path="/routing/propstest" element={<PropsTest />} />
-        <Route path="/routing/redirect" element={<Navigate to="/routing/tabs" replace />} />
-        <Route path="/routing/redirect-routing" element={<RedirectRouting />} />
+        <Route index element={<Navigate to="/routing/tabs" replace />} />
+
+        <Route path="tabs" element={<Tabs />} />
+        <Route path="favorites" element={<Favorites />} />
+        <Route path="otherpage" element={<OtherPage />} />
+        <Route path="propstest" element={<PropsTest />} />
+        <Route path="redirect" element={<Navigate to="/routing/tabs" replace />} />
+        <Route path="redirect-routing" element={<RedirectRouting />} />
+
         <Route
           path="*"
           element={
@@ -40,7 +39,6 @@ const Routing: React.FC<RoutingProps> = () => {
             </IonPage>
           }
         />
-        {/* <Route element={<Navigate to="/tabs" replace />} /> */}
       </IonRouterOutlet>
     </IonSplitPane>
   );