TanStack/router

Documentation Getting Started Flow - auto file gen can get users stuck

开放

#5,351 创建于 2025年10月3日

 (0 条评论) (0 个反应) (0 位负责人)TypeScript (213 个派生)batch import
good first issue

仓库指标

星标
 (4,419 个星标)
PR 合并指标
 (平均合并 2天 8小时) (30 天内合并 71 个 PR)

描述

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:

  1. Following getting started guide
  2. Under Routing / Creating File Routes create the files in the order they are listed posts.tsx -> posts/index.tsx -> posts/$postId.tsx
  3. Check whether the dev server has auto filled the files with RouteComponents
  4. 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

贡献者指南