一 
    
    
、背景

在开发中 
    
    
，从A页面跳转到other页面
     


     


   ，再返回A页面时react-router会直接刷新页面 




 




 

，导致A页面中已加载的海量数据状态丢失 

   

   

，需要重新加载
     

     

  ，用户体验不佳  




  




  
，所以必须将海量数据状态进行缓存 
    
    
。

（在小编的实际场景中 


  


  


，A页面是一堆模型&业务数据标注点
     
     
 ，由于模型永远不会更改   




   




   ，但是加载又很缓慢 



 



 



，因此          ，希望从other页面返回A页面时
    




    




    ，模型不会重新加载













，但是需要更新业务数据
     


     


   。）

（其他应用场景举例：开发中有从详情页返回列表页的需求           ，这样一来页面返回后使用react-router会直接刷新页面
     



     



    ，导致页面中的分页和搜索条件全部丢失












，用户体验不佳 
    
    
，所以就必须将列表页的状态进行缓存 




 




 

。）

二
     


     


   、参考方法

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

1 




 




 

、使用localStorage/sessionStorage进行页面的状态的保存
     


     


   ，跳转页面后再进行获取 




 




 

，这种方法虽然可行 

   

   

，但是从根本来说还是从新向后台再一次请求了数据
     

     

  ，不算最佳方案 

   

   

。

2 

   

   

、react-activation,尝试未果

3
     

     

  、react-kepper,需要将项目的react-router替换掉  




  




  
，风险较大 


  


  


，慎用

4  




  




  
、react-router-cache-route,简单易用
     
     
 ，最佳方案

三 


  


  


、react-router-cache-route的使用

就是把Switch替换成CacheSwitch,因为因为Switch组件只保留第一个匹配状态的路由   




   




   ，卸载掉其他路由

把Route替换成CacheRoute

注意：other面回退A页面时使用this.props.history.push(‘’路径’)可以实现页面的缓存

但当使用this.props.history.go(-1)则缓存失败

四
     
     
 、具体步骤

1   




   




   、替换Switch和Route

静态路由 import React,{Component} from react import { Route} from react-router-dom import {CacheRoute,CacheSwitch} from react-router-cache-route import PageA from ./demo/PageA.js import PageB from ./demo/PageB.js import PageOther from ./demo/PageOther.js class App extends Component{ render(){ return( <div className=App> <CacheSwitch> <CacheRoute exact path=/platform/PageA component={PageA}/> <Route path=/platform/PageB component={PageB}/> <Route path=/platform/PageOther component={PageOther}/> </CacheSwitch> </div> ) } } export default App;

动态路由

function AppRouter() { return ( <Router history={history}> <AppContainer> <CustomHeader /> <CacheSwitch> {routes.map((route: RouteType, index: number) => { return route.cache ? ( <CacheRoute exact={true} path={`/${route.routerPath}`} key={index} component={route.component} /> ) : ( <Route // strict={true} exact={true} path={`/${route.routerPath}`} key={index} component={route.component} /> ); })} <Redirect to="/login" /> </CacheSwitch> </AppContainer> </Router> ); }

动态理由 



 



 



，加判断标志位:cache,只有传递了cache页面才能被缓存          ，没有传递cache
    




    




    ，就用普通路由形式

{ path: /PageA, component: PageA, cache:true,//判断标志位 }, { path: /PageB, component: PageB, },

2 



 



 



、如何更新其他想要更新的业务数据

//缓存A页面跳转至other页面（） componentDidCache = () => { console.log(List cached) } //缓存恢复（从other页面跳转返回A页面） componentDidRecover = () => { // 这里可以更新业务数据 console.log(List recovered) }

3          、参考

https://github.com/CJY0208/react-router-cache-route/blob/HEAD/README_CN.md