【基础版】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，需要自己实现——对路由进行过滤即可~

最后

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