在中后台管理类系统中，多页签的需求非常普遍，用户常常需要在多个页签内跳转，比如填写表单时去查询某个列表获取一些字段信息再回到表单页面填写。这样的需求在 Vue 中使用
keep-alive即可实现，但是在 React 中，React Router 切换路由后就会卸载组件，而本身并没有提供类似keep-alive的功能，所以实现多页签的功能就会变得格外困难。我的项目也遇到了同样的问题，在 2019 年左右做了技术调研和选型，最终选择了 react-router-cache-route，并在此基础上实现了多页签的需求，并稳定运行了 2 年的时间。下面我来复盘一下这次的多页签改造。
一、项目简介
本项目是我现在所在部门的项目，是一个企业级中后台管理系统，包括系统管理、角色权限体系、基于 Activiti 的工作流引擎等很多开箱即用的功能。项目包括前后端，后端是我们部门自研的基于 Spring 的企业级 Java 框架，前端是 React 技术栈，当时还是 v15 版本。React Router 还是 v2 版本。
项目主要对象是提供给科技部门有中后台和流程需求的项目组，基于我们项目提供的基线工程，可以快速搭建工程，在此基础上根据需求进行开发。截止到 2019 年 10 月我离开该项目组，本项目已经服务了行内近 50 个系统。
二、需求背景
当时的多页签需求还是比较明确的，因为我们团队在 2013 年使用 Sea.js JQuery 的后管类系统都早已实现了，而新的使用 React 技术栈构建的新 UI 却丢失了这个功能，备受用户诟病，期望多页签的需求十分强烈。而 Vue 使用 keep-alive 即可实现多页签功能，如下图的 vue-element-admin 就是典型的多页签案例。
Vue Element Admin 系统多页签实现
React 多页签本身好实现，难点是没有官方提供类似 Vue 的 keep-alive 功能，而使用 React Router，路由切换会直接卸载组件，导致无法缓存，用户的数据和行为因此丢失了。
社区上关于多页签的需求呼声也非常高，但是如 React 社区比较出名的中后台方案 Ant Design Pro 也不支持该功能，两年没看，至今仍然有很多 Issue 提出这类需求：
Antd Pro 社区多页签需求 Issues
偏右大佬早在 2017 年对此做出了回应，详见“能否提供tab切换模式 · Issue #220 · ant-design/ant-design-pro · GitHub”，这个 Isuue 虽然关闭了，但这些年仍然活跃：
偏右 2017 年的回应
看
