动态路由

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

约定

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

动态片段可以通过 useRouter 访问。

示例

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

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
  return <p>文章：{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）。