refactor(many): update to use <Navigate>

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>
   );

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">

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>

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>

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>
 );

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>
   );
 };

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>
   );

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 }}>

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 }}>

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">

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">