skills.rest
lespaceman
lespacemanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

router-core/navigation

Implement type-safe navigation patterns in TanStack Router Core.

4|1|Updated Feb 3, 2026
Search Tags:#navigation#navigate#preloading#tanstack-router#link#relative-navigation
One-click install
npx skills add https://github.com/lespaceman/athena-workflow-marketplace --skill router-core-navigation-lespaceman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core/navigation
Source: https://github.com/lespaceman/athena-workflow-marketplace/tree/main/plugins/tanstack-start/skills/upstream/%40tanstack/router-core/skills/router-core/navigation
Command: npx skills add https://github.com/lespaceman/athena-workflow-marketplace --skill router-core-navigation-lespaceman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables developers to implement robust, typed navigation patterns within TanStack Router Core, covering link-based navigation, programmatic navigation, relative paths, preloading, and blockers across React apps.

Core Features & Use Cases

  • Link integration: Use the Link component for type-safe navigation with proper handling of path params and query parameters.
  • Programmatic navigation: UseNavigate and router.navigate support actions triggered by events or side effects.
  • Relative navigation and from: Resolve paths relative to the current route using from for intuitive back/forward navigation.
  • Preloading and blocking: Combine with preloading strategies and navigation blockers to improve UX and guard unsaved changes.

Quick Start

Use a Link to navigate to a route with parameters, or call useNavigate for programmatic navigation after an action.

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 with TanStack Router?▼

Type-safe navigation with TanStack Router is implemented using the Link component and useNavigate hook, which enforce valid path and query parameters during route transitions in React applications.

What is relative navigation and how does the from property work?▼

Relative navigation resolves target paths based on the current route. The from property anchors path resolution to a specific route, ensuring intuitive back and forward transitions within the route hierarchy.

Can I use programmatic navigation for redirects and side effects?▼

Programmatic navigation supports redirects and side effects through the useNavigate hook and router.navigate method, allowing developers to trigger route changes after async actions or events.

How do I block user navigation to guard unsaved changes in TanStack Router?▼

Navigation blockers guard unsaved changes by intercepting route transitions. They are applied alongside preloading strategies to prevent users from accidentally leaving forms with unsubmitted data.

Does TanStack Router core support route preloading?▼

TanStack Router core supports route preloading. Developers can apply preloading strategies alongside Link components to fetch route data and assets before navigation occurs, improving overall UX.

Related Skills

Explore More Software Engineering Skills→
lespacemanlespaceman
4

virtual-file-routes

Define and manage TanStack Router route trees with virtual and physical routes.

Community
Intermediate
MadAppGangMadAppGang
278

router-query-integration

Integrate TanStack Router loaders with TanStack Query for prefetching.

Official
Intermediate
sbsbhongsbsbhong

zustand

Adapt Zustand state management to json-render's StateStore for React Native JSON UI components.

Community
Intermediate
hashintelhashintel
7

router-core-navigation

Provide type-safe React routing utilities for declarative navigation and route preloading.

Official
Advanced