Next.js 14嵌套路由并行路由硬导航出现404问题求助

问题原因 #

你遇到的核心问题是：并行路由的槽位（@tabs）用于在/gnb/mypage页面下同时渲染多个路由片段，但你访问的/gnb/mypage/tab1是独立的主路由路径——当前目录结构中，mypage层级没有对应的tab1目录和page.tsx文件，服务器端硬导航时Next.js找不到该路由的处理逻辑，因此返回404。而客户端点击Link导航正常，是因为Next.js客户端路由会直接切换并行槽内容，无需走服务器端路由匹配。

解决方案 #

方案1：使用拦截路由（Intercepting Routes）映射标签页URL #

拦截路由专门用于将外部URL路径映射到并行路由槽中，完美适配标签页场景。调整目录结构如下：

./src/app/gnb/mypage
├── @myactive
│   └── page.tsx
├── @mysubscribe
│   └── page.tsx
├── @tabs
│   ├── default.tsx
│   ├── layout.tsx
│   ├── page.tsx
│   ├── (..)tab1  # 拦截路由，格式为(..)目标路径
│   │   └── page.tsx
│   └── (..)tab2
│       └── page.tsx
├── layout.tsx
├── page.tsx
├── tab1  # 主路由占位，必须存在才能触发拦截
│   └── page.tsx
└── tab2
    └── page.tsx

• (..)tab1表示拦截上级目录（mypage）下的tab1路由，将其内容渲染到@tabs槽中
• 主路由的tab1/page.tsx可以是空文件，或添加重定向逻辑（拦截路由会优先渲染）

方案2：调整路由结构，将标签页作为主路由子节点 #

如果不想用拦截路由，可将tab1和tab2作为mypage的直接子路由，同时在子路由中复用并行槽内容：

1. 在mypage下创建tab1和tab2目录，各自添加page.tsx
2. 在tab1/page.tsx中直接渲染@tabs/tab1的内容，示例代码：

import TabsTab1 from '../@tabs/tab1/page';

export default function Tab1Page() {
  return <TabsTab1 />;
}

额外检查项 #

• 确保Next.js 14为最新版本，避免已知的并行路由bug
• 检查next.config.js中是否有自定义重写/重定向规则干扰路由匹配
• 确认@tabs的default.tsx正常返回内容（虽不是硬导航404的直接原因，但影响默认渲染）

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