next中 [slug]和[...slug]路由匹配的区别

在 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 = []（空数组），因为这是有效的路由。