From 71fb8cb8f955be998a947ece19357249e3f3d535 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Fri, 13 Jun 2025 13:32:36 -0700
Subject: [PATCH] refactor(many): update to use <Navigate>

---
 .../base/src/pages/dynamic-routes/DynamicRoutes.tsx |  2 +-
 .../base/src/pages/dynamic-tabs/DynamicTabs.tsx     |  7 ++-----
 .../base/src/pages/muiltiple-tabs/MultipleTabs.tsx  | 13 +++++--------
 .../base/src/pages/nested-outlet/NestedOutlet.tsx   |  2 +-
 .../base/src/pages/nested-outlet/NestedOutlet2.tsx  |  2 +-
 .../test/base/src/pages/replace-action/Replace.tsx  |  2 +-
 .../test/base/src/pages/routing/Routing.tsx         |  6 +++---
 .../test/base/src/pages/routing/Tabs.tsx            |  6 +++---
 .../test/base/src/pages/tab-context/TabContext.tsx  |  2 +-
 .../react-router/test/base/src/pages/tabs/Tabs.tsx  |  2 +-
 .../test/base/src/pages/tabs/TabsSecondary.tsx      |  2 +-
 11 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/packages/react-router/test/base/src/pages/dynamic-routes/DynamicRoutes.tsx b/packages/react-router/test/base/src/pages/dynamic-routes/DynamicRoutes.tsx
index 40e1795d20..50f5ce736b 100644
--- a/packages/react-router/test/base/src/pages/dynamic-routes/DynamicRoutes.tsx
+++ b/packages/react-router/test/base/src/pages/dynamic-routes/DynamicRoutes.tsx
@@ -30,7 +30,7 @@ const DynamicRoutes: React.FC = () => {
     <IonRouterOutlet>
       {routes}
       {/* <Route path="/home" render={() => <Home update={addRoute} />} /> */}
-      <Route path="/dynamic-routes" render={() => <Navigate to="/dynamic-routes/home" replace />} />
+      <Route path="/dynamic-routes" element={<Navigate to="/dynamic-routes/home" replace />} />
       <Route render={() => <Failed />} />
     </IonRouterOutlet>
   );
diff --git a/packages/react-router/test/base/src/pages/dynamic-tabs/DynamicTabs.tsx b/packages/react-router/test/base/src/pages/dynamic-tabs/DynamicTabs.tsx
index bc838a311b..df174cc0ea 100644
--- a/packages/react-router/test/base/src/pages/dynamic-tabs/DynamicTabs.tsx
+++ b/packages/react-router/test/base/src/pages/dynamic-tabs/DynamicTabs.tsx
@@ -42,11 +42,8 @@ const DynamicTabs: React.FC = () => {
           <IonRouterOutlet>
             <Route path="/dynamic-tabs/tab1" render={renderFirstTab} />
             {render2ndTabRoute()}
-            <Route
-              path="/dynamic-tabs/"
-              render={() => <Navigate to="/dynamic-tabs/tab1" replace />}
-            />
-            <Route render={() => <Navigate to="/dynamic-tabs/tab1" replace />} />
+            <Route path="/dynamic-tabs" element={<Navigate to="/dynamic-tabs/tab1" replace />} />
+            <Route path="*" element={<Navigate to="/dynamic-tabs/tab1" replace />} />
           </IonRouterOutlet>
           <IonTabBar slot="bottom">
             <IonTabButton tab="tab1" href="/dynamic-tabs/tab1">
diff --git a/packages/react-router/test/base/src/pages/muiltiple-tabs/MultipleTabs.tsx b/packages/react-router/test/base/src/pages/muiltiple-tabs/MultipleTabs.tsx
index 34530f24ca..ce612126c9 100644
--- a/packages/react-router/test/base/src/pages/muiltiple-tabs/MultipleTabs.tsx
+++ b/packages/react-router/test/base/src/pages/muiltiple-tabs/MultipleTabs.tsx
@@ -37,10 +37,7 @@ const MultipleTabs: React.FC = () => {
             return <Tab2 />;
           }}
         />
-        <Route
-          path="/multiple-tabs"
-          render={() => <Navigate to="/multiple-tabs/tab1" replace />}
-        />
+        <Route path="/multiple-tabs" element={<Navigate to="/multiple-tabs/tab1" replace />} />
       </IonRouterOutlet>
     </IonSplitPane>
   );
