tanstack-router-cache

Route view caching for @tanstack/react-router.

Keep selected route trees mounted while they are hidden, then restore them when the user navigates back.

Install

npm install tanstack-router-cache

bun add tanstack-router-cache

Requirements

Your app should already install these packages:

| Package | Supported versions | | ------------------------ | ------------------------- | | react | >=19.2.0 <20.0.0 | | react-dom | >=19.2.0 <20.0.0 | | @tanstack/react-router | >=1.168.14 <2.0.0 |

Usage

Wrap your route outlet once:

import { RouterCacheOutlet, RouterCacheProvider } from "tanstack-router-cache";

export function RootRoute() {
  return (
    <RouterCacheProvider>
      <RouterCacheOutlet />
    </RouterCacheProvider>
  );
}

Enable caching on any route that should stay mounted:

export const Route = createFileRoute("/customers")({
  staticData: {
    routeCache: true,
  },
  component: CustomersPage,
});

Routes pause effects while hidden by default. For component-level loaders that must not restart on return navigation, use defineRouteCache({ effectMode: "keep-alive" }).

For the full API, see docs.

Examples

• Demo app: one Vite app with a basic flow for most users and a power-user flow for edge cases.

Acknowledgements

This project originated from hemengke1997/tanstack-router-keepalive, then diverged with current TanStack Router compatibility, a different API, cache limits, error handling, navigation lifecycle tools, dependency updates, and memory-focused eviction.

License

MIT. See LICENSE.