动态路由

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

约定

可以通过将文件或文件夹名称用方括号括起来创建动态段：[segmentName]。例如，[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>
}

全部捕获段

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

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

可选全部捕获段

通过将参数包含在双重方括号 [[...segmentName]] 中，可以将全部捕获段设为可选。

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

全部捕获段和可选全部捕获段之间的区别在于，对于可选的，不带参数的路由也会被匹配（例如上面的 /shop）。