navigation

Pass the route path with $ segments to the `to` prop and supply values via the `params` object, e.g. <Link to="/posts/$postId" params={{ postId }}>. Never interpolate params into the `to` string, as that breaks type safety and param encoding.

Set defaultPreload: 'intent' on createRouter, or add preload="intent" per Link. Preloaded data stays fresh for 30 seconds by default; set defaultPreloadStaleTime to 0 when using an external cache like TanStack Query.

Use Link for anything the user clicks, since it renders a real anchor with href, accessibility, and preloading. Use useNavigate only for programmatic navigation after side effects like form submissions or async actions.

Use the useBlocker hook with a shouldBlockFn that returns true when the form is dirty. Add withResolver: true to get proceed, reset, and status for rendering a custom confirmation dialog instead of window.confirm.

Without a `from` prop, relative paths like '..' resolve from the root route instead of the current one. Pass from={Route.fullPath} so relative navigation resolves against the current route and stays type-safe.

Passing search as a plain object replaces all existing search params. Use the function form search={(prev) => ({ ...prev, page: 2 })} to merge new values with the current search state.