v6版本升级后路由缓存机制变化的踩坑记录
在从React Router v5升级到v6的过程中，我们遇到了一个令人头疼的问题：路由缓存机制发生了重大变化。在v5中，通过<Route>组件的cache属性可以实现路由级别的缓存，但在v6中这个特性被移除了。
问题复现
升级后发现，当用户在应用内切换路由时，之前页面的状态会丢失。例如：
// v5写法 - 已废弃
<Route path="/user/:id" cache={true} component={UserPage} />
解决方案
我们采用了以下几种方案来实现路由缓存：
- 使用useLocation + key属性：为每个路由组件添加唯一key，防止组件销毁
const location = useLocation();
<Route key={location.pathname} path="/user/:id" component={UserPage} />
- 自定义缓存组件：创建一个高阶组件来管理缓存状态
function withCache(Component) {
return function CachedComponent(props) {
const [cachedState, setCachedState] = useState(null);
return <Component {...props} cachedState={cachedState} />;
};
}
- 使用React.memo配合useMemo：对复杂组件进行缓存处理
最终我们选择了组合方案，结合了key属性和自定义缓存逻辑来保证用户体验。
讨论