react页面缓存插件 react-router-cache-router

主要业务场景就是列表页跳转到详情页中，再回到列表页中，列表页还是保持之前的状态 比如：分页，搜索条件

网上搜索大概有几种方法：

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>
        )}
    />