React 中后台系统多页签实现 ｜ 项目复盘

一、项目简介

本项目是我现在所在部门的项目，是一个企业级中后台管理系统，包括系统管理、角色权限体系、基于 Activiti 的工作流引擎等很多开箱即用的功能。项目包括前后端，后端是我们部门自研的基于 Spring 的企业级 Java 框架，前端是 React 技术栈，当时还是 v15 版本。React Router 还是 v2 版本。

项目主要对象是提供给科技部门有中后台和流程需求的项目组，基于我们项目提供的基线工程，可以快速搭建工程，再此基础上根据需求进行开发。截止到 2019 年 10 月我离开该项目组，本项目已经服务了行内近 50 个系统。

二、需求背景

当时的多页签需求还是比较明确的，因为我们团队在 2013 年使用 Sea.js + JQuery 的后管类系统都早已实现了，而新的使用 React 技术栈构建的新 UI 却丢失了这个功能，备受用户诟病，期望多页签的需求十分强烈。而 Vue 使用 keep-alive 即可实现多页签功能，如下图的 vue-element-admin 就是典型的多页签案例。

React 多页签本身好实现，难点是没有官方提供类似 Vue 的 keep-alive 功能，而使用 React Router，路由切换会直接卸载组件，导致无法缓存，用户的数据和行为因此丢失了。

而社区上关于多页签的需求呼声也非常高，而 React 社区比较出名的中后台方案 Ant Design Pro 也不支持该功能，两年没看，至今仍然有很多 Issue 提出这类需求：

偏右大佬早在 2017 年对此做出了回应，详见 能否提供tab切换模式 · Issue #220 · ant-design/ant-design-pro · GitHub，这个 Isuue 虽然关闭了，但这些年仍然活跃：

看 ? 的数量就知道，用户其实对这种回答很不买帐。再来看 2019 年偏右对这个问题的解释，稍微具体了些：

这个解释我个人并不完全认同。首先说 “tab 模式无法（不适合）进行 url 的分享”其实是不成立的， url 带路由和参数就能准确跳转到对应页面，这在我们系统和 Vue 的多页签系统里都是基本功能；而说浏览器本身有 tabs 就不需要做到网站内部，也比较片面，SPA 的页面不开浏览器 tab 应该更符合 Antd 的设计价值观：足不出户 - Ant Design，就连最新版的 Chrome 都已经支持“群组”功能了，让用户在 SPA 页面尽量不开浏览器页签才应该是更好的体验设计。

看看社区其他人的理性分析：

三、方案选型

经过一番调研之后，基本的思路大概有三种：

1. 使用 Redux，数据往 store 里面怼，实现页面数据的”缓存“。
2. 改写 React Router 源码，切换路由不卸载，改为隐藏。
3. 使用社区的轮子，当时选了GitHub 里的两个产品： React Keeper 和 react-router-cache-route

其实每种方案都存在一些问题，最终的选择是使用了排除法。 第一种方案的缺点是，由于存在大量的存量项目，而且项目本身的代码也很多，改造侵入性比较大，不是很好的选择。 第二种的思路和 react-router-cache-route 比较像，就不想重复造轮子了。 第三种选用开源方案其实当时也不太想选择，别看现在这两个项目都有 700 多 star，在当时 star 数只有几十个，而且 Issue 和 Pr 也很少，也就是用户和贡献者都不多，所以担心会有后续维护性的问题以及隐藏的暗坑。

最终同事选择了 react-router-cache-route，但在当时在项目尝试集成的时候，直接就报个错，给了我同事当头一棒，详见这个 Issue。

同事找到我来排查问题，经过定位，发现是 React 16 的一个 breaking change 导致的，从 React 16 版本开始， React 组件可以返回数组了，而 React 15 不行，详见我提交的这个 PR。

解决了 react-router-cache-route 在 React 15 版本报错问题之后，接下来的工作就是实现页签的 UI 和打开关闭的逻辑了，注意关闭需要调用 react-router-cache-route 的卸载缓存 API。

四、还存在什么问题

项目组深度使用 react-router-cache-route 两年时间了，期间由于 React 和 React Router 版本迭代也出现过一些问题，好在 react-router-cache-route 的作者一直保持更新，解决了很多棘手的问题。

但目前总结起来仍然存在两个问题，一个是嵌套的 Cache Route 内部 Route 无法清楚缓存问题，刚才看了一下，这个问题终于有了解，详见 Issue #64 ：

但这个问题大约 1 年时间才有解！

还有一个问题，这个其实不是 react-router-cache-route 的问题。我们在多页签的迭代中增加了相同组件多开功能，这个场景比较常见，比如列表页点击链接跳转到表单页，可以同时打开多个表单，这样在不使用 Redux 是没有什么问题，但是一旦数据存在 Redux 中，多开组件就会有问题，显示的始终是 store 中最新的数据，要解决这个问题，需要重构 Redux 相关逻辑，比较麻烦。

五、现在 React 多页签方案有啥新进展吗

有很长时间没关注了，这两天复盘看了看相关 Issue，发现又出现了一些新的轮子，没有验证过，先放在下面供同学们参考。如果想要实现多页签功能的同学，还是推荐使用 react-router-cache-route，毕竟我们已经稳定使用两年多了，没有太大问题。

• react-router-cache-route （推荐）
• React Activation （和上面的工具同一个作者，Vue 中 功能在 React 中的实现，配合 babel 预编译实现更稳定的 KeepAlive 功能）
• umi-plugin-keep-alive （上面轮子的 umi 插件）
• react-keeper （774 star）
• react-antd-multi-tabs-admin (73 star，Antd多标签页后台管理模板）
• react-live-route （207 star，也是一种缓存路由的轮子）
• React Ant （232 star，基于Ant Design Pro 2.0 的多标签页tabs)
• Ant Design Pro Plus （ 88 star，基于 ant-design-pro 做一些微小的工作）
• React Admin （83 star，基于 Ant Design React 的管理系统架构）
• ant_pro_tabs （82 star，基于 Ant Design Pro 4 实现多标签页面，包括：路由联动，列表，多详情页共存，自动新增、关闭标签等功能）
• Antd Pro Page Tabs （ 54 star，Ant Design Pro 多页签，基于 UmiJS ）
• alita/packages/tabs-layout（基于 umi 的移动端 react 框架的缓存插件）

大家选择的时候可以考察其原理，star 数，Issue 数，pr 数等，当然，也可以看看他们实现的原理，学习一下这块的思路也是不错的。

六、结语

中后台类系统多页签的需求应该是很多的，React 技术栈目前还没有大一统的解决方案，目前是轮子齐飞的状态。希望本文的经验能够帮助到大家，少走弯路。

本文正在参与「掘金 2021 春招闯关活动」, 点击查看 活动详情