T
TanStack•7mo ago
genetic-orange

Why specify route path in code for file-based routes?

Hi, I'm learning about TSR via the website docs. I noticed that, for file based routing, the route paths still need to be specified in code like this 
export const Route = createFileRoute('/posts')({
  loader: fetchPosts,
  component: PostsComponent,
})
export const Route = createFileRoute('/posts')({
  loader: fetchPosts,
  component: PostsComponent,
})
It seems to me the value "/posts" is implied by the file location and a typo would result in inconsistency. Could someone help me understand why that parameter is necessary?
2 Replies
eager-peach
eager-peach•7mo ago
The file name tells @tanstack/router-plugin what to put there as the createFileRoute path. So if you change the file name, it will auto change the createFileRoute path. And also, if you change the createFileRoute path value, if it doesn't match your file path definition, it will change the createFileRoute path to match the file path definition. You need the value there no matter what (file based or code based) because that is how the type safety is inferred. And you can't have an inconsistency when doing file based routing because @tanstack/router-plugin will prevent that as explained above.
genetic-orange
genetic-orangeOP•7mo ago
oh i see. Looks like I'm misunderstanding this because I'm only reading through the docs and not trying it in vscode. I missed the part where router-plugin would automatically maintain the consistency of that param. Gonna try playing with an actual example project today Thanks

Did you find this page helpful?