@chanjs/keepalive


介绍

简单实现 react 的 keepalive 功能。

使用

``tsx
import React, {useState, useContext,} from 'react';
import ReactDOM from 'react-dom/client';
import {HashRouter, Routes, Route, Link, useLocation} from "react-router-dom";

import KeepAliveLayout, {useKeepOutlets, KeepAliveContext} from '@chanjs/keepalive'

const Top = () => {
const {pathname} = useLocation();
// 使用useKeepOutlets代替useOutlet
const child = useKeepOutlets();
return (

当前的路由：{pathname}

{child}

)
}

const Home = () => {
const [num, setNum] = useState(0)
return (
<>

{num}

{
setNum(num - 1)
}}>数字减一

go Users
);
};

const Users = () => {
const [num, setNum] = useState(0)
// 通过useContext(KeepAliveContext)获取delCache删除缓存事件
const {delCache} = useContext(KeepAliveContext)
const {pathname} = useLocation()
return (
<>

{num}

{
setNum(num + 1)
}}>数字加一

{/ 可以通过delCache事件控制删除缓存 /}
{
delCache(pathname)
}}>清除缓存

go Home
);
};

const App = () => {
return (
//KeepAliveLayout包裹路由，keepalive通过数组传递需要keepalive的路由，支持正则表达式



}>
}/>
}/>




);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));
``