React-Route6实现keep-alive效果

import React, { useRef, createContext, useContext } from 'react'
import { useOutlet, useLocation, matchPath } from 'react-router-dom'
import type { FC } from 'react'
//在组件外部建立一个Context
export const KeepAliveContext = createContext<KeepAliveLayoutProps>({ keepalive: [], keepElements: {} })

//给予页面缓存设置条件判断
const isKeepPath = (aliveList: any[], path: string) => {
  let isKeep = false
  aliveList.map(item => {
    if (item === path) {
      isKeep = true
    }
    if (item instanceof RegExp && item.test(path)) {
      isKeep = true
    } 
  })
  return isKeep
}
//判断当前页面是否已缓存，是则控制hidden开关显示 ，不是则正常渲染
export function useKeepOutlets() {
  const location = useLocation()
  const element = useOutlet()
  const { keepElements, keepalive } = useContext<any>(KeepAliveContext)
  const isKeep = isKeepPath(keepalive, location.pathname)
  if (isKeep) {
    keepElements.current[location.pathname] = element
  }
  //标签的显示与隐藏
  return <> {
    Object.entries(keepElements.current).map(([pathname, element]: any) => (
      <div key={pathname} 
      style={{ height: '100%', width: '100%', position: 'relative', overflow: 'hidden auto' }}       className="rumtime-keep-alive-layout" 
      hidden={!matchPath(location.pathname, pathname)}>
        {element}
      </div>
    ))
  }
    <div hidden={isKeep} style={{ height: '100%', width: '100%', position: 'relative', overflow: 'hidden auto' }} className="rumtime-keep-alive-layout-no">
      {!isKeep && element}
    </div>
  </>
}
//设置公共组件类型
interface KeepAliveLayoutProps {
  keepalive: any[]
  keepElements?: any
  dropByCacheKey?: (path: string) => void 
}
//封装公共组件
const KeepAliveLayout: FC<KeepAliveLayoutProps> = (props) => { 
  const { keepalive, ...other } = props
  const keepElements = React.useRef<any>({}) 
  function dropByCacheKey(path: string) { 
    keepElements.current[path] = null
   } return (<KeepAliveContext.Provider 
    value={{ keepalive, keepElements, dropByCacheKey }}
     {...other} />) 
    }
  
  export default KeepAliveLayout

import KeepAliveLayout, { useKeepOutlets, KeepAliveContext }from'@/components/KeepAliveLayout'
import { useLocation } from 'react-router-dom'
import React, { useState, useContext } from 'react'

// 使用KeepAliveLayout中的useKeepOutlets获取当前渲染的页面内容
const Layout = () => {
    const element = useKeepOutlets()
    return (
        {element}
    )
}
// 使用 KeepAliveLayout 包裹上下文
const App = () => {
    return (
        <KeepAliveLayout keepalive={[/./]}>//不可能组件都缓存吧所以需要设置缓存条件，可传可缓存的路径或正则表达式
            // App
        </KeepAliveLayout>
    );
}
// 使用 useContext 获取 dropByCacheKey 清除缓存
const Home = () => {
    const { dropByCacheKey } = useContext<any>(KeepAliveContext);
    const { pathname } = useLocation();
    return (
       <button onClick={() => dropByCacheKey(pathname)}>清除缓存</button>
    )
}