Next.js 15：并行路由+拦截路由下，模态框内能否嵌套标签组？

核心问题原因 #

你当前的拦截路由仅指向了app/pics/[id]/page.tsx，没有复用该目录下的layout.tsx——拦截路由的文件结构未与原页面的层级对应，导致标签组布局无法被加载。

解决方案步骤 #

1. 调整拦截路由的文件夹结构

匹配原pics/[id]的子路由层级，确保每个标签页都有对应的拦截路由入口：

app/@modal/(.)pics/[id]/layout.tsx       // 模态框容器+复用原标签组布局
app/@modal/(.)pics/[id]/info/page.tsx    // 拦截info标签路由
app/@modal/(.)pics/[id]/stats/page.tsx   // 拦截stats标签路由
app/@modal/(.)pics/[id]/comments/page.tsx// 拦截comments标签路由

2. 配置拦截路由的layout文件

在app/@modal/(.)pics/[id]/layout.tsx中复用原标签组布局，并包裹模态框样式：

import OriginalLayout from '../../../pics/[id]/layout';
import { useParams } from 'next/navigation';

export default function ModalLayout({ children }: { children: React.ReactNode }) {
  const params = useParams();
  return (
    <div className="fixed inset-0 bg-black/80 flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-lg w-full max-w-4xl max-h-[90vh] overflow-auto">
        {/* 传入原布局需要的params参数 */}
        <OriginalLayout params={params as { id: string }}>
          {children}
        </OriginalLayout>
      </div>
    </div>
  );
}

3. 配置拦截路由的子页面

每个标签页的拦截路由页面直接导入原页面组件，避免重复代码：

// app/@modal/(.)pics/[id]/info/page.tsx
import OriginalInfoPage from '../../../../pics/[id]/info/page';

export default function ModalInfoPage() {
  return <OriginalInfoPage />;
}

（stats和comments标签页的拦截页面写法完全一致，替换对应路径即可）

4. 处理原页面的默认路由

修改app/pics/[id]/page.tsx，让访问根详情页时自动跳转到第一个标签页：

import { redirect } from 'next/navigation';

export default function PicsIdRootPage() {
  redirect('./info');
}

5. 确保根layout配置并行路由插槽

在app/layout.tsx中添加@modal并行路由的插槽，用Suspense处理加载状态：

import { Suspense } from 'react';

export default function RootLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        {children}
        <Suspense fallback={null}>
          {modal}
        </Suspense>
      </body>
    </html>
  );
}

效果验证 #

• 点击首页/图库页面的/pics/[id]/info等链接时，会触发拦截路由，在模态框中加载带标签组的完整布局
• 模态框内切换标签时，URL会同步更新，但模态框保持打开状态
• 直接访问/pics/[id]时，会自动跳转到info标签页，同时支持模态框拦截

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