Reference

We provide some React Hooks to help you control route caching and lifecycle more flexibly.

useActiveEffect

TIP

Think it as useEffect for KeepAlive route.

useActiveEffect is used to execute the callback when the route is activated or deactivated.

It's similar to Vuejs's onActivated and onDeactivated hooks. See Vuejs Documentation for more details.

import { useActiveEffect } from 'tanstack-router-keepalive'

function Page() {
  useActiveEffect(() => {
    // Called on the first mount
    // and each time it is reactivated from the cache
    return () => {
      // Called when the route is unmounted
      // and when it enters the cache
    }
  }, [])
}

useKeepAlive

useKeepAlive is used to get and control route caching.

import { useKeepAlive } from 'keepalive-react-router'

function Page() {
  const { aliveRoutes, destroy, destroyAll } = useKeepAlive()
}

aliveRoutes

• Type: AliveRoutes

Gets all cached routes.

destroy

• Type: (pathname: string | string[]) => void

Destroys the specified route cache.

destroyAll

• Type: () => void

Destroys all route caches. If the current route is a KeepAlive route, it will not destroy the current route.