在 Next.js 中,路由参数的匹配方式有两个主要形式:单个参数路径(使用方括号 [slug])和多个参数路径(使用扩展语法 […slug])。这两者的主要区别在于它们如何捕获 URL 中的路径段。
1、[slug] - 单个参数路径
- 定义:使用方括号定义的路由参数(例如,[slug].js)可以匹配 URL 中的一个路径段。
- 示例:如果你有一个文件 pages/blogs/[slug].tsx:
路由 /blogs/my-first-post 会被匹配到 slug = “my-first-post”。
如果访问 /blogs/2024/07/demo,这条路由将不会匹配,因为 [slug] 只能捕获一个部分,而这个路径段包含多个部分。
2、 […slug] - 扩展参数路径
- 定义:使用扩展语法(例如,[…slug].js)可以匹配 URL 中的零个或多个路径段,并将它们作为数组捕获。
- 示例:如果你有一个文件 pages/blogs/[…slug].tsx:
路由 /blogs/my-first-post 会被匹配到 slug = [“my-first-post”]。
路由 /blogs/2024/07/demo 会被匹配到 slug = [“2024”, “07”, “demo”]。
甚至 /blogs/ 也将匹配到 slug = [](空数组),因为这是有效的路由。