动态路由

当您事先不知道确切的段名称并希望从动态数据创建路由时，可以使用动态段，在请求时填充或在构建时预渲染。

约定

可以通过将文件夹的名称用方括号括起来来创建动态段：[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>;
}

Route	Example 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() 页面。

备注

动态段相当于页面目录中的动态路由。

生成静态参数

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、Layouts 和 Pages 之间使用相同参数进行的 fetch 请求只会执行一次，这有助于减少构建时间。

如果要从页面目录进行迁移， 请使用迁移指南。

有关更多信息和高级用法，请参阅 generateStaticParams 服务器函数文档。

捕获所有段

动态段可以通过在括号内添加省略号 [...folderName] 来扩展为捕获所有后续段。

例如，app/shop/[...slug]/page.js 将匹配 /shop/clothes， 还将匹配 /shop/clothes/tops、/shop/clothes/tops/t-shirts 等。

Route	Example 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）。

Route	Example 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>;
}

Route	params 类型定义
app/blog/[slug]/page.js	{ slug: string }
app/shop/[...slug]/page.js	{ slug: string[] }
app/[categoryId]/[itemId]/page.js	{ categoryId: string, itemId: string }

备注

将来 TypeScript 插件 可能会自动完成这个操作。