Tanstack Router Migration

What it does

This skill automates the migration of React applications from React Router to Tanstack Router, facilitating a smoother transition and minimizing disruption during application updates. It provides a structured process for both incremental and complete migrations, leveraging file-based routing within your project's src/routes directory. The tool generates code and configuration files to streamline this process while maintaining type safety and ensuring compatibility.

When to use it

• You are upgrading an existing React application that currently uses React Router.
• You want to adopt Tanstack Router’s file-based routing approach for improved organization and maintainability.
• You need a structured guide to migrate your application, including considerations for route guards and custom components.
• Your project utilizes TypeScript and you require type safety during the migration process.

Key capabilities

• Automated generation of router configuration files (routeTree.gen.ts).
• Support for incremental or complete migrations.
• File-based routing within a designated src/routes directory.
• TypeScript integration with the use of the from parameter in hooks and Zod schema validation.
• Configuration plugins for build tools like Rspack, Rsbuild, and Vite.

Example prompts

• "Migrate my React Router v6 application to Tanstack Router."
• "Generate a router configuration file for my project using the @tanstack/router-plugin with Rspack."
• "Show me how to configure linting rules specifically for files within my src/routes directory."

Tips & gotchas

• Build Tool Configuration is Crucial: Properly configuring your build tool plugin (Rspack, Rsbuild or Vite) before creating routes is essential. Refer to the provided documentation (references/build-configuration.md) for detailed instructions.
• Avoid Manual Editing: Do not directly edit the auto-generated routeTree.gen.ts file, as changes will be overwritten during subsequent migrations.
• Type Safety Matters: Always use the from parameter in hooks to ensure type safety during the migration process.