App Router 中基于文件的路由是如何工作的？

Question

Accepted Answer

在 App Router 中，**`app/` 目录内的文件夹结构定义了你的路由** — 无需编写路由配置。每个文件夹是一个 URL 段，其中的特殊文件定义了该段呈现的内容。 ## 文件夹 = URL 段 ```text app/ page.tsx → / about/page.tsx → /about blog/page.tsx → /blog blog/[slug]/page.tsx → /blog/:slug (dynamic segment) shop/(sale)/page.tsx → /shop (route group — parentheses don't add to URL) ``` ## 特殊文件每个文件夹可以包含保留的文件名，每个都有特定的作用： ```text page.tsx → the route's UI (REQUIRED to make a segment routable) layout.tsx → shared wrapper that persists across child routes loading.tsx → loading UI (auto-wraps the page in ) error.tsx → error boundary for the segment not-found.tsx→ 404 UI route.ts → an API endpoint (instead of a page) ``` ## 动态段 ```tsx // app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything export default function Post({ params }: { params: { slug: string } }) { return

Post: {params.slug}

; // params.slug = "hello" } ``` 方括号创建一个动态参数，通过 `params` 传递给页面。变体：`[...slug]`（捕获全部），`[[...slug]]`（可选捕获全部）。 ## 路由组和组织 ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` 圆括号创建**路由组**，用于组织文件或应用不同的布局，而不影响 URL。 ## 为什么这很重要基于文件的路由使 URL 结构从文件树中一目了然 — 无需维护和保持中央路由配置同步。了解特殊文件名（`page`、`layout`、`loading`、`error`、`route`）和方括号约定（`[param]`、`[...catchAll]`、`(group)`）是构建任何 App Router 应用的核心词汇。