Exploring TanStack Router: Routing Modes, TypeScript Support, Preloading, and SWR

The author, already familiar with TanStack Query, decided to try TanStack Router after seeing an internal article about the new TNF framework, noting its relevance to Ant Group's middle‑platform infrastructure.

Rather than repeat basic usage tutorials that already exist on Juejin, Bilibili, and the official docs, this post focuses on the author's personal impressions and useful links.

TanStack Router defines three routing modes: file‑based routing , virtual file routing , and code‑based routing . Each mode offers a different way to declare routes.

In the file‑based approach, routes are generated from a routes folder using conventions similar to Umi or Next.js. Special identifiers such as __root , .lazy , and $ denote the root route, lazy‑loaded routes, and dynamic segments respectively.

The virtual file mode lets developers manually map route paths to file locations, providing flexibility for legacy projects that need custom routing structures.

Code‑based routing is the most explicit: developers create route objects via the API, build a route tree manually, and must specify a getParentRoute for each node to enable TypeScript inference. The addChildren helper simplifies dynamic permission routing.

TanStack Router offers full TypeScript support, delivering rich type hints for components like Link , dynamic parameters (e.g., /:postId ), and navigation functions, which greatly improves developer experience.

Preloading is supported through three strategies, allowing routes to be fetched ahead of time via the standard <link rel="preload"> mechanism, thereby reducing perceived load times.

The article also discusses the classic request‑waterfall problem where article details and comments are fetched sequentially. By moving data fetching into route loaders, requests can be parallelized and cached, improving performance.

Finally, the author explains the Stale‑While‑Revalidate (SWR) caching pattern within TanStack Router, showing how loaders can cache data with a configurable staleTime , reducing unnecessary network calls while keeping data fresh.

For deeper exploration, readers are encouraged to consult the official TanStack Router documentation.