React Router v6 路由缓存策略实践
在 React Router v6 的升级过程中，路由缓存成为了一个重要议题。相比 v5，v6 采用了更灵活的路由架构，但同时也需要开发者自行处理组件缓存逻辑。
核心问题
当用户在不同路由间切换时，默认情况下 React 会重新挂载组件，导致状态丢失和性能下降。为了解决这个问题，我们需要实现自定义的路由缓存策略。
解决方案
1. 使用 useLocation 和 key 属性
import { Routes, Route, useLocation } from 'react-router-dom';
function App() {
const location = useLocation();
return (
<Routes location={location} key={location.pathname}>
<Route path="/home" element={<Home />} />
<Route path="/profile" element={<Profile />} />
</Routes>
);
}
2. 实现自定义缓存组件
import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
const CachedRoute = ({ children, path }) => {
const [cached, setCached] = useState(null);
const location = useLocation();
useEffect(() => {
if (location.pathname === path) {
setCached(children);
}
}, [location.pathname]);
return cached || children;
};
3. 结合 React.memo 优化性能
const Home = React.memo(() => {
// 组件逻辑
return <div>Home Content</div>;
});
通过以上策略，我们可以在保持 v6 路由灵活性的同时，实现有效的组件缓存机制。这种方案特别适用于需要保持用户状态的复杂页面应用。
迁移建议
- 建议在升级前评估各路由组件的缓存需求
- 对于频繁切换的组件，优先考虑缓存策略
- 结合 React.lazy 和 Suspense 实现懒加载与缓存的平衡
讨论