开题:之前用了react-keeper但是有BUG（scroll的位置不准确,而且onscroll的事件也无法监听到），
所以抛弃之！太坑了，
于是乎，找到了react-live-router，完美解决我们的问题：
下面是是使用方法：
1.下载库：
npm i react-live-route
复制代码
2.在外面的routes中配置使用
不需要改变我们之前的router结构（比如我之前用的react-router-dom）
开箱即用！这也是我选择使用这个库的原因,
import { Route, Redirect, withRouter, Switch } from "react-router-dom";
import NotLiveRoute from "react-live-route";
const LiveRoute = withRouter(NotLiveRoute);
复制代码
3.引入好了之后，可以直接添加在
注意：需要添加在Switch之外，相当于另外单独写了一个缓存的路由组件
需要缓存的路由的component也需要在LiveRoute中引用
复制代码
另外：关于livePath和alwaysLive两个属性的使用：
livePath
livePath 为需要隐藏的页面的路径，具体规则与 react-router 中的 Route 的 path props 一样，使用 component 或 render 来渲染路由对应的组件。
livePath 也可以接受一个由上述规则的 string 类型对象组成的数组，如果数组中的任意一个 string 匹配则 livePath 匹配。例如：["/path1","/path2","/path3/:id"]
LiveRoute 会在从 livePaht 匹配的路径返回 path 匹配的路径时冲渲染，在进入其他不匹配的路径时会直接卸载。
例如：
List 的路由会在 /list 下正常渲染，当进入 /user/:id 时会隐藏，当进入这两者以外的页面时会正常卸载。
import LiveRoute from 'react-live-route'
复制代码
alwaysLive
alwaysLive 和 livePath 差不都，区别是路由的组件会在第一次 mount 后在其他任何路径都不会再被卸载。
例如：Modal 页面在第一次正常渲染之后，进入路径不匹配的页面时隐藏，而在 Modal 路径匹配时更新渲染。
import LiveRoute from 'react-live-route'
复制代码
注意存在的一个BUG：使用了react-live-route 路由缓存之后，再使用import lazy懒加载引入路由 会造成bug （缓存的路由 和其它的路由同时存在）
大概的开箱使用说明就这么多 具体请参考git仓库里面的说明：https://github.com/fi3ework/react-live-route/blob/master/docs/README-zh.md
作者: Bill 本文地址: http://biaoblog.cn/info?id=1622616240000
版权声明: 本文为原创文章，版权归 biaoblog 个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！
