动态路由

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

约定

可以通过将文件名或文件夹名用方括号括起来创建动态路径段：[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，以及 /shop/clothes、/shop/clothes/tops、/shop/clothes/tops/t-shirts。

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