Getting Started

tanstack-router-keepalive is a route cache (aka keepalive in Vue) solution for @tanstack/react-router.

Using tanstack-router-keepalive is very easy. Let's get started quickly.

TIP

In following example, we use file-based routing which is recommended by @tanstack/react-router.

Install Dependencies

npm install tanstack-router-keepalive

Usage

First, you need to add KeepAliveProvider to the root component and wrap KeepAliveOutlet in it.

// __root.tsx

export const Route = createRootRoute({
  component: () => (
    <>
      <Outlet />
      <KeepAliveProvider>
        <KeepAliveOutlet />
      </KeepAliveProvider>
    </>
  ),
})

Then, set keepAlive to true in the route component's staticData.

// dashboard.tsx

export const Route = createFileRoute('/dashboard')({
  staticData: { keepAlive: true },
})

Now, the Dashboard route component will be cached.

That's all! As you can see, it's very easy to use tanstack-router-keepalive.

For more details, please refer to the example or online demo.