主要业务场景就是列表页跳转到详情页中，再回到列表页中，列表页还是保持之前的状态 比如：分页，搜索条件
网上搜索大概有几种方法：
1. 使用localStorage/sessionStorage进行页面的状态的保存，跳转页面后再进行获取，这种方法虽然可行，但是从根本来说还是从新向后台再一次请求了数据，不算最佳方案。
2. react-kepper,需要将项目的react-router替换掉，风险较大，慎用
3. react-router-cache-route,简单易用，最佳方案
最后采用的第三种
基本使用方法：
就是把Switch替换成CacheSwitch,因为因为Switch组件只保留第一个匹配状态的路由，卸载掉其他路由把Route替换成CacheRoute
注意：详情页面回退列表页时使用this.props.history.push(‘路径‘)可以实现页面的缓存
但当使用this.props.history.go(-1)则有可能缓存失败
1. 安装
npm install react-router-cache-route --save / yarn add react-router-cache-route
2. 引入
import CacheRoute, { CacheSwitch } from ‘react-router-cache-route‘
3. 示例
const App = () => (
<Router>
<CacheSwitch>
<CacheRoute exact path="/list" component={List} />
<Route exact path="/item/:id" component={Item} />
<Route render={() => <div>404 Not Found</div>} />
</CacheSwitch>
</Router>
)
4. 注意
//解决缓存页面中的bug (菜单异常) 会出现监听不到路由
//给CacheRoute增加属性when 属性值为true false
//配置路由demo.js文件中
{ client_type: 2, name: ‘设备管理‘, path: ‘/web/monitor/device‘, cacheRoute: true, applyRouteName:[‘/web/monitor/device2/readDevice‘] }
//增加applyRouteName属性 值为：这个路由中的子路由地址
const whenFunction = (applyRouteName) => {
return () => applyRouteName!==undefined && applyRouteName.includes(window.location.pathname)
}
<CacheRoute path={item.path} key={item.path} cacheKey={"MyComponent"} exact when={whenFunction(item.applyRouteName)} render={route => ( <BaseView key={idx} {...route} handleHeader={handleHeader} handleSlider={handleSlider} listenRouterPath={listenRouterPath} > <Components {...route} /> </BaseView> )} />