当你不知道确切的段名，并且希望根据动态数据创建路由时，可以使用动态段，这些动态段可以在请求时填充，或在构建时进行 预渲染。
约定
动态段可以通过将文件夹名称用方括号包裹起来创建，例如 [folderName]。例如，[id] 或 [slug]。
动态段作为 params 属性传递给 layout、page、route 和 generateMetadata 函数。
示例
例如，一个博客可以包含以下路由 app/blog/[slug]/page.js，其中 [slug] 是博客文章的动态段。
// app/blog/[slug]/page.tsx export default function Page({ params }: { params: { slug: string } }) { return <div>My Post: {params.slug}</div>; }
| 路由 | 示例 URL | params |
|---|---|---|
app/blog/[slug]/page.js |
/blog/a |
{ slug: 'a' } |
app/blog/[slug]/page.js |
/blog/b |
{ slug: 'b' } |
app/blog/[slug]/page.js |
/blog/c |
{ slug: 'c' } |
请参阅 generateStaticParams() 页面以了解如何生成段的参数。
了解一下: 动态段相当于
pages目录中的 动态路由。
生成静态参数
generateStaticParams 函数可以与 动态路由段 结合使用，以 静态生成 路由，而不是在请求时按需生成。
// app/blog/[slug]/page.tsx export async function generateStaticParams() { const posts = await fetch('https://.../posts').then((res) => res.json()); return posts.map((post) => ({ slug: post.slug, })); }
generateStaticParams 函数的主要好处是其智能数据检索。如果在 generateStaticParams 函数中使用 fetch 请求获取内容，这些请求会 自动记忆。这意味着在多个 generateStaticParams、布局和页面中使用相同参数的 fetch 请求只会执行一次，从而减少构建时间。
如果你正在从 pages 目录迁移，请使用 迁移指南。
有关更多信息和高级用例，请参阅 generateStaticParams 服务器函数文档。
捕获所有段
动态段可以通过在方括号中添加省略号 [...folderName] 扩展为 捕获所有 后续段。
例如，app/shop/[...slug]/page.js 将匹配 /shop/clothes，但也匹配 /shop/clothes/tops、/shop/clothes/tops/t-shirts 等等。
| 路由 | 示例 URL | params |
|---|---|---|
app/shop/[...slug]/page.js |
/shop/a |
{ slug: ['a'] } |
app/shop/[...slug]/page.js |
/shop/a/b |
{ slug: ['a', 'b'] } |
app/shop/[...slug]/page.js |
/shop/a/b/c |
{ slug: ['a', 'b', 'c'] } |
可选捕获所有段
捕获所有段可以通过在方括号中包含双方括号 [[...folderName]] 使其 可选。
例如，app/shop/[[...slug]]/page.js 将 也 匹配 /shop，除了 /shop/clothes、/shop/clothes/tops、/shop/clothes/tops/t-shirts 外。
捕获所有 和 可选捕获所有 段的区别在于，使用可选段时，路由没有参数也会被匹配（例如上面的 /shop）。
| 路由 | 示例 URL | params |
|---|---|---|
app/shop/[[...slug]]/page.js |
/shop |
{} |
app/shop/[[...slug]]/page.js |
/shop/a |
{ slug: ['a'] } |
app/shop/[[...slug]]/page.js |
/shop/a/b |
{ slug: ['a', 'b'] } |
app/shop/[[...slug]]/page.js |
/shop/a/b/c |
{ slug: ['a', 'b', 'c'] } |
TypeScript
在使用 TypeScript 时，可以根据你配置的路由段为 params 添加类型。
// app/blog/[slug]/page.tsx export default function Page({ params }: { params: { slug: string } }) { return <h1>My Page</h1>; }
| 路由 |
params 类型定义 |
|---|---|
app/blog/[slug]/page.js |
{ slug: string } |
app/shop/[...slug]/page.js |
{ slug: string[] } |
app/shop/[[...slug]]/page.js |
{ slug?: string[] } |
app/[categoryId]/[itemId]/page.js |
{ categoryId: string, itemId: string } |
