refactor(platform): add AppRoute to generate page

Author: xiejay97

packages/platform/src/app/Routes.tsx

@@ -269,7 +269,7 @@ export const AppRoutes = React.memo(() => {
         title,
       }}
     >
-      <React.Fragment key={location.pathname}>{element}</React.Fragment>
+      {element}
     </RouteStateContext.Provider>
   );
 });

packages/platform/src/app/routes/dashboard/amap/AMap.tsx

@@ -4,10 +4,11 @@ import { useImmer } from '@react-devui/hooks';
 import { DRadio } from '@react-devui/ui';
 
 import { AppMap } from '../../../components';
+import { AppRoute } from '../../../utils';
 import styles from './AMap.module.scss';
 import points from './points';
 
-export default function AMap(): JSX.Element | null {
+export default AppRoute(() => {
   const [mapTmp, setMapTmp] = useState('Marker');
   const [infoWindow, setInfoWindow] = useImmer<{ visible: boolean; position?: [number, number] }>({ visible: false });
 
@@ -65,4 +66,4 @@ export default function AMap(): JSX.Element | null {
       </AppMap>
     </div>
   );
-}
+});

packages/platform/src/app/routes/dashboard/echarts/ECharts.tsx

@@ -5,10 +5,11 @@ import { useMount } from '@react-devui/hooks';
 import { DCard } from '@react-devui/ui';
 
 import { AppChart, AppRouteHeader } from '../../../components';
+import { AppRoute } from '../../../utils';
 import styles from './ECharts.module.scss';
 import { barOptions, lineOptions, nightingaleOptions, pieOptions, scatterOptions, stackedBarOptions, stackedLineOptions } from './options';
 
-export default function ECharts(): JSX.Element | null {
+export default AppRoute(() => {
   const [options, setOptions] = useState<echarts.EChartsOption[]>([]);
   const { t } = useTranslation();
 
@@ -42,4 +43,4 @@ export default function ECharts(): JSX.Element | null {
       </div>
     </>
   );
-}
+});

packages/platform/src/app/routes/exception/Exception.tsx

@@ -4,12 +4,13 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import { DButton } from '@react-devui/ui';
 
+import { AppRoute } from '../../utils';
 import { ReactComponent as S403 } from './403.svg';
 import { ReactComponent as S404 } from './404.svg';
 import { ReactComponent as S500 } from './500.svg';
 import styles from './Exception.module.scss';
 
-export default function Exception(): JSX.Element | null {
+export default AppRoute(() => {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
@@ -31,4 +32,4 @@ export default function Exception(): JSX.Element | null {
       </div>
     </div>
   );
-}
+});

packages/platform/src/app/routes/list/standard-table/StandardTable.tsx

@@ -12,6 +12,7 @@ import { DButton, DCard, DCheckbox, DDropdown, DModal, DPagination, DSelect, DSe
 
 import { AppRouteHeader, AppStatusDot, AppTableFilter } from '../../../components';
 import { useAPI, useQueryParams } from '../../../hooks';
+import { AppRoute } from '../../../utils';
 import { AppDeviceModal } from './DeviceModal';
 import styles from './StandardTable.module.scss';
 
@@ -26,7 +27,7 @@ interface DeviceQueryParams {
   pageSize: number;
 }
 
-export default function StandardTable(): JSX.Element | null {
+export default AppRoute(() => {
   const deviceModalRef = useRef<OpenSettingFn<DeviceData>>(null);
 
   const { t } = useTranslation();
@@ -390,4 +391,4 @@ export default function StandardTable(): JSX.Element | null {
       </div>
     </>
   );
-}
+});

packages/platform/src/app/routes/list/standard-table/detail/Detail.tsx

@@ -11,10 +11,11 @@ import { DButton, DCard, DSeparator, DSpinner, DTable } from '@react-devui/ui';
 
 import { AppDetailView, AppRouteHeader } from '../../../../components';
 import { useAPI } from '../../../../hooks';
+import { AppRoute } from '../../../../utils';
 import { AppDeviceModal } from '../DeviceModal';
 import styles from './Detail.module.scss';
 
-export default function Detail(): JSX.Element | null {
+export default AppRoute(() => {
   const deviceModalRef = useRef<OpenSettingFn<DeviceData>>(null);
 
   const { t } = useTranslation();
@@ -135,4 +136,4 @@ export default function Detail(): JSX.Element | null {
       </div>
     </>
   );
-}
+});

packages/platform/src/app/routes/login/Login.tsx

@@ -15,11 +15,11 @@ import { AppLanguage } from '../../components';
 import { LOGIN_PATH } from '../../config/other';
 import { APP_NAME } from '../../config/other';
 import { TOKEN, useHttp, useInit } from '../../core';
-import { NotificationService } from '../../utils';
+import { AppRoute, NotificationService } from '../../utils';
 import styles from './Login.module.scss';
 import { BASE64_DATA } from './base64.out';
 
-export default function Login(): JSX.Element | null {
+export default AppRoute(() => {
   const { t } = useTranslation();
   const http = useHttp();
   const [loginloading, setLoginLoading] = useState(false);
@@ -207,4 +207,4 @@ export default function Login(): JSX.Element | null {
       </footer>
     </div>
   );
-}
+});

packages/platform/src/app/routes/test/acl/ACL.tsx

@@ -6,9 +6,10 @@ import { DAlert, DButton, DCard, DTable, DTag } from '@react-devui/ui';
 
 import { AppRouteHeader } from '../../../components';
 import { useACL } from '../../../core';
+import { AppRoute } from '../../../utils';
 import styles from './ACL.module.scss';
 
-export default function ACL(): JSX.Element | null {
+export default AppRoute(() => {
   const acl = useACL();
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -68,4 +69,4 @@ export default function ACL(): JSX.Element | null {
       </div>
     </>
   );
-}
+});

packages/platform/src/app/routes/test/http/Http.tsx

@@ -4,9 +4,10 @@ import { DButton, DCard } from '@react-devui/ui';
 
 import { AppRouteHeader } from '../../../components';
 import { useHttp } from '../../../core';
+import { AppRoute } from '../../../utils';
 import styles from './Http.module.scss';
 
-export default function Http(): JSX.Element | null {
+export default AppRoute(() => {
   const http = useHttp();
   const { t } = useTranslation();
 
@@ -45,4 +46,4 @@ export default function Http(): JSX.Element | null {
       </div>
     </>
   );
-}
+});

packages/platform/src/app/utils/AppRoute.ts

@@ -0,0 +1,13 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+
+export function AppRoute(FC: React.FC) {
+  return (props: { aReloadWhenPathChange?: boolean }) => {
+    const { aReloadWhenPathChange = true } = props;
+
+    const location = useLocation();
+
+    return React.createElement(FC, aReloadWhenPathChange ? { key: location.pathname } : undefined);
+  };
+}