react实现路由缓存

React 路由缓存的实现方法

在 React 中实现路由缓存可以通过多种方式完成，主要目标是保持组件状态在路由切换时不丢失。以下是几种常见方案：

使用 react-router 的 Outlet 结合 useOutlet

React Router v6 提供了 Outlet 和 useOutlet 来实现路由缓存：

import { Outlet, useOutlet } from 'react-router-dom';

function CacheRoute() {
  const element = useOutlet();
  const [cacheElement] = useState(element);

  return cacheElement || element;
}

然后在路由配置中使用：

<Route path="/detail" element={<CacheRoute />}>
  <Route index element={<DetailPage />} />
</Route>

通过状态管理库实现

结合 Redux 或 MobX 等状态管理库保存组件状态：

import { keepAlive } from './store';

function DetailPage() {
  const data = useSelector(state => state.keepAlive.detailData);

  useEffect(() => {
    return () => {
      // 组件卸载时保存状态
      keepAlive.set('detailData', currentState);
    };
  }, []);
}

使用第三方库 react-activation

专门用于 React 路由缓存的库：

import { AliveScope, KeepAlive } from 'react-activation';

function App() {
  return (
    <AliveScope>
      <KeepAlive name="detail">
        <Route path="/detail" element={<DetailPage />} />
      </KeepAlive>
    </AliveScope>
  );
}

手动实现缓存组件

创建高阶组件管理缓存：

const cachedComponents = {};

function withRouteCache(Component) {
  return function WrappedComponent(props) {
    const [cache] = useState(() => {
      return cachedComponents[props.match.path] || {};
    });

    useEffect(() => {
      return () => {
        cachedComponents[props.match.path] = cache;
      };
    }, []);

    return <Component {...props} {...cache} />;
  };
}

使用 React 的 key 属性控制

通过动态 key 阻止组件卸载：

<Route 
  path="/detail/:id"
  render={({match}) => (
    <DetailPage key={match.params.id} />
  )}
/>

每种方案各有优劣，react-activation 专为路由缓存设计，API 简洁但增加依赖；手动实现更灵活但需要处理更多边界情况。根据项目复杂度选择合适方案，简单项目可用 useOutlet 方案，复杂SPA建议使用专业缓存库。