Migration Checklist: React Router to TanStack Router

title: Migration from React Router Checklist toc: false

If your UI is blank, open the console, and you will probably have some errors that read something along the lines of cannot use 'useNavigate' outside of context . This means there are React Router api’s that are still imported and referenced that you need to find and remove. The easiest way to make sure you find all React Router imports is to uninstall react-router-dom and then you should get typescript errors in your files. Then you will know what to change to a @tanstack/react-router import.

Here is the example repo

• Install Router - npm i @tanstack/react-router (see detailed installation guide)
• Optional: Uninstall React Router to get TypeScript errors on imports.
• Create Routes for each existing React Router route we have
• Create root route
• Create router instance
• Add global module in main.tsx
• Remove any React Router (createBrowserRouter or BrowserRouter), Routes, and Route Components from main.tsx
• Optional: Refactor render function for custom setup/providers - The repo referenced above has an example
• Set RouterProvider and pass it the router as the prop
• Replace all instances of React Router Link component with @tanstack/react-router Link component
• Replace all instances of React Router useNavigate hook with @tanstack/react-router useNavigate hook
• Replace any React Router Outlet's with the @tanstack/react-router equivalent
• If you are using useSearchParams hook from React Router, move the search params default value to the validateSearch property on a Route definition.
• If using React Router’s useParams hook, update the import to be from @tanstack/react-router and set the from property to the literal path name where you want to read the params object from