学员各页面缓存

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.3",
+    "ahooks": "^3.7.6",
     "antd": "^5.3.2",
     "axios": "^1.3.4",
     "echarts": "^5.4.2",

src/compenents/keep-alive/index.tsx

@@ -0,0 +1,29 @@
+import { useUpdate } from "ahooks";
+import { useEffect, useRef } from "react";
+import { useLocation, useOutlet } from "react-router-dom";
+
+function KeepAlive() {
+  const componentList = useRef(new Map());
+  const outLet = useOutlet();
+  const { pathname } = useLocation();
+  const forceUpdate = useUpdate();
+
+  useEffect(() => {
+    if (!componentList.current.has(pathname)) {
+      componentList.current.set(pathname, outLet);
+    }
+    forceUpdate();
+  }, [pathname]);
+
+  return (
+    <div>
+      {Array.from(componentList.current).map(([key, component]) => (
+        <div key={key} style={{ display: pathname === key ? "block" : "none" }}>
+          {component}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default KeepAlive;

src/compenents/left-menu/index.tsx

@@ -50,7 +50,7 @@ const items = [
     "user",
     <i className="iconfont icon-icon-user" />,
     [
-      getItem("学员", "/member", null, null, null),
+      getItem("学员", "/member/index", null, null, null),
       getItem("部门", "/department", null, null, null),
     ],
     null

src/pages/dashboard/index.tsx

@@ -199,7 +199,7 @@ const DashboardPage = () => {
               <div
                 className={styles["link-mode"]}
                 onClick={() => {
-                  navigate("/member");
+                  navigate("/member/index");
                 }}
               >
                 <i

src/pages/department/index.tsx

@@ -194,7 +194,7 @@ const DepartmentPage = () => {
                     type="link"
                     style={{ paddingLeft: 4, paddingRight: 4 }}
                     danger
-                    onClick={() => navigate("/member")}
+                    onClick={() => navigate("/member/index")}
                   >
                     （{res.data.users.length}个学员），
                   </Button>

src/routes/index.tsx

@@ -4,6 +4,7 @@ import { login, system } from "../api";
 
 import InitPage from "../pages/init";
 import { getToken } from "../utils";
+import KeepAlive from "../compenents/keep-alive";
 
 import LoginPage from "../pages/login";
 import HomePage from "../pages/home";
@@ -94,19 +95,22 @@ const routes: RouteObject[] = [
           },
           {
             path: "/member",
-            element: <MemberPage />,
+            element: <KeepAlive />,
-          },
+            children: [
-          {
+              { path: "/member/index", element: <MemberPage /> },
-            path: "/member/import",
+              {
-            element: <MemberImportPage />,
+                path: "/member/import",
-          },
+                element: <MemberImportPage />,
-          {
+              },
-            path: "/member/learn",
+              {
-            element: <MemberLearnPage />,
+                path: "/member/learn",
-          },
+                element: <MemberLearnPage />,
-          {
+              },
-            path: "/member/departmentUser",
+              {
-            element: <MemberDepartmentProgressPage />,
+                path: "/member/departmentUser",
+                element: <MemberDepartmentProgressPage />,
+              },
+            ],
           },
           {
             path: "/system/config/index",