Next.js 14并行路由出现404错误的原因及解决咨询

问题1：子路径下访问/product/123/profile等路径出现404 #

原因分析 #

根目录下定义的@window/profile并行路由仅对根路径生效，子路由目录（如product/[id]、dashboard）未配置对应的@window并行路由，导致Next.js无法匹配子路径下的/profile路由，返回404。

解决方案 #

让所有子路由复用根目录的@window并行路由，有两种实现方式：

1. 软链接复用（推荐）
   在每个子路由目录下创建指向根目录@window的软链接：

   # Mac/Linux环境
   ln -s ../../@window app/product/[id]/@window
   ln -s ../@window app/dashboard/@window
   ln -s ../@window app/home/@window
   

   Windows环境使用mklink命令创建软链接：

   mklink /D app\product\[id]\@window ..\..\@window
   

2. 组件导入复用
   在每个子路由的@window/profile/page.tsx中直接导入根目录的模态框组件：

   // app/product/[id]/@window/profile/page.tsx
   import ProfileModal from '@/app/@window/profile/page';
   export default ProfileModal;
   

同时确保根目录layout.tsx正确渲染并行路由slot：

// app/layout.tsx
export default function RootLayout({
  children,
  window,
}: {
  children: React.ReactNode;
  window: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        {children}
        {window} {/* 模态框将渲染在主内容上方 */}
      </body>
    </html>
  );
}

问题2：刷新/profile路径时主内容消失，仅模态框显示 #

原因分析 #

访问/profile时，主路由（children）没有对应的page.tsx，Next.js返回404页面，但并行路由@window/profile存在，因此仅模态框渲染。

解决方案 #

通过兜底路由或中间件重写确保主路由有默认内容：

1. 兜底路由方案
   在根目录创建[[...catchAll]]路由作为主路由的兜底页面，渲染默认内容（如首页）：

   // app/[[...catchAll]]/page.tsx
   import Home from '@/app/home/page';
   export default function CatchAllPage() {
     return <Home />;
   }
   

   这样访问/profile时，主路由会匹配到该兜底页面，同时并行路由渲染模态框。

2. 中间件重写方案
   创建middleware.ts，将/profile路径重写为带主路由的路径（如/home/profile）：

   // app/middleware.ts
   import { NextResponse } from 'next/server';
   import type { NextRequest } from 'next/server';
   
   export function middleware(request: NextRequest) {
     const path = request.nextUrl.pathname;
     if (path === '/profile') {
       const url = request.nextUrl.clone();
       url.pathname = '/home/profile';
       return NextResponse.rewrite(url);
     }
     return NextResponse.next();
   }
   

最后在模态框组件中添加关闭逻辑，确保导航回主页面：

// app/@window/profile/page.tsx
'use client';
import { useRouter } from 'next/navigation';

export default function ProfileModal() {
  const router = useRouter();
  const closeModal = () => router.back();

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
      <div className="bg-white p-6 rounded-lg">
        <h2>个人信息模态框</h2>
        <button onClick={closeModal} className="mt-4 px-4 py-2 bg-gray-200 rounded">关闭</button>
      </div>
    </div>
  );
}

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