缓加载优化

src/components/bar-footer/index.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
-import { NavBar, Badge, TabBar } from "antd-mobile";
+import React from "react";
+import { TabBar } from "antd-mobile";
 import styles from "./index.module.scss";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 
 export const TabBarFooter: React.FC = () => {
   const navigate = useNavigate();

src/pages/index/index.tsx

@@ -5,7 +5,7 @@ import { user } from "../../api/index";
 import styles from "./index.module.scss";
 import { useSelector } from "react-redux";
 import { useNavigate, useLocation } from "react-router-dom";
-import { Footer, TabBarFooter, Empty } from "../../components";
+import { Footer, Empty } from "../../components";
 import { CoursesModel } from "./compenents/courses-model";
 import { isEmptyObject } from "../../utils/index";
 
@@ -321,7 +321,6 @@ const IndexPage = () => {
           </>
         )}
       </div>
-      <TabBarFooter></TabBarFooter>
     </div>
   );
 };

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

@@ -0,0 +1,17 @@
+import { Suspense } from "react";
+import { Outlet } from "react-router-dom";
+import LoadingPage from "../../loading";
+import { TabBarFooter } from "../../../components";
+
+const WithoutHeaderWithoutFooter = () => {
+  return (
+    <>
+      <Suspense fallback={<LoadingPage />}>
+        <Outlet />
+      </Suspense>
+      <TabBarFooter></TabBarFooter>
+    </>
+  );
+};
+
+export default WithoutHeaderWithoutFooter;

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

@@ -0,0 +1,13 @@
+import { Suspense } from "react";
+import { Outlet } from "react-router-dom";
+import LoadingPage from "../../loading";
+
+const WithoutHeaderWithoutFooter = () => {
+  return (
+    <Suspense fallback={<LoadingPage />}>
+      <Outlet />
+    </Suspense>
+  );
+};
+
+export default WithoutHeaderWithoutFooter;

src/pages/member/index.tsx

@@ -7,7 +7,6 @@ import { loginAction, logoutAction } from "../../store/user/loginUserSlice";
 import { ImageUploadItem } from "antd-mobile/es/components/image-uploader";
 import styles from "./index.module.scss";
 import { useDispatch, useSelector } from "react-redux";
-import { TabBarFooter } from "../../components";
 import moreIcon from "../../assets/images/commen/icon-more.png";
 
 const MemberPage = () => {
@@ -317,7 +316,6 @@ const MemberPage = () => {
           </div>
         </div>
       </Mask>
-      <TabBarFooter></TabBarFooter>
     </div>
   );
 };

src/pages/study/index.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { Skeleton } from "antd-mobile";
 import styles from "./index.module.scss";
 import { course } from "../../api/index";
-import { TabBarFooter, Empty } from "../../components";
+import { Empty } from "../../components";
 import { CoursesModel } from "./compenents/courses-model";
 import moment from "moment";
 
@@ -143,7 +143,6 @@ const StudyPage = () => {
           </>
         )}
       </div>
-      <TabBarFooter></TabBarFooter>
     </div>
   );
 };

src/routes/index.tsx

@@ -5,6 +5,9 @@ import { getToken } from "../utils";
 // 页面加载
 import { InitPage } from "../pages/init";
 import LoginPage from "../pages/login";
+import WithFooter from "../pages/layouts/with-footer";
+import WithoutFooter from "../pages/layouts/without-footer";
+
 //用户中心页面
 const MemberPage = lazy(() => import("../pages/member/index"));
 //主页
@@ -62,35 +65,47 @@ const routes: RouteObject[] = [
     children: [
       {
         path: "/",
-        element: <PrivateRoute Component={<IndexPage />} />,
+        element: <WithFooter />,
+        children: [
+          {
+            path: "/",
+            element: <PrivateRoute Component={<IndexPage />} />,
+          },
+          {
+            path: "/member",
+            element: <PrivateRoute Component={<MemberPage />} />,
+          },
+          {
+            path: "/study",
+            element: <PrivateRoute Component={<StudyPage />} />,
+          },
+        ],
       },
       {
-        path: "/login",
-        element: <LoginPage />,
-      },
-      {
-        path: "/member",
-        element: <PrivateRoute Component={<MemberPage />} />,
-      },
-      {
-        path: "/change-password",
-        element: <PrivateRoute Component={<ChangePasswordPage />} />,
-      },
-      {
-        path: "/study",
-        element: <PrivateRoute Component={<StudyPage />} />,
-      },
-      {
-        path: "/change-department",
-        element: <PrivateRoute Component={<ChangeDepartmentPage />} />,
-      },
-      {
-        path: "/course/:courseId",
-        element: <PrivateRoute Component={<CoursePage />} />,
-      },
-      {
-        path: "/course/:courseId/hour/:hourId",
-        element: <PrivateRoute Component={<CoursePlayPage />} />,
+        path: "/",
+        element: <WithoutFooter />,
+        children: [
+          {
+            path: "/login",
+            element: <LoginPage />,
+          },
+          {
+            path: "/change-password",
+            element: <PrivateRoute Component={<ChangePasswordPage />} />,
+          },
+          {
+            path: "/change-department",
+            element: <PrivateRoute Component={<ChangeDepartmentPage />} />,
+          },
+          {
+            path: "/course/:courseId",
+            element: <PrivateRoute Component={<CoursePage />} />,
+          },
+          {
+            path: "/course/:courseId/hour/:hourId",
+            element: <PrivateRoute Component={<CoursePlayPage />} />,
+          },
+        ],
       },
     ],
   },