动态路由

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

约定

动态片段可以通过将文件或文件夹名称包裹在方括号中来创建：[片段名称]。例如，[id] 或 [slug]。

动态片段可以从 useRouter 访问。

示例

例如，一个博客可以包含以下路由 pages/blog/[slug].js，其中 [slug] 是博客文章的动态片段。

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
  return <p>Post: {router.query.slug}</p>
}

捕获所有片段

动态片段可以扩展为捕获所有后续片段，方法是在方括号内添加省略号 [...片段名称]。

例如，pages/shop/[...slug].js 将匹配 /shop/clothes，以及 /shop/clothes/tops、/shop/clothes/tops/t-shirts 等等。

可选的捕获所有片段

捕获所有片段可以设置为可选的，方法是将参数包含在双重方括号中：[[...片段名称]]。

例如，pages/shop/[[...slug]].js 也将匹配 /shop，除了 /shop/clothes、/shop/clothes/tops、/shop/clothes/tops/t-shirts。

捕获所有片段和可选的捕获所有片段之间的区别在于，对于可选的，不带参数的路由也会被匹配（在上面的示例中为 /shop）。