Confusion about router.ts in the project structure

[mirumodapon]

Hi there, I created my first @TanStack/router project with following the documentaion. I noticed that the code in routes.ts and main.ts is very similar, and router.ts is not refeenced by any file. I'd like to ask what the purpose of the router.ts file is.

[abhayclasher]

The router.ts file serves as the central configuration point for your router instance. While it might seem redundant in a small starter project, it's essential for a few key reasons:

1. Type Safety (Module Augmentation): This is the most important role. TanStack Router uses TypeScript's module augmentation to provide global type safety. By defining the router in its own file and declaring the Register interface there, you ensure that hooks (like useNavigate), and <Link> components everywhere in your app are fully typed.

   import { createRouter } from '@tanstack/react-router'
   import { routeTree } from './routeTree.gen'
   
   export const router = createRouter({ routeTree })
   
   declare module '@tanstack/react-router' {
     interface Register {
       router: typeof router
     }
   }

2. Clean Entry Point: Your main.tsx (or App.tsx) should ideally focus on mounting the application. Importing the router instance keeps your entry point logic separated from the routing configuration.

3. External Access: If you need to access the router instance outside of React components (e.g., inside an auth utility or a state management store), having it exported from router.ts makes it easily accessible.

If you see the same initialization in main.ts, it might just be a simplified setup in the template, but moving it to its own file is the best practice for scalability.