router-core/navigation

Pass the route path with a $ segment to the to prop and supply values via the params object, for example to="/posts/$postId" with params={{ postId }}. Never interpolate values into the to string, as that breaks type safety and param encoding.

Use Link for anything the user clicks, since it renders a real anchor with href, accessibility, and preloading. Reserve useNavigate for programmatic side-effect navigation, such as redirecting after a form submission or async action.

Set defaultPreload to intent, viewport, or render on the router, or per Link with the preload prop. Preloaded data stays fresh for 30 seconds by default; set defaultPreloadStaleTime to 0 when an external cache like TanStack Query controls freshness.

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 the native confirm.

Without the from option, 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 preserve current params while updating specific values.