tanstack-router-migration

Follow a phased approach: audit existing React Router usage, configure the TanStack Router build plugin, create a file-based routes directory, migrate routes and hooks incrementally, then remove React Router. The skill supports running both routers together during transition.

Define a Zod schema in the route file and pass it to validateSearch using zodValidator from @tanstack/zod-adapter. Then read values with routeApi.useSearch() and update them via navigate({ search: (prev) => ({ ...prev, key: value }) }).

Yes. You can wrap the TanStack Router root layout in a BrowserRouter and use a RouterSync component to bridge navigation to legacy code. Routes migrate one at a time until React Router can be removed entirely.

Type safety requires the from parameter matching the exact route path, including trailing slashes for index routes. You must also register the router type via declare module '@tanstack/react-router' with the Register interface.

No. routeTree.gen.ts is auto-generated by the build plugin whenever route files change. Editing it manually causes conflicts; instead configure the plugin options and let it regenerate. Many teams commit it to version control.

Create a test utility using createMemoryHistory and createRouter with your generated routeTree, then render with RouterProvider. Add the tanstackRouter Vite plugin to your Vitest config so the route tree generates during tests.