动态路由

当您提前不知道段名并且想通过动态数据创建路由时，则可以使用在请求时填充或构建时预呈现的动态段。

公约

动态段可通过在文件夹名外包裹方括号来创建。例如，[id] 或 [slug].

动态段作为paramsprop 传递给layout, page, route, 和 generateMetadata functions.

例如

例如, 博客可以包含以下路由app/blog/[slug]/page.js，这里 [slug] 是博客文章的动态段。

export default function Page({ params }: { params: { slug: string } }) {
  return <div>My Post: {params.slug}</div>;
}

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' }

参阅generateStaticParams()页面了解如何为段生成参数。

您需要知道: 在pages目录中，动态段等同于动态路由。

Generating Static Params

generateStaticParams function 可以和动态路由段结合使用，以在构件时静态生成路由，而不是在请求时按需生成路由。

export async function generateStaticParams() {
  const posts = await fetch("https://.../posts").then((res) => res.json());

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

export async function generateStaticParams() {
  const posts = await fetch("https://.../posts").then((res) => res.json());

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

generateStaticParams function 的主要优点是其智能检索数据。 如果在generateStaticParams function 内使用fetch 获取内容, 则会自动记住这些请求。这意味着在多个 generateStaticParams、布局和页面中具有相同参数的请求只会发送一次，从而减少构建时间。

参阅 generateStaticParams server function 文档来获取更多信息和高级用例。

捕获所有段

可以通过在括号中添加省略号[...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/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts，也将匹配/shop。

catch-all 和 optional catch-all的区别是，使用 optional，不带参数的路由也会匹配。(上面示例中的/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添加的类型取决于配置的路由段。

export default function Page({ params }: { params: { slug: string } }) {
  return <h1>My Page</h1>;
}

export default function Page({ params }) {
  return <h1>My Page</h1>;
}

Route	params Type Definition
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 插件自动完成。