Next.js App Router如何匹配含/的URL路径段？

不用搞多层嵌套的[id1]/[id2]这种繁琐结构，Next.js 13提供了两种官方方案直接解决你的需求：

1. Catch-All 路由（匹配非空任意深度路径） #

直接在object目录下创建[...anythingremaining]/page.tsx文件，这个路由会匹配object/之后任意数量的路径段，比如object/abcd、object/ab/cd、object/a/b/c/d这些都能命中。

在页面组件里，你可以通过params拿到所有路径段组成的数组，再拼接成完整路径：

export default function ObjectPage({ params }: { params: { anythingremaining: string[] } }) {
  // 把数组转成带斜杠的路径字符串，比如 ["a", "b", "c"] → "a/b/c"
  const fullPath = params.anythingremaining.join('/');
  return <div>当前匹配路径：{fullPath}</div>;
}

注意：这个路由不会匹配object/本身，如果需要包含空路径的情况，用下面的方案。

2. Optional Catch-All 路由（匹配空路径+任意深度路径） #

如果要同时处理object/（无后续路径）和所有子路径，就创建[[...anythingremaining]]/page.tsx（多一层中括号）。

对应的组件代码：

export default function ObjectPage({ params }: { params: { anythingremaining?: string[] } }) {
  // 空路径时返回空字符串，否则拼接路径段
  const fullPath = params.anythingremaining?.join('/') || '';
  return <div>当前匹配路径：{fullPath}</div>;
}

这样object/、object/abcd、object/a/b/c/d等所有相关路径都会被这个单个page.tsx处理。

内容的提问来源于stack exchange，提问作者David Mulder