React Router v6 路由缓存机制实践

v6 路由缓存概述

React Router v6 相较于 v5 在路由缓存机制上有了重大变化。v6 移除了 Switch 组件，采用更灵活的 Routes 组件，并且对路由组件的生命周期管理更加精细。

核心缓存策略

1. 基于路径的缓存

// v6 中的路由配置
<Routes>
  <Route path="/home" element={<Home />} />
  <Route path="/user/:id" element={<User />} />
</Routes>

2. 手动缓存实现

对于需要手动控制缓存的场景，可以使用 React 的 useMemo 和 useRef：

function App() {
  const cacheRef = useRef(new Map());
  
  const renderRoute = (path, Component) => {
    if (!cacheRef.current.has(path)) {
      cacheRef.current.set(path, <Component />);
    }
    return cacheRef.current.get(path);
  };
  
  return (
    <Routes>
      <Route path="/dashboard" element={renderRoute('/dashboard', Dashboard)} />
    </Routes>
  );
}

实际应用建议

1. 对于频繁切换但数据不变的组件，推荐使用缓存
2. 复杂组件可结合 useMemo 进行优化
3. 注意缓存清理时机，避免内存泄漏

v6 的路由缓存机制为开发者提供了更细粒度的控制能力，需要根据具体业务场景合理选择缓存策略。