缓加载优化

src/pages/layouts/with-header-without-footer/index.tsx

@@ -1,7 +1,9 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import styles from "./index.module.less";
 import { Outlet } from "react-router-dom";
-import { Header, LeftMenu } from "../../compenents";
+import { Header, LeftMenu } from "../../../compenents";
+import { Suspense } from "react";
+import LoadingPage from "../../loading";
 
 const HomePage = () => {
   useEffect(() => {}, []);
@@ -17,8 +19,10 @@ const HomePage = () => {
             <Header></Header>
           </div>
           <div className={styles["right-main"]}>
-            {/* 二级路由出口 */}
-            <Outlet />
+            <Suspense fallback={<LoadingPage height="100vh" />}>
+              {/* 二级路由出口 */}
+              <Outlet />{" "}
+            </Suspense>
           </div>
         </div>
       </div>

src/pages/layouts/without-header-without-footer/index.module.less

@@ -0,0 +1,8 @@
+.layout-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+}

src/pages/layouts/without-header-without-footer/index.tsx

@@ -0,0 +1,16 @@
+import { Suspense } from "react";
+import styles from "./index.module.less";
+import { Outlet } from "react-router-dom";
+import LoadingPage from "../../loading";
+
+const WithoutHeaderWithoutFooter = () => {
+  return (
+    <div className={styles["layout-wrap"]}>
+      <Suspense fallback={<LoadingPage height="100vh" />}>
+        <Outlet />
+      </Suspense>
+    </div>
+  );
+};
+
+export default WithoutHeaderWithoutFooter;

src/pages/loading/index.module.less

@@ -1,6 +1,6 @@
-.loading-parent-box {
-  width: 100vd;
-  height: 100vh;
-  text-align: center;
+.loading-box {
+  width: 100vw;
   line-height: 100vh;
+  text-align: center;
 }
+

src/pages/loading/index.tsx

@@ -1,11 +1,20 @@
 import { Spin } from "antd";
 import styles from "./index.module.less";
 
-const LoadingPage = () => {
+interface PropsInterface {
+  height?: string;
+}
+
+const LoadingPage = (props: PropsInterface) => {
   return (
-    <div className={styles["loading-parent-box"]}>
-      <Spin size="large" />
-    </div>
+    <>
+      <div
+        className={styles["loading-box"]}
+        style={{ height: props.height || "100vh" }}
+      >
+        <Spin size="large" />
+      </div>
+    </>
   );
 };
 

src/routes/index.tsx

@@ -7,7 +7,9 @@ import KeepAlive from "../compenents/keep-alive";
 // 页面加载
 import InitPage from "../pages/init";
 import LoginPage from "../pages/login";
-import HomePage from "../pages/home";
+import WithHeaderWithoutFooter from "../pages/layouts/with-header-without-footer";
+import WithoutHeaderWithoutFooter from "../pages/layouts/without-header-without-footer";
+
 //首页
 const DashboardPage = lazy(() => import("../pages/dashboard"));
 //修改密码页面
@@ -77,7 +79,7 @@ const routes: RouteObject[] = [
     children: [
       {
         path: "/",
-        element: <PrivateRoute Component={<HomePage />} />,
+        element: <PrivateRoute Component={<WithHeaderWithoutFooter />} />,
         children: [
           {
             path: "/",
@@ -150,16 +152,22 @@ const routes: RouteObject[] = [
         ],
       },
       {
-        path: "/login",
-        element: <LoginPage />,
-      },
-      {
-        path: "/test",
-        element: <TestPage />,
-      },
-      {
-        path: "*",
-        element: <ErrorPage />,
+        path: "/",
+        element: <WithoutHeaderWithoutFooter />,
+        children: [
+          {
+            path: "/login",
+            element: <LoginPage />,
+          },
+          {
+            path: "/test",
+            element: <TestPage />,
+          },
+          {
+            path: "*",
+            element: <ErrorPage />,
+          },
+        ],
       },
     ],
   },