` via `createPortal`. `KeepAlive` renders one `containerDivRef` element; `CacheComponent` uses a `useLayoutEffect` to move the currently-active cache div into that container and toggle `.active`/`.inactive` classes on siblings.
Three swap modes, picked from props:
- **`transition`**: mark prev siblings `.inactive`, wait `duration - 40ms`, remove them, then append the new div. Relies on user CSS keying off `.active`/`.inactive`.
- **`viewTransition`**: wraps the sync swap in `document.startViewTransition(...)`.
- **default**: synchronous swap inside the same `useLayoutEffect`.
When inactive **and** not in `include` / matching `exclude`, `CacheComponent` calls `destroy(cacheKey)` itself — this is how `include`/`exclude` eviction flows back into the parent's state.
A cache node only renders its children once `activatedRef.current` has ever been true, so cached-but-never-visited children are not mounted.
### Context + hooks
`CacheComponentProvider` wraps each cache node's children in `CacheComponentContext`, exposing `{ active, refresh, destroy, destroyAll, destroyOther, getCacheNodes, _cacheKey }`. `_cacheKey` is the private hook used by create-time lifecycle hooks to match `destroy` events.
- `useEffectOnActive` / `useLayoutEffectOnActive` — via `useOnActive`, skip when `!active`, optional `skipMount` to no-op the first render.
- `useEffectOnCreate` / `useLayoutEffectOnCreate` — via `useOnCreate`, run once, store the returned cleanup, then subscribe to the event bus so cleanup fires on `destroy`/`destroyAll`/`destroyOther`/`refresh` for the matching `_cacheKey`.
- `useKeepAliveContext` — direct read of the context.
### React version compatibility (`packages/core/src/compat/`)
- `Activity.tsx` feature-detects `React.Activity` (19.2+) and sets `hasNativeActivity`; `MemoizedActivty` delays the `visible`→`hidden` flip by `duration` ms so native Activity plays nicely with the transition swap.
- `safeStartTransition.ts` falls back to a synchronous call when `startTransition` isn't defined (< React 18).
- `enableActivity` is off by default. Turning it on changes the semantics of `useEffect` inside children: effects re-run on every activation instead of once at mount.
Peer-deps allow React `>=16.8.0`. README pins the split: use `keepalive-for-react@4.x` for React 18, `@5.x` for React 19.2+. React's `StrictMode` is known-incompatible in dev and must not be used.
### Router adapter (`packages/router/src/components/KeepAliveRouteOutlet/index.tsx`)
Tiny component: `activeCacheKey` defaults to `location.pathname + location.search`, and `children` is `useOutlet()` (optionally wrapped in `wrapperComponent`). All other `KeepAliveProps` are forwarded. If you need anything router-specific, add it here — core has no router awareness.
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2024 Rychen Wong
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
## Packages | Package | Version | Description | | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | | [keepalive-for-react](./packages/core) | [](https://npmjs.com/package/keepalive-for-react) | Core keepalive functionality | | [keepalive-for-react-router](./packages/router) | [](https://npmjs.com/package/keepalive-for-react-router) | React Router integration | ## Features - Support react-router-dom v6+ or react-router v7+ - Support React v16+ ~ v18+ (v19.2 Activity component support [v5.0.0]) - Support Suspense and Lazy import - Support ErrorBoundary - Support Custom Container - Support Switching Animation Transition with className `active` and `inactive` - Simply implement, without any extra dependencies and hacking ways - Only 6KB minified size - Support interrupt state effect when component is not active (v5.0.0) ## Attention - **Version Compatibility**: - For React 18, please use `keepalive-for-react@4.x.x` - For React 19.2+, please use `keepalive-for-react@5.x.x` - DO NOT use
{outlet}
);
}
```
details see [examples/react-router-dom-simple-starter](./examples/react-router-dom-simple-starter)
[](https://stackblitz.com/github/finedaybreak/keepalive-for-react/tree/main/examples/react-router-dom-simple-starter)
### in simple tabs
```bash
npm install keepalive-for-react
```
```tsx
const tabs = [
{
key: "tab1",
label: "Tab 1",
component: Tab1,
},
{
key: "tab2",
label: "Tab 2",
component: Tab2,
},
{
key: "tab3",
label: "Tab 3",
component: Tab3,
},
];
function App() {
const [currentTab, setCurrentTab] = useState("tab1");
const tab = useMemo(() => {
return tabs.find(tab => tab.key === currentTab);
}, [currentTab]);
return (
| string | RegExp;
include?: Array | string | RegExp;
onBeforeActive?: (activeCacheKey: string) => void;
customContainerRef?: RefObject;
cacheNodeClassName?: string;
containerClassName?: string;
errorElement?: ComponentType<{
children: ReactNode;
}>;
/**
* transition default false
*/
transition?: boolean;
/**
* use view transition to animate the component when switching tabs
* @see https://developer.chrome.com/docs/web-platform/view-transitions/
*/
viewTransition?: boolean;
/**
* transition duration default 200
*/
duration?: number;
aliveRef?: RefObject;
/**
* max alive time for cache node (second)
* @default 0 (no limit)
*/
maxAliveTime?: number | MaxAliveConfig[];
/**
* enable Activity component from react 19.2+
* @default false
* Attention: if enable Activity component, useEffect will trigger when the component is active
*/
enableActivity?: boolean;
}
interface MaxAliveConfig {
match: string | RegExp;
expire: number;
}
```
## Hooks
### useEffectOnActive
```tsx
useEffectOnActive(() => {
console.log("active");
}, []);
```
### useLayoutEffectOnActive
```tsx
useLayoutEffectOnActive(
() => {
console.log("active");
},
[],
false,
);
// the third parameter is optional, default is false,
// if true, which means the callback will be skipped when the useLayoutEffect is triggered in first render
```
### useEffectOnCreate
Run a callback only once when the component is first created (cached), and run the returned cleanup only when the component is destroyed from the cache. Unlike `useEffect(fn, [])`, it will NOT re-run when the cached component is re-activated.
```tsx
useEffectOnCreate(() => {
console.log("component created");
return () => {
console.log("component destroyed");
};
});
```
### useLayoutEffectOnCreate
Same as `useEffectOnCreate` but uses `useLayoutEffect` internally. Useful when the create-time logic needs to run synchronously before the browser paints.
```tsx
useLayoutEffectOnCreate(() => {
console.log("component created (layout)");
return () => {
console.log("component destroyed (layout)");
};
});
```
### useKeepAliveContext
type definition
```ts
interface KeepAliveContext {
/**
* whether the component is active
*/
active: boolean;
/**
* refresh the component
* @param {string} [cacheKey] - The cache key of the component. If not provided, the current cached component will be refreshed.
*/
refresh: (cacheKey?: string) => void;
/**
* destroy the component
* @param {string} [cacheKey] - the cache key of the component, if not provided, current active cached component will be destroyed
*/
destroy: (cacheKey?: string | string[]) => Promise;
/**
* destroy all components
*/
destroyAll: () => Promise;
/**
* destroy other components except the provided cacheKey
* @param {string} [cacheKey] - The cache key of the component. If not provided, destroy all components except the current active cached component.
*/
destroyOther: (cacheKey?: string) => Promise;
/**
* get the cache nodes
*/
getCacheNodes: () => Array;
}
```
```tsx
const { active, refresh, destroy, getCacheNodes } = useKeepAliveContext();
// active is a boolean, true is active, false is inactive
// refresh is a function, you can call it to refresh the component
// destroy is a function, you can call it to destroy the component
// ...
// getCacheNodes is a function, you can call it to get the cache nodes
```
### useKeepAliveRef
type definition
```ts
interface KeepAliveRef {
refresh: (cacheKey?: string) => void;
destroy: (cacheKey?: string | string[]) => Promise;
destroyAll: () => Promise;
destroyOther: (cacheKey?: string) => Promise;
getCacheNodes: () => Array;
}
```
```tsx
function App() {
const aliveRef = useKeepAliveRef();
// aliveRef.current is a KeepAliveRef object
// you can call refresh and destroy on aliveRef.current
aliveRef.current?.refresh();
// it is not necessary to call destroy manually, KeepAlive will handle it automatically
aliveRef.current?.destroy();
return {/* ... */} ;
}
// or
function AppRouter() {
const aliveRef = useKeepAliveRef();
// aliveRef.current is a KeepAliveRef object
// you can call refresh and destroy on aliveRef.current
aliveRef.current?.refresh();
aliveRef.current?.destroy();
return
{outlet}
);
}
```
详情请参见 [examples/react-router-dom-simple-starter](./examples/react-router-dom-simple-starter)
[](https://stackblitz.com/github/finedaybreak/keepalive-for-react/tree/main/examples/react-router-dom-simple-starter)
### 在简单标签页中
```bash
npm install keepalive-for-react
```
```tsx
const tabs = [
{
key: "tab1",
label: "标签1",
component: Tab1,
},
{
key: "tab2",
label: "标签2",
component: Tab2,
},
{
key: "tab3",
label: "标签3",
component: Tab3,
},
];
function App() {
const [currentTab, setCurrentTab] = useState("tab1");
const tab = useMemo(() => {
return tabs.find(tab => tab.key === currentTab);
}, [currentTab]);
return (
| string | RegExp;
include?: Array | string | RegExp;
onBeforeActive?: (activeCacheKey: string) => void;
customContainerRef?: RefObject;
cacheNodeClassName?: string;
containerClassName?: string;
errorElement?: ComponentType<{
children: ReactNode;
}>;
/**
* 过渡效果 默认false
*/
transition?: boolean;
/**
* 使用view transition来过渡组件 默认false
* @see https://developer.chrome.com/docs/web-platform/view-transitions/
*/
viewTransition?: boolean;
/**
* 过渡时间 默认200ms
*/
duration?: number;
aliveRef?: RefObject;
/**
* 缓存节点最大存活时间 (秒)
* @default 0 (无限制)
*/
maxAliveTime?: number | MaxAliveConfig[];
/**
* 启用 Activity 组件 from react 19.2+
* @default false
* 注意: 如果启用 Activity 组件, useEffect 会在组件激活时触发
*/
enableActivity?: boolean;
}
interface MaxAliveConfig {
match: string | RegExp;
expire: number;
}
```
## Hooks
### useEffectOnActive
```tsx
useEffectOnActive(() => {
console.log("active");
}, []);
```
### useLayoutEffectOnActive
```tsx
useLayoutEffectOnActive(
() => {
console.log("active");
},
[],
false,
);
// 第三个参数是可选的,默认为false,
// 如果为true,表示在首次渲染时触发useLayoutEffect时会跳过回调
```
### useEffectOnCreate
只在组件首次创建(加入缓存)时执行一次回调，并在组件从缓存中被销毁时执行返回的清理函数。与 `useEffect(fn, [])` 不同，被缓存的组件再次激活时 **不会** 重新执行。
```tsx
useEffectOnCreate(() => {
console.log("组件创建");
return () => {
console.log("组件销毁");
};
});
```
### useLayoutEffectOnCreate
与 `useEffectOnCreate` 行为一致,内部使用 `useLayoutEffect`。适用于需要在浏览器绘制前同步执行创建逻辑的场景。
```tsx
useLayoutEffectOnCreate(() => {
console.log("组件创建 (layout)");
return () => {
console.log("组件销毁 (layout)");
};
});
```
### useKeepAliveContext
类型定义
```ts
interface KeepAliveContext {
/**
* 组件是否处于活动状态
*/
active: boolean;
/**
* 刷新组件
* @param {string} [cacheKey] - 组件的缓存键。如果未提供，将刷新当前缓存的组件。
*/
refresh: (cacheKey?: string) => void;
/**
* 销毁组件
* @param {string} [cacheKey] - 组件的缓存键，如果未提供，将销毁当前活动的缓存组件。
*/
destroy: (cacheKey?: string | string[]) => Promise;
/**
* 销毁所有组件
*/
destroyAll: () => Promise;
/**
* 销毁除提供的cacheKey外的其他组件
* @param {string} [cacheKey] - 组件的缓存键。如果未提供，将销毁除当前活动缓存组件外的所有组件。
*/
destroyOther: (cacheKey?: string) => Promise;
/**
* 获取缓存节点
*/
getCacheNodes: () => Array;
}
```
```tsx
const { active, refresh, destroy, getCacheNodes } = useKeepAliveContext();
// active 是一个布尔值，true表示活动，false表示非活动
// refresh 是一个函数，你可以调用它来刷新组件
// destroy 是一个函数，你可以调用它来销毁组件
// ...
// getCacheNodes 是一个函数，你可以调用它来获取缓存节点
```
### useKeepAliveRef
类型定义
```ts
interface KeepAliveRef {
refresh: (cacheKey?: string) => void;
destroy: (cacheKey?: string | string[]) => Promise;
destroyAll: () => Promise;
destroyOther: (cacheKey?: string) => Promise;
getCacheNodes: () => Array;
}
```
```tsx
function App() {
const aliveRef = useKeepAliveRef();
// aliveRef.current 是一个 KeepAliveRef 对象
// 你可以在 aliveRef.current 上调用 refresh 和 destroy
aliveRef.current?.refresh();
// 通常不需要手动调用 destroy,KeepAlive 会自动处理
aliveRef.current?.destroy();
return {/* ... */} ;
}
// 或者
function AppRouter() {
const aliveRef = useKeepAliveRef();
// aliveRef.current 是一个 KeepAliveRef 对象
// 你可以在 aliveRef.current 上调用 refresh 和 destroy
aliveRef.current?.refresh();
aliveRef.current?.destroy();
return Vite + React + TS
================================================
FILE: examples/react-router-dom-simple-starter/package.json
================================================
{
"name": "react-router-dom-simple-starter",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"keepalive-for-react": "^5.0.10",
"keepalive-for-react-router": "^5.0.7",
"react": "^19.2.5",
"react-dom": "^19.2.5",
"react-router": "^7.10.1"
},
"devDependencies": {
"@eslint/js": "^9.39.1",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^4.7.0",
"autoprefixer": "^10.4.22",
"eslint": "^9.39.1",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.24",
"globals": "^15.15.0",
"postcss": "^8.5.6",
"tailwindcss": "^3.4.18",
"typescript": "^5.9.3",
"typescript-eslint": "^8.48.1",
"vite": "^6.4.1"
},
"pnpm": {
"onlyBuiltDependencies": [
"esbuild"
]
}
}
================================================
FILE: examples/react-router-dom-simple-starter/postcss.config.js
================================================
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
================================================
FILE: examples/react-router-dom-simple-starter/src/App.tsx
================================================
import { Fragment } from "react";
import { RouterProvider } from "react-router";
import router from "./router";
function App() {
return (
);
}
export default App;
================================================
FILE: examples/react-router-dom-simple-starter/src/index.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
keepalive-for-react animation example
transition should be set true to enable animation
and duration should be set to the animation duration
*/
.cache-component.active {
animation: fadeIn 0.3s ease-in-out, slideIn 0.3s ease-in-out;
}
.cache-component.inactive {
animation: fadeOut 0.3s ease-in-out, slideOut 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideOut {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
================================================
FILE: examples/react-router-dom-simple-starter/src/layout/index.tsx
================================================
import { useKeepAliveRef } from "keepalive-for-react";
import KeepAliveRouteOutlet from "keepalive-for-react-router";
import { ReactNode, Suspense, useEffect, useMemo, useRef } from "react";
import { Link, useLocation } from "react-router";
function Layout() {
const location = useLocation();
const activePath = location.pathname + location.search;
const aliveRef = useKeepAliveRef();
return (
);
}
// remember the scroll position of the page when switching routes
function MemoScrollTopWrapper(props: { children?: ReactNode }) {
const { children } = props;
const domRef = useRef(null);
const location = useLocation();
const scrollHistoryMap = useRef>(new Map());
const activeKey = useMemo(() => {
return location.pathname + location.search;
}, [location.pathname, location.search]);
useEffect(() => {
const divDom = domRef.current;
if (!divDom) return;
setTimeout(() => {
divDom.scrollTo(0, scrollHistoryMap.current.get(activeKey) || 0);
}, 300); // 300 milliseconds to wait for the animation transition ending
const onScroll = (e: Event) => {
const target = e.target as HTMLDivElement;
if (!target) return;
scrollHistoryMap.current.set(activeKey, target?.scrollTop || 0);
};
divDom?.addEventListener("scroll", onScroll, {
passive: true,
});
return () => {
divDom?.removeEventListener("scroll", onScroll);
};
}, [activeKey]);
return (
Loading...
}>{children};
}
export default Layout;
================================================
FILE: examples/react-router-dom-simple-starter/src/main.tsx
================================================
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
createRoot(document.getElementById("root")!).render(
KeepAlive for React
A React KeepAlive component like keep-alive in vue
[中文](./README.zh_CN.md) | English [](https://npmjs.com/package/keepalive-for-react) [](https://npmjs.com/package/keepalive-for-react) [![][discord-shield]][discord-link]## Packages | Package | Version | Description | | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | | [keepalive-for-react](./packages/core) | [](https://npmjs.com/package/keepalive-for-react) | Core keepalive functionality | | [keepalive-for-react-router](./packages/router) | [](https://npmjs.com/package/keepalive-for-react-router) | React Router integration | ## Features - Support react-router-dom v6+ or react-router v7+ - Support React v16+ ~ v18+ (v19.2 Activity component support [v5.0.0]) - Support Suspense and Lazy import - Support ErrorBoundary - Support Custom Container - Support Switching Animation Transition with className `active` and `inactive` - Simply implement, without any extra dependencies and hacking ways - Only 6KB minified size - Support interrupt state effect when component is not active (v5.0.0) ## Attention - **Version Compatibility**: - For React 18, please use `keepalive-for-react@4.x.x` - For React 19.2+, please use `keepalive-for-react@5.x.x` - DO NOT use
{/* ... */}
{tab &&
);
}
```
details see [examples/simple-tabs-starter](./examples/simple-tabs-starter)
[](https://stackblitz.com/github/finedaybreak/keepalive-for-react/tree/main/examples/simple-tabs-starter)
## KeepAlive Props
type definition
```tsx
interface KeepAliveProps {
// determine which component to is active
activeCacheKey: string;
children?: KeepAliveChildren;
/**
* max cache count default 10
*/
max?: number;
exclude?: Array
React KeepAlive 组件
一个类似Vue中keep-alive的React KeepAlive组件
[English](./README.md) | 中文 [](https://npmjs.com/package/keepalive-for-react) [](https://npmjs.com/package/keepalive-for-react) ## 包信息 | 包名 | 版本 | 描述 | | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- | | [keepalive-for-react](./packages/core) | [](https://npmjs.com/package/keepalive-for-react) | 核心keepalive功能 | | [keepalive-for-react-router](./packages/router) | [](https://npmjs.com/package/keepalive-for-react-router) | React Router集成 | ## 特性 - 支持react-router-dom v6+ 或 react-router v7+ - 支持React v16+ ~ v18+ (v19.2 Activity component support [v5.0.0]) - 支持Suspense和懒加载导入 - 支持错误边界 - 支持自定义容器 - 支持使用className `active`和`inactive`进行切换动画过渡 - 简单实现,无需任何额外依赖和hack方式 - 压缩后仅6KB大小 - 支持中断state Effect当组件不活动时 (v5.0.0) ## 注意事项 - **版本兼容性**： - React 18 请使用 `keepalive-for-react@4.x.x` - React 19.2+ 请使用 `keepalive-for-react@5.x.x` - 请勿使用
{/* ... */}
{tab &&
);
}
```
详情请参见 [examples/simple-tabs-starter](./examples/simple-tabs-starter)
[](https://stackblitz.com/github/finedaybreak/keepalive-for-react/tree/main/examples/simple-tabs-starter)
## KeepAlive 属性
类型定义
```tsx
interface KeepAliveProps {
// 确定哪个组件处于活动状态
activeCacheKey: string;
children?: KeepAliveChildren;
/**
* 最大缓存数量 默认10
*/
max?: number;
exclude?: Array
Home
About
Counter
Counter2
NestedA
NestedB
{children}
);
}
function CustomSuspense(props: { children: ReactNode }) {
const { children } = props;
return About
Counter
Active: {active ? "true" : "false"}
{count}
Home
Welcome to the home page, this is a simple example of how to use keepalive-for-react with react-router-dom.
Install
{`npm install keepalive-for-react react-router-dom`}
{"./src/layout/index.tsx"}
{`
Nested
NestedA
This is a nested route. It will be cached.
NestedB
This is a nested route. It will be cached.
Counter (No Cache)
{count}
{tabs.map(tab => (
setCurrentTab(tab.key)}
>
{tab.label}
))}
{/* 虽然 Activity 可以提高性能，但是这里为了有淡出效果，禁用了19.2 的 Activity 组件 */}
{tab &&
Tab1
This is a demo for keepalive-for-react,
you can use it to keep the component alive when switching tabs.
Shared Counter
{count}
Tab2
Active: {active ? "true" : "false"}
{count}
Shared Counter
{sharedCount}
Tab3 (no cache)
{count}
KeepAlive for React
A React KeepAlive component like keep-alive in vue
[中文](./README.zh_CN.md) | English [](https://npmjs.com/package/keepalive-for-react) [](https://npmjs.com/package/keepalive-for-react) [![][discord-shield]][discord-link]## Packages | Package | Version | Description | | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | | [keepalive-for-react](./packages/core) | [](https://npmjs.com/package/keepalive-for-react) | Core keepalive functionality | | [keepalive-for-react-router](./packages/router) | [](https://npmjs.com/package/keepalive-for-react-router) | React Router integration | ## Features - Support react-router-dom v6+ or react-router v7+ - Support React v16+ ~ v18+ (v19.2 Activity component support [v5.0.0]) - Support Suspense and Lazy import - Support ErrorBoundary - Support Custom Container - Support Switching Animation Transition with className `active` and `inactive` - Simply implement, without any extra dependencies and hacking ways - Only 6KB minified size - Support interrupt state effect when component is not active (v5.0.0) ## Attention - **Version Compatibility**: - For React 18, please use `keepalive-for-react@4.x.x` - For React 19.2+, please use `keepalive-for-react@5.x.x` - DO NOT use
{/* ... */}
{tab &&
);
}
```
details see [examples/simple-tabs-starter](./examples/simple-tabs-starter)
[](https://stackblitz.com/github/finedaybreak/keepalive-for-react/tree/main/examples/simple-tabs-starter)
## KeepAlive Props
type definition
```tsx
interface KeepAliveProps {
// determine which component to is active
activeCacheKey: string;
children?: KeepAliveChildren;
/**
* max cache count default 10
*/
max?: number;
exclude?: Array
React KeepAlive 组件
一个类似Vue中keep-alive的React KeepAlive组件
[English](./README.md) | 中文 [](https://npmjs.com/package/keepalive-for-react) [](https://npmjs.com/package/keepalive-for-react) ## 包信息 | 包名 | 版本 | 描述 | | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- | | [keepalive-for-react](./packages/core) | [](https://npmjs.com/package/keepalive-for-react) | 核心keepalive功能 | | [keepalive-for-react-router](./packages/router) | [](https://npmjs.com/package/keepalive-for-react-router) | React Router集成 | ## 特性 - 支持react-router-dom v6+ 或 react-router v7+ - 支持React v16+ ~ v18+ (v19.2 Activity component support [v5.0.0]) - 支持Suspense和懒加载导入 - 支持错误边界 - 支持自定义容器 - 支持使用className `active`和`inactive`进行切换动画过渡 - 简单实现,无需任何额外依赖和hack方式 - 压缩后仅6KB大小 - 支持中断state Effect当组件不活动时 (v5.0.0) ## 注意事项 - **版本兼容性**： - React 18 请使用 `keepalive-for-react@4.x.x` - React 19.2+ 请使用 `keepalive-for-react@5.x.x` - 请勿使用
{/* ... */}
{tab &&
);
}
```
详情请参见 [examples/simple-tabs-starter](./examples/simple-tabs-starter)
[](https://stackblitz.com/github/finedaybreak/keepalive-for-react/tree/main/examples/simple-tabs-starter)
## KeepAlive 属性
类型定义
```tsx
interface KeepAliveProps {
// 确定哪个组件处于活动状态
activeCacheKey: string;
children?: KeepAliveChildren;
/**
* 最大缓存数量 默认10
*/
max?: number;
exclude?: Array