refactor(many): replace render with element

packages/react-router/test/base/src/pages/dynamic-routes/DynamicRoutes.tsx

@@ -11,14 +11,6 @@ import { Route, Navigate } from 'react-router';
 import { Link } from 'react-router-dom';
 
 const DynamicRoutes: React.FC = () => {
-  const [routes, setRoutes] = useState<ReactElement[]>([
-    <Route
-      key="sldjflsdj"
-      path="/dynamic-routes/home"
-      render={() => <Home update={addRoute} />}
-    />,
-  ]);
-
   const addRoute = () => {
     const newRoute = (
       <Route key="lsdjldj" path="/dynamic-routes/newRoute" element={<NewRoute />} />
@@ -26,12 +18,20 @@ const DynamicRoutes: React.FC = () => {
     setRoutes([...routes, newRoute]);
   };
 
+  const [routes, setRoutes] = useState<ReactElement[]>([
+    <Route
+      key="sldjflsdj"
+      path="/dynamic-routes/home"
+      element={<Home update={addRoute} />}
+    />,
+  ]);
+
   return (
     <IonRouterOutlet>
       {routes}
       {/* <Route path="/home" render={() => <Home update={addRoute} />} /> */}
       <Route path="/dynamic-routes" element={<Navigate to="/dynamic-routes/home" replace />} />
-      <Route render={() => <Failed />} />
+      <Route element={<Failed />} />
     </IonRouterOutlet>
   );
 };

packages/react-router/test/base/src/pages/dynamic-tabs/DynamicTabs.tsx

@@ -40,7 +40,7 @@ const DynamicTabs: React.FC = () => {
       <IonReactRouter>
         <IonTabs>
           <IonRouterOutlet>
-            <Route path="/dynamic-tabs/tab1" render={renderFirstTab} />
+            <Route path="/dynamic-tabs/tab1" element={renderFirstTab} />
             {render2ndTabRoute()}
             <Route path="/dynamic-tabs" element={<Navigate to="/dynamic-tabs/tab1" replace />} />
             <Route path="*" element={<Navigate to="/dynamic-tabs/tab1" replace />} />

packages/react-router/test/base/src/pages/muiltiple-tabs/MultipleTabs.tsx

@@ -27,15 +27,11 @@ const MultipleTabs: React.FC = () => {
       <IonRouterOutlet id="main">
         <Route
           path="/multiple-tabs/tab1/*"
-          render={() => {
+          element={<Tab1 />}
-            return <Tab1 />;
-          }}
         />
         <Route
           path="/multiple-tabs/tab2/*"
-          render={() => {
+          element={<Tab2 />}
-            return <Tab2 />;
-          }}
         />
         <Route path="/multiple-tabs" element={<Navigate to="/multiple-tabs/tab1" replace />} />
       </IonRouterOutlet>
@@ -62,11 +58,11 @@ const Tab1: React.FC = () => {
       <IonRouterOutlet id="tab1">
         <Route
           path="/multiple-tabs/tab1"
-          element={() => <Navigate to="/multiple-tabs/tab1/pagea" replace />}
+          element={<Navigate 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/pagea" element={<Page name="PageA" />} />
-        <Route path="/multiple-tabs/tab1/pageb" render={() => <Page name="PageB" />} />
+        <Route path="/multiple-tabs/tab1/pageb" element={<Page name="PageB" />} />
       </IonRouterOutlet>
     </IonTabs>
   );
@@ -88,11 +84,11 @@ const Tab2: React.FC = () => {
       <IonRouterOutlet id="tab2">
         <Route
           path="/multiple-tabs/tab2"
-          element={() => <Navigate to="/multiple-tabs/tab2/pagec" replace />}
+          element={<Navigate 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/pagec" element={<Page name="PageC" />} />
-        <Route path="/multiple-tabs/tab2/paged" render={() => <Page name="PageD" />} />
+        <Route path="/multiple-tabs/tab2/paged" element={<Page name="PageD" />} />
       </IonRouterOutlet>
     </IonTabs>
   );

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"
-        element={() => <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"
-      element={() => <Navigate to="/nested-outlet2/home" replace />}
+      element={<Navigate to="/nested-outlet2/home" replace />}
     />
   </IonRouterOutlet>
 );

packages/react-router/test/base/src/pages/outlet-ref/OutletRef.tsx

@@ -22,9 +22,7 @@ export const OutletRef: React.FC<OutletRefProps> = () => {
     <IonRouterOutlet id="main-outlet" ref={ref}>
       <Route
         path="/outlet-ref"
-        render={() => {
+        element={<Main outletId={ref.current?.id} />}
-          return <Main outletId={ref.current?.id} />;
-        }}
       />
     </IonRouterOutlet>
   );

packages/react-router/test/base/src/pages/refs/Refs.tsx

@@ -14,9 +14,9 @@ interface RefsProps {}
 const Refs: React.FC = () => {
   return (
     <IonRouterOutlet>
-      {/* <Route path="/home" render={() => <Home update={addRoute} />} /> */}
+      {/* <Route path="/home" element={<Home update={addRoute} />} /> */}
       <Route path="/refs" element={<RefsFC />} />
-      <Route path="/refs/class" element={<RefsClass/ >} />
+      <Route path="/refs/class" element={<RefsClass />} />
     </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" element={() => <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/OtherPage.tsx

@@ -25,7 +25,7 @@ const OtherPage: React.FC<OtherPageProps> = () => {
 
   return (
     // <IonRouterOutlet id="other" ionPageContainer>
-    //   <Route path="/otherpage" render={() => (
+    //   <Route path="/otherpage" element={
     <IonPage data-pageid="other-page">
       <IonHeader>
         <IonToolbar>
@@ -39,7 +39,7 @@ const OtherPage: React.FC<OtherPageProps> = () => {
         <IonButton routerLink="/routing/tabs/tab3">Go to tab3</IonButton>
       </IonContent>
     </IonPage>
-    //   )}></Route>
+    //   }></Route>
     // </IonRouterOutlet>
   );
 };

packages/react-router/test/base/src/pages/routing/PropsTest.tsx

@@ -21,7 +21,7 @@ const PropsTest: React.FC<PropsTestProps> = () => {
     <IonRouterOutlet>
       <Route
         path="/routing/propstest"
-        render={() => <InnerPropsTest count={count} setCount={setCount} />}
+        element={<InnerPropsTest count={count} setCount={setCount} />}
       />
     </IonRouterOutlet>
   );

packages/react-router/test/base/src/pages/routing/Routing.tsx

@@ -20,38 +20,27 @@ const Routing: React.FC<RoutingProps> = () => {
     <IonSplitPane contentId="main">
       <Menu />
       <IonRouterOutlet id="main">
-        <Route path="/routing/tabs" render={() => <Tabs />} />
+        <Route path="/routing/tabs" element={<Tabs />} />
         {/* <Route path="/routing/tabs" element={<Tabs />} /> */}
-        <Route path="/routing" element={() => <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={() => {
+        {/* <Route path="/routing/favorites" element={<IonRouterOutlet id="favorites"><Route path="/routing/favorites" element={<Favorites />} /></IonRouterOutlet>} /> */}
-        return (
+        {/* <Route path="/routing/otherpage" element={<IonRouterOutlet id="otherpage"><Route path="/routing/otherpage" element={<OtherPage />} /></IonRouterOutlet>} /> */}
-          <IonRouterOutlet id="favorites">
-            <Route path="/routing/favorites" element={<Favorites />} />
-          </IonRouterOutlet>
-        );
-      }} /> */}
-        {/* <Route path="/routing/otherpage" render={() => {
-        return (
-          <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" element={<Navigate to="/routing/tabs" replace />} />
-        <Route path="/routing/redirect-routing" render={() => <RedirectRouting />} />
+        <Route path="/routing/redirect-routing" element={<RedirectRouting />} />
         <Route
-          render={() => (
+          path="*"
+          element={
             <IonPage data-pageid="not-found">
               <IonContent>
                 <div>Not found</div>
               </IonContent>
             </IonPage>
-          )}
+          }
         />
-        {/* <Route element={() => <Navigate to="/tabs" replace />} /> */}
+        {/* <Route element={<Navigate to="/tabs" replace />} /> */}
       </IonRouterOutlet>
     </IonSplitPane>
   );

packages/react-router/test/base/src/pages/routing/Tabs.tsx

@@ -16,21 +16,19 @@ const Tabs: React.FC<TabsProps> = () => {
       <IonRouterOutlet id="tabs">
         <Route path="/routing/tabs/home" element={<Tab1 />} />
         <Route path="/routing/tabs/home/details/:id" element={<Details />} />
-        {/* <Route path="/routing/tabs/home/details/:id" render={(props) => {
+        {/* <Route path="/routing/tabs/home/details/:id" element={<Details />} /> */}
-          return <Details />
-        }} /> */}
         <Route path="/routing/tabs/settings" element={<Tab2 />} />
         <Route path="/routing/tabs/settings/details/:id" element={<SettingsDetails />} />
         <Route path="/routing/tabs/tab3" element={<Tab3 />} />
         <Route
           path="/routing/tabs"
-          element={() => <Navigate to="/routing/tabs/home" replace />}
+          element={<Navigate to="/routing/tabs/home" replace />}
         />
         <Route
           path="/routing/tabs/redirect"
-          element={() => <Navigate to="/routing/tabs/settings" replace />}
+          element={<Navigate to="/routing/tabs/settings" replace />}
         />
-        {/* <Route path="/routing/tabs" element={() => <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 }}>