Next.js中无参数时显示自定义组件替代404页面

你的问题核心是：使用[...catType]这种必填Catch-All路由时，空路径/search不会触发该页面组件，直接返回404。下面提供两种可行的解决方法：

方法一：新增独立的根搜索页面 #

在app/search目录下创建单独的page.tsx文件，专门处理无参数的/search请求：

import SearchAllProduct from "@/app/components/pagesComponents/search/allProducts/AllProducts";

export default function SearchRoot() {
  /* @ts-expect-error Server Component */
  return <SearchAllProduct />;
}

此时路由结构变为：

app/
└── search/
    ├── page.tsx          # 处理 /search
    └── [...catType]/
        └── page.tsx      # 处理带参数的 /search/xxx/xxx 等路径

这种方式逻辑分离清晰，后续根搜索和带参数搜索的扩展互不影响。

方法二：改为可选Catch-All路由 #

将原路由目录search/[...catType]重命名为search/[[...catType]]（添加一层方括号），这样空路径/search也会触发该页面组件。

你的现有page.tsx代码无需修改，当访问/search时，params.catType会是空数组，触发catType.length === 0的判断分支，返回SearchAllProduct组件。

两种方法任选其一即可，根据你的代码维护习惯选择：

• 方法一更适合后续需要对根搜索和带参数搜索做独立扩展的场景；
• 方法二更适合将所有搜索逻辑集中在一个组件内处理的场景。

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