react-router-dom v6版本实现Tabs路由缓存切换

概要

摆了半年摊，好久没写代码了，今天有人问我怎么实现React-Router-dom类似标签页缓存。后面看了一下router的官网。很久以前用的是react-router v5那个比较容易实现。v6变化挺大，但了解react的机制和react-router的机制就容易了.

想做到切换标签保留页面的内容不变，就要了解react的机制

首先虚拟DOM的机制就是对比，如果找不到就会重新挂载，找到了就更新。

React-Router的机制就是匹配路径，找到了就返回对应的路由组件，找不到返回为null

思路就是v6版本提供了Outlet这个输出子路元素的组件

一般我们会这样写：

但如果要实现标签的话，就不能这样写。但是切换路由，地址一变它就替换了原来的了。所以要做的就是保留所有打开的标签的子路由元素：

主要目的就是保留所有的元素，隐藏路由就行，这样react diff时，还是会找到对应key的路由，这样它只是会更新路由的组件，而不会重新挂载。

如这样写：

效果

完整代码

新建一个html复制进去就可以运行了

DOCTYPE html>
    
    
    
    
    
    
 
    
    
    
    
 
    
    
    
        src="https://cdn.jsdelivr.net/npm/react-router-dom@6.17.0/dist/umd/react-router-dom.production.min.js">