摘要：
转载---官方文档：https://github.com/CJY0208/react-router-cache-route/blob/master/README_CN.md转载---官方文档：https://github.com/CJY0208/react-router-cache-route/blob/master/README_CN.mdCacheRoute搭配react-router工作的、带缓存功能的路由组件，类似于Vue中的keep-alive功能Reactv15+React-Routerv4+遇到的问题使用Route时，路由对应的组件在前进或后退无法被缓
CacheRoute
搭配react-router工作的、带缓存功能的路由组件，类似于Vue中的keep-alive功能
React v15+
React-Router v4+
遇到的问题
使用Route时，路由对应的组件在前进或后退无法被缓存，导致了数据和行为的丢失
例如：列表页滚动到底部后，点击跳转到详情页，返回后会回到列表页顶部，丢失了滚动位置和数据的记录
原因 & 解决方案
Route中配置的组件在路径不匹配时会被卸载（render 方法中 return null），对应的真实节点也将从 dom 树中删除
在阅读了Route的源码后我们发现可以将children当作方法来使用，以帮助我们手动控制渲染的行为
隐藏替代删除可以解决遇到的问题
安装
npm install react-router-cache-route --save
使用方法
可以使用CacheRoute组件的component，render，children属性装载组件
注意：缓存语句不要写在Switch组件当中，因为Switch组件会卸载掉所有非匹配状态下的路由，需使用CacheSwitch替代Switch
使用when属性决定何时使用缓存功能，可选值为 [forward,back,always] ，默认值为forward
使用className属性给包裹组件添加自定义样式
也可以使用behavior属性来自定义缓存状态下组件的隐藏方式，工作方式是根据CacheRoute当前的缓存状态，返回一个作用于包裹组件的props
import React from 'react'import { HashRouter as Router, Switch, Route } from 'react-router-dom'import CacheRoute, { CacheSwitch } from 'react-router-cache-route' import List from './components/List'import Item from './components/Item' import List2 from './components/List2'import Item2 from './components/Item2' const App = () =>( <Router>{/*也可使用 render, children prop <CacheRoute exact path="/list" render={props => <List {...props} />} /> 或 <CacheRoute exact path="/list"> {props => <List {...props} />} </CacheRoute> 或 <CacheRoute exact path="/list"> <div> 支持多个子组件 </div> <List /> </CacheRoute> */} <CacheRoute exact path="/list" component={List} when="always" /> <Switch> <Route exact path="/item/:id" component={Item} /> </Switch> <CacheSwitch> <CacheRoute exact path="/list2"component={List2} className="custom-style"behavior={cached => (cached ?{ style: { position: 'absolute', zIndex: -9999, opacity: 0, visibility: 'hidden', pointerEvents: 'none'}, className: '__CacheRoute__wrapper__cached'} : { className: '__CacheRoute__wrapper__uncached'})} /> <Route exact path="/item2/:id" component={Item2} /> <Route render={() =>( <div>404 未找到页面</div> )} /> </CacheSwitch> </Router> ) export default App
额外的生命周期
使用CacheRoute的组件将会得到一个名为cacheLifecycles的属性，里面包含两个额外生命周期的注入函数didCache和didRecover，分别用在组件被缓存和被恢复时
import React, { Component } from 'react'
export defaultclass List extends Component {
constructor(props, ...args) {
super(props, ...args)
props.cacheLifecycles.didCache(this.componentDidCache)
props.cacheLifecycles.didRecover(this.componentDidRecover)
}
componentDidCache = () =>{
console.log('List cached')
}
componentDidRecover = () =>{
console.log('List recovered')
}
render() {
return(
//...
)
}
}手动清除缓存
使用cacheKeyprop 和dropByCacheKey函数来手动控制缓存
import CacheRoute, { dropByCacheKey, getCachingKeys } from 'react-router-cache-route'
...
<CacheRoute ... cacheKey="MyComponent" />
...
console.log(getCachingKeys()) //如果 `cacheKey` prop 为 'MyComponent' 的缓存路由已处于缓存状态，将得到 ['MyComponent']
...
dropByCacheKey('MyComponent')
...