如何在MUI Tabs中使用Next.js的Parallel Routing（并行路由）？

问题原因分析 #

1. 刷新dashboard/featured报错：直接访问子路由时，Next.js无法正确将路由映射到@tabs插槽对应的子页面，且插槽布局文件未正确处理路由匹配逻辑。
2. dashboard/路径无内容：根路径下未指定默认展示的标签页内容，@tabs的default.jsx未关联到默认标签页（如featured）。

修正后的目录结构 #

dashboard
├── @tabs
│   ├── approval
│   │   └── page.jsx
│   ├── featured
│   │   ├── loading.jsx
│   │   └── page.jsx
│   ├── notification
│   │   └── page.jsx
│   ├── default.jsx  // 指定默认显示featured标签页
│   └── layout.jsx   // 插槽内部布局，仅渲染对应标签页内容
├── page.jsx         // 根路径入口，处理Tabs与路由联动
└── layout.jsx       // 仪表盘根布局

关键文件代码实现 #

1. dashboard/layout.jsx（根布局） #

import { ReactNode } from 'react';

export default function DashboardLayout({
  children,
  tabs, // 接收@tabs插槽内容
}: {
  children: ReactNode;
  tabs: ReactNode;
}) {
  return (
    <div style={{ padding: '2rem' }}>
      {children}
      {tabs}
    </div>
  );
}

2. dashboard/page.jsx（根页面，处理Tabs与路由联动） #

import { Tabs, Tab } from '@mui/material';
import { usePathname, useRouter } from 'next/navigation';

export default function DashboardPage() {
  const pathname = usePathname();
  const router = useRouter();

  // 匹配当前路由对应的标签值
  const currentTab = pathname.split('/')[2] || 'featured';
  const tabValues = ['featured', 'approval', 'notification'];

  const handleTabChange = (event, newValue) => {
    router.push(`/dashboard/${newValue}`);
  };

  return (
    <>
      <Tabs
        value={currentTab}
        onChange={handleTabChange}
        sx={{ marginBottom: '1rem' }}
      >
        <Tab value="featured" label="精选" />
        <Tab value="approval" label="审批" />
        <Tab value="notification" label="通知" />
      </Tabs>
    </>
  );
}

3. @tabs/layout.jsx（插槽布局） #

import { ReactNode } from 'react';

export default function TabsSlotLayout({ children }: { children: ReactNode }) {
  return <div>{children}</div>;
}

4. @tabs/default.jsx（默认插槽内容） #

import FeaturedPage from './featured/page';

export default function TabsDefault() {
  return <FeaturedPage />;
}

问题解决说明 #

• 刷新报错修复：通过dashboard/page.jsx统一处理路由与Tabs的映射，直接访问子路由时，Next.js会正确加载@tabs下对应的子页面，配合插槽布局确保内容正常渲染。
• 根路径内容显示：@tabs/default.jsx直接渲染featured页面，访问dashboard/时，插槽会加载默认内容，实现默认标签页的展示。

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