react-keepalive-router缓存路由库

一 介绍

基于react 16.8+ ,react-router 4+ 开发的react缓存组件，可以用于缓存页面组件，类似vue的keepalive包裹vue-router的效果功能。

采用react hooks全新api,支持缓存路由，手动解除缓存，增加了缓存的状态周期，监听函数等。

后续版本会完善其他功能。

demo

缓存组件 + 监听

二 快速上手

下载

npm install react-keepalive-router --save
# or
yarn add react-keepalive-router

使用

1 基本用法

KeepliveRouterSwitch ,KeepliveRoute

KeepliveRouterSwitch,KeepliveRoute 基本使用和 Switch , Route没有任何区别

import { BrowserRouter as Router, Route, Redirect ,useHistory  } from 'react-router-dom'
import { KeepliveRouterSwitch ,KeepliveRoute ,addKeeperListener } from 'react-keepalive-router'

const index = () => {
  useEffect(()=>{
    /* 增加缓存监听器 */
    addKeeperListener((history,cacheKey)=>{
      if(history)console.log('当前激活状态缓存组件：'+ cacheKey )
    })