router-core/navigation

Provide type-safe navigation for TanStack Router in React apps.

Updated Apr 1, 2026
One-click install
npx skills add https://github.com/cill-i-am/task-tracker --skill router-core-navigation-cill-i-am
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: router-core/navigation
Source: https://github.com/cill-i-am/task-tracker/tree/main/.agents/skills/tanstack-router-navigation
Command: npx skills add https://github.com/cill-i-am/task-tracker --skill router-core-navigation-cill-i-am

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a type-safe, composable navigation toolkit for TanStack Router in React apps, enabling reliable routing patterns and reduced runtime errors.

Core Features & Use Cases

  • Link, useNavigate, and Navigate with type-safe params and relative navigation, including from and to usage.
  • Preloading strategies (intent, viewport, render), scroll restoration, and navigation blocking for unsaved changes.
  • Reusable utilities such as linkOptions and createLink with a consistent, type-safe API across a route tree.

Quick Start

Setup a basic router and add a Link to navigate to a parameterized route using $param syntax and a 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 set up type-safe navigation with TanStack Router in React?

You establish type-safe navigation by configuring a basic router and utilizing Link or useNavigate with a parameterized route using $param syntax and a params object to ensure type accuracy.

What is the best way to prevent runtime errors during React routing?

The best way to prevent runtime errors during React routing is to use a type-safe, composable navigation toolkit for TanStack Router, which enforces reliable routing patterns and validates params.

Can I block navigation in a React app to handle unsaved changes?

Yes, you can block navigation in a React app to handle unsaved changes. This navigation toolkit provides built-in navigation blocking features to prevent users from leaving routes prematurely.

How does preloading work with TanStack Router?

Preloading with TanStack Router works by supporting intent, viewport, and render strategies. These preloading options allow the application to fetch data before navigation occurs, improving route performance.

Does this navigation layer support scroll restoration across common app routes?

Yes, this navigation layer supports scroll restoration across common app routes. It provides built-in scroll restoration to maintain the correct scroll position when users navigate between routes.

How do I create a custom Link component with a consistent API in React?

You create a custom Link component with a consistent API in React by using reusable utilities such as linkOptions and createLink, which provide a type-safe interface across your route tree.