skills.rest
abereghici
abereghiciCOMMUNITY
Explore all skills by this author →
Website𝕏@alexandrubrgGitHub

lifecycle/migrate-from-react-router

Migrate React Router v7 projects to TanStack Router route definitions and navigation APIs.

Updated Apr 2, 2026
Search Tags:#refactoring#frontend#routing#migration#react-router#tanstack-router
One-click install
npx skills add https://github.com/abereghici/skills --skill lifecycle-migrate-from-react-router-abereghici
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lifecycle/migrate-from-react-router
Source: https://github.com/abereghici/skills/tree/main/vendor/tanstack-router/packages/react-router/skills/lifecycle/migrate-from-react-router
Command: npx skills add https://github.com/abereghici/skills --skill lifecycle-migrate-from-react-router-abereghici

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Step-by-step migration from React Router v7 to TanStack Router, reducing risk and time by providing a structured checklist for route definitions, navigation APIs, and loader conversions.

Core Features & Use Cases

  • Stepwise migration coverage for route definitions, Link/useNavigate, and dynamic routes from v7 to TanStack Router.
  • Guidance on replacing useSearchParams with validateSearch and useSearch, converting Outlet usage, and code splitting.
  • Real-world use: upgrading a large React application from React Router to TanStack Router while preserving UX and performance.

Quick Start

Start by creating a migration branch, installing TanStack Router, and beginning the conversion one route file at a time.

Frequently Asked Questions about lifecycle/migrate-from-react-router

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

FAQPage Schema
How do I migrate React Router v7 route definitions to TanStack Router?▼

Migrate React Router v7 route definitions by converting each route file individually to TanStack Router's route definition format, starting on a migration branch after installing the new router package alongside your existing setup.

What is the best way to replace useSearchParams with validateSearch and useSearch?▼

Replace useSearchParams with validateSearch and useSearch by adopting TanStack Router's strictly typed search param validation APIs, ensuring your URL search parameters are validated and type-safe after migration.

How do I convert Link and useNavigate from React Router to TanStack Router?▼

Convert Link and useNavigate by updating navigation calls to TanStack Router's from-based params, ensuring dynamic routes and navigation links map correctly to the new API structure and preserve existing UX.

How do I handle Outlet replacement and loader definitions when migrating to TanStack Router?▼

Handle Outlet replacement and loader definitions by swapping standard Outlet usage for TanStack Router's equivalent component and converting your React Router loaders to TanStack Router's specific loader format.

What are the code-splitting differences between React Router and TanStack Router?▼

Code-splitting differences involve adjusting route lazy-loading logic; TanStack Router handles code splitting differently than React Router v7, requiring updates to dynamic imports and route loading strategies during migration.

Related Skills

Explore More Software Engineering Skills→
anderskevanderskev
75

react-router-v7

Generate React Router v7 routing templates with loaders, actions, and nested routes.

Community
Advanced
christofferbergjchristofferbergj
5

tanstack-router-best-practices

Implement TanStack Router best practices for type-safe React routing.

Community
Advanced
AmbitionsXXXVAmbitionsXXXV
2

tanstack-router

Implement type-safe file-based routing for React SPAs with TanStack Router.

Community
Advanced
hungtrandigitalhungtrandigital

frontend-dev-guidelines

Guide React/TypeScript frontend architecture with TanStack Query, Router, and MUI v7.

Community
Intermediate