动态路由

当您无法提前获知确切的路由段名称，并希望基于动态数据创建路由时，可以使用动态路由段。这些路由段会在请求时填充或在构建时进行预渲染。

约定

通过将文件名或文件夹名用方括号包裹即可创建动态路由段：[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）。