router-core/navigation

Expose type-safe navigation helpers for TanStack Router apps.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/guillempuche/engranatge --skill router-core-navigation-guillempuche
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: router-core/navigation
Source: https://github.com/guillempuche/engranatge/tree/main/docs/repos/tanstack-router/packages/router-core/skills/router-core/navigation
Command: npx skills add https://github.com/guillempuche/engranatge --skill router-core-navigation-guillempuche

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Clear, typed navigation primitives help developers build predictable, scalable SPAs with TanStack Router, reducing errors from ad-hoc string paths and inconsistent routing patterns.

Core Features & Use Cases

  • Link component, useNavigate, Navigate, and router.navigate provide a consistent, type-safe navigation surface.
  • Relative navigation using from/to enables flexible routing across nested routes and modular modules.
  • Preloading, navigation blocking, and scroll restoration improve UX and performance in real-world apps.
  • createLink and linkOptions enable reusable, type-checked navigation configurations.

Quick Start

Install tanstack-router and start using Link and useNavigate to implement navigation in your app.

Frequently Asked Questions about router-core/navigation

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

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

Type-safe navigation in TanStack Router uses Link, useNavigate, and Navigate helpers to provide a consistent routing surface. This reduces errors from ad-hoc string paths and ensures predictable, scalable SPA routing.

What is relative navigation and how does it work with nested routes?

Relative navigation uses from/to parameters to enable flexible routing across nested routes and modular structures. It allows developers to navigate relative to the current route context rather than specifying absolute paths.

Can I preload data and restore scroll position during navigation in TanStack Router?

Yes, TanStack Router supports preloading strategies and scroll restoration during navigation. These features improve UX and performance by prefetching data and maintaining scroll positions across route transitions.

How do I create reusable, type-checked link configurations?

Use createLink and linkOptions to create reusable, type-checked navigation configurations. These utilities enable developers to define consistent link behaviors and routing patterns across an application while maintaining type safety.

Does TanStack Router support navigation blocking for preventing route changes?

Yes, TanStack Router includes navigation blocking capabilities. This feature allows developers to intercept and prevent route transitions, which is useful for warning users about unsaved changes before leaving a page.

Why should I use type-safe navigation primitives instead of string-based paths?

Type-safe navigation primitives replace ad-hoc string paths with validated routing components, reducing runtime errors from typos and inconsistent patterns. This enables predictable, scalable SPA development with compiler-time validation.