javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(many): replace render with element

Browse Source
This commit is contained in:
Maria Hutt
2025-06-13 13:46:41 -07:00
parent 71fb8cb8f9
commit c6f8dd4c54
12 changed files with 41 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

2
packages/react-router/test/base/src/pages/nested-outlet/NestedOutlet.tsx
View File

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

2
packages/react-router/test/base/src/pages/nested-outlet/NestedOutlet2.tsx
View File

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

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

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

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

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

2
packages/react-router/test/base/src/pages/replace-action/Replace.tsx
View File

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

4
packages/react-router/test/base/src/pages/routing/OtherPage.tsx
View File

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

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

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

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

@ -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={() => {
return (
<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/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" render={() => <RedirectRouting />} />
<Route path="/routing/redirect" element={<Navigate to="/routing/tabs" replace />} />
<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>
);

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

@ -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) => {
return <Details />
}} /> */}
{/* <Route path="/routing/tabs/home/details/:id" element={<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 }}>