本文介绍 react-router-cache-route，一个为 React Router 提供缓存功能的路由组件，类似于 Vue 中的 keep-alive 功能。它解决了路由切换时组件被卸载导致的数据和行为丢失问题。

项目简介

react-router-cache-route 是一个开源的 React 路由缓存库，由 CJY0208 开发维护。截至目前，该项目在 GitHub 上已获得 800+ stars，主要使用 JavaScript 编写。

⚠️ 注意：不支持 React Router v6+，仅兼容 React Router v4/v5。

核心特性

• 路由缓存：在路由切换时缓存组件状态，避免重复渲染
• 生命周期钩子：提供 useDidCache 和 useDidRecover 钩子，监听缓存和恢复事件
• 灵活配置：支持多种缓存策略（forward/back/always）
• 手动控制：可通过 cacheKey 和 dropByCacheKey 手动管理缓存
• 多缓存实例：支持按动态路由参数区分不同缓存（multiple 属性）
• 滚动位置保存：实验性支持保存和恢复滚动位置

技术栈

• React v15+
• React Router v4/v5
• JavaScript / TypeScript

安装指南

```bash

使用 npm 安装

npm install react-router-cache-route --save

或使用 yarn

yarn add react-router-cache-route ```

快速开始

使用 CacheRoute 替换 Route，使用 CacheSwitch 替换 Switch：

```javascript import React from 'react' import { HashRouter as Router, Route } from 'react-router-dom' import CacheRoute, { CacheSwitch } from 'react-router-cache-route'

import List from './views/List' import Item from './views/Item'

const App = () => ( <Route render={() => 404 未找到页面} /> )

export default App ```

使用示例

场景 1：基础缓存用法

```javascript import CacheRoute, { CacheSwitch } from 'react-router-cache-route'

// 默认配置：前进时缓存 ```

场景 2：自定义缓存策略

```javascript // 总是缓存

// 后退时缓存

// 自定义判断函数 <CacheRoute exact path="/list" component={List} when={(props) => props.location.state?.cache !== false} /> ```

场景 3：多缓存实例（按路由参数）

```javascript // 为每个不同的 id 创建独立缓存，最多保留 5 份 ```

场景 4：生命周期钩子

```javascript import { useDidCache, useDidRecover } from 'react-router-cache-route'

export default function List() { useDidCache(() => { console.log('组件被缓存') })

useDidRecover(() => { console.log('组件被恢复') // 可以在这里恢复滚动位置或重新获取数据 })

return ( {/* 列表内容 */} ) } ```

场景 5：手动清除缓存

```javascript import { dropByCacheKey, getCachingKeys, clearCache } from 'react-router-cache-route'

// 获取当前所有缓存键 console.log(getCachingKeys()) // ['MyComponent', ...]

// 清除指定缓存 dropByCacheKey('MyComponent')

// 清空所有缓存 clearCache() ```

API 参考

CacheRoute 属性

when 取值说明

• forward：前进时缓存（PUSH/REPLACE 事件）
• back：后退时缓存（POP 事件）
• always：一律缓存
• Function：接收 props 参数，返回 boolean 决定是否缓存

CacheSwitch 属性

生命周期钩子

• useDidCache：组件被缓存时触发
• useDidRecover：组件被恢复时触发

工作原理

react-router-cache-route 利用了 React Router 的 Route 组件的 children 属性。当路径不匹配时，传统 Route 会卸载组件，而 CacheRoute 通过 隐藏替代删除 的方式，将组件从 DOM 中隐藏而非卸载，从而实现状态保持。

参考 React Router 源码： https://github.com/remix-run/react-router/blob/v5.3.4/packages/react-router/modules/Route.js#L46-L61

注意事项

1. React Router 版本限制：仅支持 v4/v5，不支持 v6+
2. 如需单纯 KeepAlive 功能：推荐使用 react-activation
3. unmount 属性：开启后可节约性能，但会导致滚动位置丢失，需配合 saveScrollPosition 使用
4. multiple 属性：需要 React v16.2+

项目链接

• GitHub 仓库：https://github.com/CJY0208/react-router-cache-route
• 在线示例：https://codesandbox.io/s/cache-route-demo-2spfh
• 英文文档：README.md