@@ -65,9 +62,9 @@ const Tab1: React.FC = () => {
       <IonRouterOutlet id="tab1">
         <Route
           path="/multiple-tabs/tab1"
-          render={() => <Navigate to="/multiple-tabs/tab1/pagea" replace />}
+          element={() => <Navigate to="/multiple-tabs/tab1/pagea" replace />}
         />
-        {/* <Navigate path="/multiple-tabs/event" to="/multiple-tabs/tab1/pagea" replace /> */}
+        {/* <Route path="/multiple-tabs/event" element={<Navigate to="/multiple-tabs/tab1/pagea" replace />} /> */}
         <Route path="/multiple-tabs/tab1/pagea" render={() => <Page name="PageA" />} />
         <Route path="/multiple-tabs/tab1/pageb" render={() => <Page name="PageB" />} />
       </IonRouterOutlet>
@@ -91,9 +88,9 @@ const Tab2: React.FC = () => {
       <IonRouterOutlet id="tab2">
         <Route
           path="/multiple-tabs/tab2"
-          render={() => <Navigate to="/multiple-tabs/tab2/pagec" replace />}
+          element={() => <Navigate to="/multiple-tabs/tab2/pagec" replace />}
         />
-        {/* <Navigate path="/multiple-tabs/tab2" to="/multiple-tabs/tab2/pagec" replace /> */}
+        {/* <Route path="/multiple-tabs/tab2" element={<Navigate to="/multiple-tabs/tab2/pagec" replace />} /> */}
         <Route path="/multiple-tabs/tab2/pagec" render={() => <Page name="PageC" />} />
         <Route path="/multiple-tabs/tab2/paged" render={() => <Page name="PageD" />} />
       </IonRouterOutlet>
diff --git a/packages/react-router/test/base/src/pages/nested-outlet/NestedOutlet.tsx b/packages/react-router/test/base/src/pages/nested-outlet/NestedOutlet.tsx
index c351ee585e..bac2799458 100644
--- a/packages/react-router/test/base/src/pages/nested-outlet/NestedOutlet.tsx
+++ b/packages/react-router/test/base/src/pages/nested-outlet/NestedOutlet.tsx
@@ -48,7 +48,7 @@ const SecondPage: React.FC = () => {
     <IonRouterOutlet ionPage>
       <Route
         path="/nested-outlet/secondpage"
-        render={() => <Navigate to="/nested-outlet/secondpage/page" replace />}
+        element={() => <Navigate to="/nested-outlet/secondpage/page" replace />}
       />
       <Route path="/nested-outlet/secondpage/page" element={<Page />} />
     </IonRouterOutlet>
diff --git a/packages/react-router/test/base/src/pages/nested-outlet/NestedOutlet2.tsx b/packages/react-router/test/base/src/pages/nested-outlet/NestedOutlet2.tsx
index b2986b6c77..1b101ae46e 100644
--- a/packages/react-router/test/base/src/pages/nested-outlet/NestedOutlet2.tsx
+++ b/packages/react-router/test/base/src/pages/nested-outlet/NestedOutlet2.tsx
@@ -126,7 +126,7 @@ const NestedOutlet2: React.FC = () => (
     <Route path="/nested-outlet2/home" element={<HomePage />} />
     <Route
       path="/nested-outlet2"
-      render={() => <Navigate to="/nested-outlet2/home" replace />}
+      element={() => <Navigate to="/nested-outlet2/home" replace />}
     />
   </IonRouterOutlet>
 );
diff --git a/packages/react-router/test/base/src/pages/replace-action/Replace.tsx b/packages/react-router/test/base/src/pages/replace-action/Replace.tsx
index 3c386699c0..69a52e3f51 100644
--- a/packages/react-router/test/base/src/pages/replace-action/Replace.tsx
+++ b/packages/react-router/test/base/src/pages/replace-action/Replace.tsx
@@ -20,7 +20,7 @@ const ReplaceAction: React.FC<TopPageProps> = () => {
       <Route path="/replace-action/page1" element={<Page1 />} />
       <Route path="/replace-action/page2" element={<Page2 />} />
       <Route path="/replace-action/page3" element={<Page3 />} />
-      <Route path="/replace-action" render={() => <Navigate to="/replace-action/page1" replace />} />
+      <Route path="/replace-action" element={() => <Navigate to="/replace-action/page1" replace />} />
     </IonRouterOutlet>
   );
 };
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 83b3d76bed..ee13845b88 100644
--- a/packages/react-router/test/base/src/pages/routing/Routing.tsx
+++ b/packages/react-router/test/base/src/pages/routing/Routing.tsx
@@ -22,7 +22,7 @@ const Routing: React.FC<RoutingProps> = () => {
       <IonRouterOutlet id="main">
         <Route path="/routing/tabs" render={() => <Tabs />} />
         {/* <Route path="/routing/tabs" element={<Tabs />} /> */}
-        <Route path="/routing/" render={() => <Navigate to="/routing/tabs" />} replace />
+        <Route path="/routing" element={() => <Navigate to="/routing/tabs" replace />} />
         <Route path="/routing/favorites" element={<Favorites />} />
         {/* <Route path="/routing/favorites" render={() => {
         return (
@@ -40,7 +40,7 @@ const Routing: React.FC<RoutingProps> = () => {
       }} /> */}
         <Route path="/routing/otherpage" element={<OtherPage />} />
         <Route path="/routing/propstest" element={<PropsTest />} />
-        <Route path="/routing/redirect" render={() => <Navigate to="/routing/tabs" replace />} />
+        <Route path="/routing/redirect" element={() => <Navigate to="/routing/tabs" replace />} />
         <Route path="/routing/redirect-routing" render={() => <RedirectRouting />} />
         <Route
           render={() => (
@@ -51,7 +51,7 @@ const Routing: React.FC<RoutingProps> = () => {
             </IonPage>
           )}
         />
-        {/* <Route render={() => <Navigate to="/tabs" replace />} /> */}
+        {/* <Route element={() => <Navigate to="/tabs" replace />} /> */}
       </IonRouterOutlet>
     </IonSplitPane>
   );
diff --git a/packages/react-router/test/base/src/pages/routing/Tabs.tsx b/packages/react-router/test/base/src/pages/routing/Tabs.tsx
index c8e84c97e6..115f706904 100644
--- a/packages/react-router/test/base/src/pages/routing/Tabs.tsx
+++ b/packages/react-router/test/base/src/pages/routing/Tabs.tsx
@@ -24,13 +24,13 @@ const Tabs: React.FC<TabsProps> = () => {
         <Route path="/routing/tabs/tab3" element={<Tab3 />} />
         <Route
           path="/routing/tabs"
-          render={() => <Navigate to="/routing/tabs/home" replace />}
+          element={() => <Navigate to="/routing/tabs/home" replace />}
         />
         <Route
           path="/routing/tabs/redirect"
-          render={() => <Navigate to="/routing/tabs/settings" replace />}
+          element={() => <Navigate to="/routing/tabs/settings" replace />}
         />
-        {/* <Route path="/routing/tabs" render={() => <Route render={() => <Navigate to="/tabs/home" replace />} />} /> */}
+        {/* <Route path="/routing/tabs" element={() => <Navigate to="/tabs/home" replace />} /> */}
       </IonRouterOutlet>
       <IonTabBar slot="bottom">
         <IonTabButton tab="home" href="/routing/tabs/home" routerOptions={{ unmount: true }}>
diff --git a/packages/react-router/test/base/src/pages/tab-context/TabContext.tsx b/packages/react-router/test/base/src/pages/tab-context/TabContext.tsx
index f43197152a..e2fe7274d3 100644
--- a/packages/react-router/test/base/src/pages/tab-context/TabContext.tsx
+++ b/packages/react-router/test/base/src/pages/tab-context/TabContext.tsx
@@ -27,7 +27,7 @@ const TabsContext: React.FC<TabsContextProps> = () => {
       <IonRouterOutlet id="tabs">
         <Route path="/tab-context/tab1" element={<Tab1 />} />
         <Route path="/tab-context/tab2" element={<Tab2 />} />
-        <Navigate from="/tab-context" to="/tab-context/tab1" replace />
+        <Route path="/tab-context" element={<Navigate to="/tab-context/tab1" replace />} />
       </IonRouterOutlet>
       <IonTabBar slot="bottom">
         <IonTabButton tab="tab1" href="/tab-context/tab1" routerOptions={{ unmount: true }}>
diff --git a/packages/react-router/test/base/src/pages/tabs/Tabs.tsx b/packages/react-router/test/base/src/pages/tabs/Tabs.tsx
index 59b83ef6d1..2ea67d2532 100644
--- a/packages/react-router/test/base/src/pages/tabs/Tabs.tsx
+++ b/packages/react-router/test/base/src/pages/tabs/Tabs.tsx
@@ -28,7 +28,7 @@ const Tabs: React.FC<TabsProps> = () => {
         <Route path="/tabs/tab2" element={<Tab2 />} />
         <Route path="/tabs/tab1/child" element={<Tab1Child1 />} />
         <Route path="/tabs/tab1/child2" element={<Tab1Child2 />} />
-        <Navigate from="/tabs" to="/tabs/tab1" replace />
+        <Route path="/tabs" element={<Navigate to="/tabs/tab1" replace />} />
       </IonRouterOutlet>
       <IonTabBar slot="bottom">
         <IonTabButton tab="tab1" href="/tabs/tab1">
diff --git a/packages/react-router/test/base/src/pages/tabs/TabsSecondary.tsx b/packages/react-router/test/base/src/pages/tabs/TabsSecondary.tsx
index b51af55b6f..17ab502786 100644
--- a/packages/react-router/test/base/src/pages/tabs/TabsSecondary.tsx
+++ b/packages/react-router/test/base/src/pages/tabs/TabsSecondary.tsx
@@ -25,7 +25,7 @@ const TabsSecondary: React.FC<TabsSecondaryProps> = () => {
       <IonRouterOutlet id="tabs-secondary">
         <Route path="/tabs-secondary/tab1" element={<Tab1 />} />
         <Route path="/tabs-secondary/tab2" element={<Tab2 />} />
-        <Navigate from="/tabs-secondary" to="/tabs-secondary/tab1" replace />
+        <Route path="/tabs-secondary" element={<Navigate to="/tabs-secondary/tab1" replace />} />
       </IonRouterOutlet>
       <IonTabBar slot="bottom">
         <IonTabButton tab="tab1-secondary" href="/tabs-secondary/tab1">