动态路由

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

---

约定

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

app/blog/[slug]/page.js

export default function Page({ params }) {
  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' }

See the generateStaticParams() page to learn how to generate the params for the segment.

提示

Dynamic Segments are equivalent to Dynamic Routes in the pages directory.

---

生成静态参数

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,
  }))
}

app/blog/[slug]/page.js

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/clothes、/shop/clothes/tops、/shop/clothes/tops/t-shirts 外,还会匹配 /shop。

捕获所有段和可选捕获所有段之间的区别在于,使用可选捕获所有段时,不带参数的路由也会被匹配(上例中的 /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>
}

app/blog/[slug]/page.js

export default function Page({ params }) {
  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 }

提示

将来,TypeScript 插件可能会自动完成这项工作。