路由缓存策略：v6实践分享

路由缓存策略：v6实践分享

最近在项目中完成了React Router v6的升级工作，其中路由缓存策略的实现让我踩了不少坑。分享一下我的实践经验。

升级前的困境

在v5版本中，我们使用<Route>组件的cache属性来实现简单的路由缓存。但v6彻底重构了API，取消了直接的缓存机制。这导致页面切换时组件重新挂载，状态丢失问题严重。

v6解决方案

通过自定义Hook和useLocation、useNavigate实现缓存策略：

// 缓存路由组件
const useRouteCache = () => {
  const location = useLocation();
  const navigate = useNavigate();
  
  // 缓存状态管理
  const [cache, setCache] = useState(new Map());
  
  useEffect(() => {
    // 页面切换时缓存当前组件
    if (location.pathname) {
      cache.set(location.pathname, true);
      setCache(new Map(cache));
    }
  }, [location]);
  
  return { cache };
};

实际应用

// 路由配置中使用
<Routes>
  <Route path="/dashboard" element={
    <CacheWrapper>
      <Dashboard />
    </CacheWrapper>
  } />
</Routes>

const CacheWrapper = ({ children }) => {
  const location = useLocation();
  const cache = useRouteCache();
  
  return (
    <div>
      {cache.cache.has(location.pathname) ? 
        React.cloneElement(children, { key: location.pathname }) : 
        children
      }
    </div>
  );
};

遇到的问题

1. 缓存失效：路由参数变化导致缓存key不一致
2. 内存泄漏：未及时清理过期缓存
3. 路由切换动画：与缓存机制冲突

通过设置定时清理和使用useMemo优化，最终解决了这些问题。建议大家在升级时重点关注路由缓存策略的重构。