router-core/navigation

Resolve TanStack Router navigation with type-safe Link, useNavigate, and Navigate.

6|1|Updated Jun 1, 2025
One-click install
npx skills add https://github.com/rezics/rezics --skill router-core-navigation-rezics
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: router-core/navigation
Source: https://github.com/rezics/rezics/tree/main/.agents/skills/tanstack/router/router-core/navigation
Command: npx skills add https://github.com/rezics/rezics --skill router-core-navigation-rezics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Simplify and harden navigation in TanStack Router by providing a unified, type-safe toolkit for Link, useNavigate, and Navigate components, ensuring correct parameter handling and predictable behavior in complex UIs.

Core Features & Use Cases

  • Link with to, params, and active state support for robust in-UI navigation.
  • useNavigate for programmatic routing after actions or events, and Navigate for redirects.
  • Preloading, including per-link and global strategies, to improve perceived performance.
  • Navigation Blocking to guard against unsaved changes and confirm before leaving.
  • Utilities like linkOptions and createLink for type-safe, reusable navigation.
  • Scroll restoration and relative navigation support via from usage.

Quick Start

Create a basic route and render a Link to navigate to a route, passing parameters via the params object.

Frequently Asked Questions about router-core/navigation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle type-safe navigation parameters in TanStack Router?

Navigation blocking in TanStack Router guards against unsaved changes by intercepting route transitions and requiring confirmation before leaving. This prevents accidental data loss when users navigate away from forms with modified content.

How do I configure preloading strategies for TanStack Router links?

Preloading in TanStack Router supports both per-link and global strategies to improve perceived performance by fetching route resources ahead of navigation. Configuration is applied directly to Link components or set globally across the routing layer.

Can I use programmatic routing with useNavigate after form submissions in TanStack Router?

Programmatic routing with useNavigate in TanStack Router handles post-action navigation by triggering route changes after events like form submissions. It provides type-safe parameter handling to ensure redirects reach the correct destination route.

What is the best way to create reusable navigation links in TanStack Router?

Reusable navigation links in TanStack Router are created using the linkOptions utility and createLink function, which generate type-safe, shareable navigation configurations. These utilities ensure consistent parameter handling and active state tracking across the application.

Does TanStack Router support scroll restoration and relative navigation?

TanStack Router supports scroll restoration to maintain scroll positions across navigations and relative navigation via the from property to resolve routes contextually. These features ensure predictable navigation behavior within complex UI hierarchies.