Next.js App Router如何用单一路由匹配含首页的所有路由？

直接用Next.js的可选全捕获路由就能实现只用一个路由匹配所有路径（包括首页/），不用维护两个重复的page.tsx文件。

具体操作： #

1. 删除原有的app/page.tsx和app/[...slug]/page.tsx文件
2. 在app目录下新建[[...slug]]文件夹，然后在里面创建page.tsx文件，代码如下：

import CommonComponent from "@/components/common-component";

export default function Page() {
  return <CommonComponent />;
}

原理： #

可选全捕获路由的双层方括号[[...slug]]表示这个路由段是可选的，既可以匹配空路径（也就是首页/），也可以匹配任意数量的URL分段（比如/about、/blog/post/1等），完美满足你的需求。

内容的提问来源于stack exchange，提问作者Shreyas Vaidya