react-live-route(react的组件缓存)使用
react-live-route(react的组件缓存)使用
开题:之前用了react-keeper但是有BUG（scroll的位置不准确,而且onscroll的事件也无法监听到），
所以抛弃之！太坑了，
于是乎，找到了react-live-router，完美解决我们的问题：
下面是是使用方法：
1.下载库：
npm i react-live-route2.在外面的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中引用
<div className="routerBox">
<Suspense fallback={"加载中。。"}>
<Switch>
{/* 路由重定向 */}
<Route
exact
path="/"
render={() => {
return <Redirect to={{ pathname: `/book` }} />;
}}
/>
<Route path="/book" />
</Switch>
<LiveRoute
path="/book"
component={Index}
alwaysLive={true}
name="book"
onHide={(location, match, history, livePath, alwaysLive) => {
console.log("hide hook tiggered");
}}
onReappear={(location, match, history, livePath, alwaysLive) => {
console.log("reappear hook tiggered");
}}
/>
</Suspense>
</div>另外：关于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'
<LiveRoute path="/list" livePath="/user/:id" component={List}/>alwaysLive
alwaysLive 和 livePath 差不都，区别是路由的组件会在第一次 mount 后在其他任何路径都不会再被卸载。
例如：Modal 页面在第一次正常渲染之后，进入路径不匹配的页面时隐藏，而在 Modal 路径匹配时更新渲染。
import LiveRoute from 'react-live-route'
<LiveRoute path="/list" alwaysLive={true} component={Modal}/>注意存在的一个BUG：使用了react-live-route 路由缓存之后，再使用import lazy懒加载引入路由 会造成bug （缓存的路由 和其它的路由同时存在）
大概的开箱使用说明就这么多 具体请参考git仓库里面的说明：https://github.com/fi3ework/react-live-route/blob/master/docs/README-zh.md