From 409fa080fc43fe28977da2d54e9bcd516f09265d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com>
Date: Fri, 21 Apr 2023 10:27:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=A6=E5=91=98=E5=90=84=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=BC=93=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                        |  1 +
 src/compenents/keep-alive/index.tsx | 29 ++++++++++++++++++++++++++++
 src/compenents/left-menu/index.tsx  |  2 +-
 src/pages/dashboard/index.tsx       |  2 +-
 src/pages/department/index.tsx      |  2 +-
 src/routes/index.tsx                | 30 ++++++++++++++++-------------
 6 files changed, 50 insertions(+), 16 deletions(-)
 create mode 100644 src/compenents/keep-alive/index.tsx

diff --git a/package.json b/package.json
index c89999d..83edae1 100644
--- a/package.json
+++ b/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",
diff --git a/src/compenents/keep-alive/index.tsx b/src/compenents/keep-alive/index.tsx
new file mode 100644
index 0000000..94a10f4
--- /dev/null
+++ b/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;
diff --git a/src/compenents/left-menu/index.tsx b/src/compenents/left-menu/index.tsx
index c3ce869..07d4b24 100644
--- a/src/compenents/left-menu/index.tsx
+++ b/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
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 1fa89ef..efa7120 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -199,7 +199,7 @@ const DashboardPage = () => {
               <div
                 className={styles["link-mode"]}
                 onClick={() => {
-                  navigate("/member");
+                  navigate("/member/index");
                 }}
               >
                 <i
diff --git a/src/pages/department/index.tsx b/src/pages/department/index.tsx
index e3d669b..3c885e5 100644
--- a/src/pages/department/index.tsx
+++ b/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>
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 2f1ee5d..1e0c7af 100644
--- a/src/routes/index.tsx
+++ b/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 />,
-          },
-          {
-            path: "/member/import",
-            element: <MemberImportPage />,
-          },
-          {
-            path: "/member/learn",
-            element: <MemberLearnPage />,
-          },
-          {
-            path: "/member/departmentUser",
-            element: <MemberDepartmentProgressPage />,
+            element: <KeepAlive />,
+            children: [
+              { path: "/member/index", element: <MemberPage /> },
+              {
+                path: "/member/import",
+                element: <MemberImportPage />,
+              },
+              {
+                path: "/member/learn",
+                element: <MemberLearnPage />,
+              },
+              {
+                path: "/member/departmentUser",
+                element: <MemberDepartmentProgressPage />,
+              },
+            ],
           },
           {
             path: "/system/config/index",