zl_Alien的博客

一 一切根源都从产品小姐姐无厘头需求开始最近在开发业务项目的时候，产品小姐姐突然来到我身边，然后就对着电脑一顿操作，具体场景大致是这样的。场景一：如上图所示，当在数万级别的数据中，选择一条，点击查看，跳转到当前数据的详情页，当点击按钮返回返回来，或者是浏览器前进后退等其他操作，返回到列表页的时候。要记录当前列表的位置。也就是要还原点击查看查看前的页面。但是当点击tab菜单按钮的时候，要清除页面信息。场景二：如上图所示，当我们编辑内容的时候，一些数据可能从其他页面获得，所以要求，无论切换路由，切

一 介绍基于react 16.8+ ,react-router 4+ 开发的react缓存组件，可以用于缓存页面组件，类似vue的keepalive包裹vue-router的效果功能。采用react hooks全新api,支持缓存路由，手动解除缓存，增加了缓存的状态周期，监听函数等。后续版本会完善其他功能。demo缓存组件 + 监听二 快速上手下载npm install react-keepalive-router --save# oryarn add react-keepalive-.

写在前面：为什么要学习react-router底层源码? 为什么要弄明白整个路由流程？ 笔者个人感觉学习react-router，有助于我们学习单页面应用(spa)路由跳转原理，让我们理解从history.push，到组件页面切换的全套流程，使我们在面试的时候不再为路由相关的问题发怵，废话不说，让我们开启深入react-router源码之旅吧。一 正确理解react-router1 理解单页面应用什么是单页面应用？个人理解，单页面应用是使用一个html下，一次性加载js, css等资源，所有页面.