feat: add KeepAlive functionality and demo component

Author: sankeyangshu

package.json

@@ -46,6 +46,7 @@
     "echarts": "^5.6.0",
     "i18next": "^24.2.1",
     "i18next-browser-languagedetector": "^8.0.2",
+    "keepalive-for-react": "^3.0.8",
     "nprogress": "^0.2.0",
     "qs": "^6.14.0",
     "react": "^18.3.1",

pnpm-lock.yaml

@@ -30,8 +30,8 @@ export interface userInfoType {
 
 // api接口
 const api = {
-  example: 'api/example', // 示例接口
-  login: '/api/auth/login', // 用户登录接口
+  example: '/example', // 示例接口
+  login: '/auth/login', // 用户登录接口
 };
 
 /**

src/api/System/user.ts

@@ -1,13 +1,14 @@
 import * as vantIcons from '@react-vant/icons';
 import { ArrowLeft } from '@react-vant/icons';
-import { createElement, useRef } from 'react';
+import { KeepAlive, useKeepAliveRef } from 'keepalive-for-react';
+import { createElement, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Outlet, useLocation, useNavigate } from 'react-router';
-import { CSSTransition } from 'react-transition-group';
+import { useLocation, useNavigate, useOutlet } from 'react-router';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { NavBar, Tabbar } from 'react-vant';
 import IconifyIcon from '@/components/Icon/IconifyIcon';
 import { constantRoutes } from '@/routers';
-import { filterTabBar, searchRoute } from '@/routers/utils';
+import { filterKeepAlive, filterTabBar, searchRoute } from '@/routers/utils';
 import { useSettingStore } from '@/store/setting';
 
 const Layout = () => {
@@ -34,7 +35,7 @@ const Layout = () => {
   };
 
   // 获取路由对象
-  const { pathname } = useLocation();
+  const { pathname, search } = useLocation();
   const currentRoute = searchRoute(pathname, constantRoutes);
 
   const isShowNavBar = !currentRoute.meta?.hiddenNavBar;
@@ -54,6 +55,16 @@ const Layout = () => {
   // 使用i18n全局函数
   const { t } = useTranslation();
 
+  const outlet = useOutlet();
+
+  const aliveRef = useKeepAliveRef();
+
+  const cacheKey = useMemo(() => {
+    return pathname + search;
+  }, [pathname, search]);
+
+  const cacheKeys = filterKeepAlive(constantRoutes);
+
   return (
     <div className="h-screen flex flex-col">
       {isShowNavBar && (
@@ -71,19 +82,26 @@ const Layout = () => {
         />
       )}
 
-      <div className="relative flex-1 overflow-x-hidden">
-        <CSSTransition
-          key={pathname}
-          nodeRef={nodeRef}
-          appear
-          in={isPageAnimate}
-          timeout={400}
-          classNames={getTransitionName()}
-        >
-          <div ref={nodeRef} className="absolute inset-0 w-full">
-            <Outlet />
-          </div>
-        </CSSTransition>
+      <div className="relative flex-1 overflow-hidden">
+        <KeepAlive activeCacheKey={cacheKey} aliveRef={aliveRef} include={cacheKeys}>
+          <TransitionGroup component={null}>
+            <CSSTransition
+              key={pathname}
+              nodeRef={nodeRef}
+              appear
+              in={isPageAnimate}
+              timeout={400}
+              classNames={getTransitionName()}
+            >
+              <div
+                ref={nodeRef}
+                className="absolute inset-0 w-full overflow-x-hidden overflow-y-auto"
+              >
+                {outlet}
+              </div>
+            </CSSTransition>
+          </TransitionGroup>
+        </KeepAlive>
       </div>
 
       {isShowTabBar && (

src/layout/index.tsx

@@ -1,4 +1,3 @@
-import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
 import { setupI18n } from './locales'; // 引入国际化配置
@@ -12,11 +11,7 @@ function bootstrap() {
   const container = document.getElementById('root');
   if (!container) return;
   const root = createRoot(container);
-  root.render(
-    <StrictMode>
-      <App />
-    </StrictMode>
-  );
+  root.render(<App />);
 }
 
 bootstrap();

src/main.tsx

@@ -101,6 +101,11 @@ export const constantRoutes: RouteObjectType[] = [
         element: lazyLoad(lazy(() => import('@/views/Example/iconDemo'))),
         meta: { title: 'Icon 示例', i18n: 'icon' },
       },
+      {
+        path: '/keepAlive',
+        element: lazyLoad(lazy(() => import('@/views/Example/keepAliveDemo'))),
+        meta: { title: 'KeepAlive 演示', i18n: 'keepAlive', keepAlive: true },
+      },
     ],
   },
   notFoundRouter,

src/routers/index.tsx

@@ -38,3 +38,24 @@ export const searchRoute = (path: string, routes: RouteObjectType[] = []): Route
   }
   return result;
 };
+
+/**
+ * 过滤需要缓存的路由
+ * @param routers 异步路由表
+ * @returns 需要缓存的路由数组
+ */
+export const filterKeepAlive = (routers: RouteObjectType[]) => {
+  const cacheRouter: string[] = [];
+  const deep = (routerList: RouteObjectType[]) => {
+    routerList.forEach((item) => {
+      if (item.meta?.keepAlive && item.path) {
+        cacheRouter.push(item.path as string);
+      }
+      if (item.children && item.children.length) {
+        deep(item.children);
+      }
+    });
+  };
+  deep(routers);
+  return cacheRouter;
+};

src/routers/utils/index.ts

@@ -17,6 +17,7 @@ const Example = () => {
       { title: `📊 ${t('route.echarts')}`, route: 'echarts' },
       { title: `🎨 ${t('route.icon')}`, route: 'icon' },
       { title: `🙅 ${t('route.notFound')}`, route: '404' },
+      { title: `🧡 ${t('route.keepAlive')}`, route: 'keepAlive' },
     ],
     [t]
   );

src/views/Example/index.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Cell, Field, Stepper } from 'react-vant';
+
+const KeepAliveDemo = () => {
+  // 使用i18n全局函数
+  const { t } = useTranslation();
+
+  const [text, setText] = useState('');
+  const [value, setValue] = useState(0);
+
+  return (
+    <div className="box-border w-full p-20">
+      <Cell.Group border={false} className="mb-10 w-full">
+        <Field value={text} label="文本" placeholder="请输入文本" onChange={setText} />
+      </Cell.Group>
+      <Stepper defaultValue={value} onChange={(v) => setValue(v!)} />
+
+      <div className="mt-20 color-[var(--van-text-color-2)]">{t('example.keepAliveTips')}</div>
+    </div>
+  );
+};
+
+export default KeepAliveDemo;