router-core-navigation

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

7|Updated Mar 16, 2026
One-click install
npx skills add https://github.com/hashintel/brunch --skill router-core-navigation-hashintel
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: router-core-navigation
Source: https://github.com/hashintel/brunch/tree/main/.agents/skills/router-core-navigation
Command: npx skills add https://github.com/hashintel/brunch --skill router-core-navigation-hashintel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Simplifies navigation handling and routing logic in React applications by providing a complete, type-safe set of components and hooks.

Core Features & Use Cases

  • Declarative Linking: Easily create links with active state management and relative navigation.
  • Programmatic Navigation: Use hooks like useNavigate for event-driven route changes.
  • Preloading Strategies: Improve performance with route preloading based on user behavior.
  • Navigation Blocking: Prevent accidental navigation away from unsaved forms or critical workflows.
  • Scroll Restoration & MatchRoute: Manage scroll position and display loading states during route transitions.
  • Component Wrappers: Create custom, type-safe link components with the createLink utility for enhanced reuse.

Quick Start

Import Link and use it to create a navigation button that preserves active styles without manual state management.

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 a React Router application?

Type-safe navigation in React Router is implemented using declarative linking components and programmatic hooks that enforce proper parameter handling. This prevents invalid route states by validating navigation inputs at compile time, ensuring safer route changes.

What is the best way to preload React Router routes for performance?

Route preloading for React Router improves performance by loading route data based on user behavior before navigation completes. This mechanism minimizes loading states during transitions by fetching necessary resources ahead of route matching.

How does navigation blocking prevent data loss in React web applications?

Navigation blocking prevents data loss by stopping accidental route transitions away from unsaved forms or critical workflows. It intercepts the navigation event to ensure users complete required actions before leaving the current route state.

Can I create custom link components with active state management in React Router?

You can create custom link components with active state management using the createLink utility. This wrapper enables relative navigation and reusable, type-safe linking without manual state tracking across your React application.

How do you manage scroll restoration during React route transitions?

Scroll restoration during React route transitions is managed by tracking scroll positions and route matching states. This process automatically restores the user's scroll location upon returning to a previously visited route, improving user experience.