Documentation Getting Started Flow - auto file gen can get users stuck
#5,351 opened on Oct 3, 2025
Repository metrics
- Stars
- (4,419 stars)
- PR merge metrics
- (Avg merge 2d 8h) (71 merged PRs in 30d)
Description
Which project does this relate to?
Router
Describe the bug
New user follows the getting started flow "build from scratch" can get stuck with with dynamic paths "not working" because the posts.tsx which is meant to be a layout route in the example is auto filled with a page code.
There is nothing wrong with the code here it can just lead to a poor first experience of the framework.
Auto Filled posts.tsx
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/posts')({
component: RouteComponent,
})
function RouteComponent() {
return <div>Hello "/posts"!</div>
}
Potential solutions:
- Improve the documentation to clearly explain that users need to adjust the generated posts.tsx with an for dynamic routes to work; or
- Alternatively, change the auto-generated content for layout routes so it better reflects their intended use in the tutorial flow.
This would help prevent misunderstandings for first-time users.
Your Example Website or App
NA
Steps to Reproduce the Bug or Issue
How to reproduce:
- Following getting started guide
- Under Routing / Creating File Routes create the files in the order they are listed posts.tsx -> posts/index.tsx -> posts/$postId.tsx
- Check whether the dev server has auto filled the files with RouteComponents
- Navigate to localhost:3000/posts/10
Expected behavior
When dev app is running the dynamic url (posts/$postId.tsx) does not appear to be working because the posts.tsx captures all requests rather than being a layout route.
This is not a great experience for someone first exposure to the Tanstack framework.
Screenshots or Videos
Platform
NA
Additional context
No response