react-router-dom 保存组件状态1. 什么是保存组件见状用过vue的同学肯定都知道vue中有个kee-a

用过vue的同学肯定都知道vue中有个kee-alive组件，在切换组件的时候在切换回去组件的状态还是不变。

因为官方没有出对应的功能。我查了一些资料，现在有很多第三方库模拟keep-alive

重写路由库，如react-keeper

基于组件现有行为做拓展，如react-router-cache-route

基于ReactDom.createPortal实现，如react-keep-alive

基于Dom操作实现，如react-activation 这种本人试过，不是我想要的效果，而且会增加额外2层div

路由原理就是根据浏览器路径去显示不用的组件，没有什么魔法

因为前面的第三方库觉得都不是很理想。目前我的做法是在现有的react-router使用div的display: 'none'，来操作。这种操作不管是v6版本，还是v5版本都无所谓，只是利用一下react-router库，匹配逻辑自己写一下，来达到一个很高的灵活度和可拓展度。

下面是路径匹配的规则，很简单，只要组件的path被包含在浏览器路径里面就显示

添加图片注释，不超过 140 字（可选）组件代码

下面看演示, 可以看到一开始只显示当前组件

当路由切换后组件不会销毁，直到整个父级被销毁才追销毁

这么做的一个好处是，对于任何版的react-router-dom都是非非侵入式的，而且都能用。不影响现有功能，不好的地方就是多加了一个div来做display: 'none'，页面上可以看到dom元素。

如果大家有好的库麻烦推荐一下，我去试试，需要有vue的那种功能的，因为很多库我只要路由写法稍微不一样，就用不了了，或者会有新的bug。欢迎各位大佬推荐。