react keep alive for react router
npm install @z-cloud/react-keep-alivebash
pnpm add @z-cloud/react-keep-alive
`
with
react-router v6+
`ts
import { Link, type UIMatch, useLocation, useMatches, useOutlet } from 'react-router'
import { KeepAlive, KeepAliveProvider } from '@z-cloud/react-keep-alive'
export function Layout() {
const { pathname } = useLocation()
const outlet = useOutlet()
const matches = useMatches() as UIMatch[]
const keepALive = matches.at(-1)?.handle?.keepAlive ?? false
return (
{outlet}
)
}
`
useActions
`ts
import { useActions } from '@z-cloud/react-keep-alive'
function Com() {
const { remount, clear, getActivatedIds, getDeactivatedIds } = useActions()
// remount 重新挂载指定组件,不传参数则重新挂载所有已激活组件
// clear 清除指定缓存,不传参数则全部清除
// getActivatedIds 获取已激活的组件ids
// getDeactivatedIds 获取已失活的组件ids
return 'Com'
}
`
useActivated and useDeactivated
`ts
import { useActivated, useDeactivated } from '@z-cloud/react-keep-alive'
function Com() {
useActivated(() => console.log('Com activated'))
useDeactivated(() => console.log('Com deactivated'))
return 'Com'
}
`
Activity 谨慎使用,持续关注官方 Activity 实现
> 如果你使用的 react 版本包含 Activity 或者 unstable_Activity 则使用react提供的组件,否则使用 Suspense 模拟实现
`ts
import { Activity } from '@z-cloud/react-keep-alive'
``