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建议使用专业缓存库。
