The one idea
A TanStack <Link> is typed — its to,
path params and search are checked against the route tree at compile
time (a wrong param is a build error, not a 404). And it can preload its
route's loader on hover / in-view / on-render, so the click that follows feels instant.
One component does four jobs a raw <a href> cannot: it builds a type-safe URL,
it can warm the route's data ahead of time, it knows whether it is the active route, and
it round-trips typed search/hash. navigate() is the imperative twin for side-effect
navigations. This playground simulates all of it deterministically.
1 · The typed <Link> — a wrong param is a compile error
to is matched to the generated route tree, so the compiler knows which path params a
route requires. For to="/posts/$postId" the postId param is mandatory;
omit it and TypeScript refuses to compile. The cards below are checked by the identical pure
function the gold-check runs — the broken link is flagged type error.
2 · Preloading — hover an intent link, watch it warm up
Toggle the global preload mode, then hover a link (or hit simulate hover).
intent fires the route's loader after preloadDelay (default 50ms)
— once warm, the later click navigates at ~0ms instead of paying the full loader latency.
Preloaded entries stay fresh for preloadStaleTime (default 30s) and are GC'd
after preloadGcTime (default 30min) if never used.
3 · Active state — inclusive vs exact (the parent-route gotcha)
By default a link is active when its built path is a prefix of the current route
(exact:false) — so on /posts/42 the /posts link and even the
/ link light up. Flip exact:true (typical for the home link) and only a
precise match counts. The data-status="active" attribute / activeProps is
how you style it.
Preload modes — when each fires, and when to reach for it
Four values: false, 'intent', 'viewport', 'render'
(the last ≈ "always"). Set the default on the router via defaultPreload; override per
link with the preload prop.
to/param type-check, preload timings and active-matching here mirror the
real behavior, but real route-tree inference only happens under the actual compiler. Cross-refs:
🔗 router_type_safety (typed to) ·
🔗 loaders_data (what preload actually runs) ·
🔗 path_search_params (typed search in links).