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>
    )
}