【基础版】React缓存路由

前言

项目背景

• React
• umi
• react-router5

需求

用户在某一页面操作后点击跳转到其详情页，返回到列表页还是之前操作过的页面，即把页面缓存下来（基础版先处理路由缓存，tab页展示先不处理）

实践

• 在布局页面对页面进行缓存即可实现
• 采用Map数据结构对页面进行缓存，性能方面更优，读取删除也方便~

<Fragment>{Array.from(_routerMap.keys()).map(key=>{const children = _routerMap.get(key)if(key === location.pathname){return <div key={key}>{children}</div>}return <div style={{display:'none'}} key={key}>{children}</div>})}</Fragment>

拓展 

tab页展示的话，目前没有找到对应读取路由信息（包含路由所有信息）的api，需要自己实现--对路由进行过滤即可~

最后

根据以上的关键代码就可实现路由缓存啦~