Next.js 14 如何配置捕获所有路由以处理多URL路径段？

1. 创建路由文件结构 #

在Next.js 14的app目录下，按目标路由层级创建包含[...slug]的文件夹，并在其中添加page.js（或page.tsx）文件：

• 对应博客路由/blog/[...slug]，创建路径：app/blog/[...slug]/page.js
• 对应产品路由/products/[...slug]，创建路径：app/products/[...slug]/page.js

2. 获取URL路径段参数 #

在page.js组件中，通过params props获取捕获到的路径段。params.slug是一个数组，包含URL中对应位置的所有分段：

博客路由示例代码

export default function BlogPage({ params }) {
  const { slug } = params;
  // 示例：/blog/2024/10/my-first-post → slug = ["2024", "10", "my-first-post"]
  
  return (
    <div>
      <h1>博客文章路径：{slug.join("/")}</h1>
      {/* 可根据slug数组查询对应文章数据并渲染 */}
    </div>
  );
}

产品路由示例代码

export default function ProductPage({ params }) {
  const { slug } = params;
  // 示例：/products/category/item-name → slug = ["category", "item-name"]
  
  return (
    <div>
      <h1>产品分类：{slug[0]}，商品名称：{slug[1]}</h1>
      {/* 可根据分类和商品名称加载对应产品信息 */}
    </div>
  );
}

3. 可选配置：匹配空路径的捕获路由 #

如果需要同时兼容/blog或/products这类无分段的路径，可将文件夹命名为[[...slug]]（双层方括号）。此时无分段URL对应的params.slug为undefined，需做兼容处理：

export default function BlogPage({ params }) {
  const { slug } = params;
  
  return (
    <div>
      {slug ? (
        <h1>博客文章：{slug.join("/")}</h1>
      ) : (
        <h1>博客首页</h1>
      )}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Abass Dev