In the middle and background management system, the demand for multiple tabs is very common. Users often need to jump among multiple tabs, such as querying a list to obtain some field information when filling in a form and then returning to the form page to fill in. This can be done in Vue using keep-Alive, but in React, the React Router uninstalls components after switching routes and does not provide any functionality similar to keep-alive, making it difficult to implement multiple tabs. My project also encountered the same problem, so I did technical research and selection around 2019, and finally chose React-router-cache-route. On this basis, the requirements of multiple tabs were realized and the operation was stable for two years. Let me repeat the multi-page TAB transformation this time.

I. Project Introduction

This project is the project of my current department. It is an enterprise-level background management system, including system management, role permission system, workflow engine based on Activiti and many other out-of-the-box functions. The project included the front and back ends. The back end was the Spring-based enterprise Java framework developed by our department, and the front end was the React technology stack, which was the V15 version at that time. The React Router is still version V2.

The main object of the project is to provide the project team of the science and technology department with middle and background requirements and process requirements. Based on the baseline project provided by our project, the project can be quickly built, and then the development can be carried out according to the needs. By October 2019, when I left the project team, this project had served nearly 50 systems in the industry.

Second, demand background

At that time, the demand for multiple tabs was quite clear, because our team had already implemented the back-end management system using Sea-.js + JQuery in 2013, while the new UI built using React technology stack lost this function, which was widely criticified by users, and the demand for multiple tabs was very strong. Vue can use keep-alive to realize multi-tab function. Vue-element-admin in the figure below is a typical case of multi-tab.

React multi-tab itself is easy to implement, but the difficulty is that there is no official keep-alive function similar to Vue. However, if React Router is used, routing switch will directly uninstall components, resulting in cache failure, and user data and behaviors will be lost.

There is also a high demand for multiple tabs in the community, but for example, Ant Design Pro, a well-known medium and background solution in the React community, does not support this function either. It has not been seen for two years, and there are still many issues asking for this kind of demand:

Issue #220 · Ant-Design/Ant-Design-Pro · GitHub, the Isuue is closed, but it’s still active these years:

Look at the number of 👎, users are actually very unimpressed by this answer. Here’s a slightly more specific interpretation of the 2019 right:

I personally don’t agree with that explanation. First of all, it is not true that “TAB mode is not suitable for URL sharing”. The URL with routing and parameters can accurately jump to the corresponding page, which is a basic function in our system and Vue’s multi-tab system. And to say that the browser itself has tabs does not need to do the inside of the website, is also one-sided, SPA page does not open the browser TAB should be more in line with Antd’s design values: Stay at home – Ant Design, even the latest version of Chrome already supports “groups”, so keeping tabs on SPA pages as close as possible would be a better experience Design.

Look at the rational analysis of the rest of the community:

Iii. Scheme selection

After some research, there are about three basic ideas:

  1. Use Redux, data to store, achieve the page data “cache”.
  2. Rewrite React Router source code, switch routes do not uninstall, to hide.
  3. To use the community wheel, I chose two GitHub products: React Keeper and React-Router-cache-Route

In fact, there are some problems with each scheme, and the final choice is to use the method of elimination. The disadvantage of the first method is that, due to the existence of a large number of inventory projects and the code of the project itself, the transformation is more intrusive, and it is not a good choice. The react-router-cache-route idea is similar to the react-router-cache-route idea. In fact, I didn’t want to choose the third open source solution at that time. Although these two projects now have more than 700 stars, the number of stars at that time was only dozens, and there were few issues and Pr, that is, there were not many users and contributors, so I was worried about the subsequent maintenance problems and hidden dark pits.

In the end, my colleague chose react-router-cache-route, but when I tried to integrate the project at that time, I directly reported a mistake, which hit my colleague in the head. See this Issue for more details.

My colleague asked me to check the problem. After locating, it was found that it was one of React 16Breaking ChangeThat led to it.Starting with React 16, React components can now return arrays“, and React 15 does not work. Please refer to the one I submittedPR.

After react-router-cache-route error is solved, the next step is to implement the UI of the react TAB and the logic to open and close it. Note that closing it requires the react-router-cache-route unload API.

4. What are the remaining problems

The project team has been using React-router-cache-route for two years, during which there were some problems due to the react and React Router version iteration. Fortunately, the author of React-router-cache-route kept updating. A lot of tough problems have been solved.

However, there are still two problems at present. One is that the nested Cache Route inside the Cache Route cannot clear the Cache. After a look, this problem is finally understood, please refer to Issue #64:

But this problem took about a year to solve!

There’s another problem. This isn’t actually a react-router-cache-route problem. For example, click the link on the list page to jump to the form page, and multiple forms can be opened at the same time. In this way, there is no problem without using Redux. However, once the data exists in Redux, there will be problems with opening multiple components. The display is always the latest data in the store. To solve this problem, Redux related logic needs to be reconstructed, which is more troublesome.

5. Is there any new progress in React multi-tab scheme

I haven’t paid attention to it for a long time. After reviewing the relevant issues these two days, I found that some new wheels have appeared, which have not been verified. Please put them below for students’ reference. If you want to implement multi-tab function, it is recommended to use React-router-cache-route, after all, we have been stable use for more than two years, there is no big problem.

  • React-router-cache-route (recommended)
  • React Activation (same author as the tool above, Vue implementation in React, with Babel precompile for more stable KeepAlive functionality)
  • Umi-plugin-keep-alive (umi plugin on top wheel)
  • React-keeper (774 star)
  • React-antd-multi-tabs – Admin (73 star, ANTD
  • React-live-route (207 STAR) react-Live-route (207 STAR)
  • React Ant (232 STAR Ant Design Pro 2.0 with Multiple Tabs)
  • Ant Design Pro Plus (88 Star, Do some minor work based on Ant-Design-Pro)
  • React Admin (83 STAR, Ant Design React Management System)
  • Ant_pro_tabs (82 STAR, multiple TAB pages based on Ant Design Pro 4, including: route linkage, list, multiple detail pages coexist, automatically add and close tabs, etc.)
  • Antd Pro Page Tabs (54 Star, Ant Design Pro
  • Alita/Packages/Tabs-Layout for mobile React framework

When you choose, you can examine the principle, star number, Issue number, PR number, etc., of course, you can also see the principle of their implementation, learn the idea of this piece is also good.

Six, the concluding

There should be a lot of demand for multiple tabs in the middle and background class system. React technology stack has not yet provided a unified solution, but it is currently in a state of wheels flying together. I hope the experience of this article can help you, less detours.

This article is participating in the “Nuggets 2021 Spring Recruiting activity”, click to see the details of the activity