【基础版】React缓存路由

前言

项目背景

• React
• umi
• react-router5

需求

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

实践

• 在布局页面对页面进行缓存即可实现

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

  <Fragment> { Array.from(_routerMap.keys()).map(key=>{ const children = _routerMap.get(key) if(key === location.pathname){ return
  {children}
  } return
  {children}
  }) } </Fragment>

拓展

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

最后

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