如何使用NextJS并行和槽与MUI（material-ui）的Tabs？

Question

我们有 MUI 的选项卡组件，并且我们有插槽的并行路由。 我尝试创建这个目录结构。但无法正常工作。

• 重新加载会引发错误

  dashboard/featured

• dashboard/

  什么也没显示。我们应该默认显示一个选项卡内容

  dashboard/

仪表板 ├── @tabs │ ├── 批准 │ │ └── page.jsx │ ├── 精选 │ │ ├── 加载.jsx │ │ └── page.jsx │ ├── 通知 │ │ └── page.jsx │ ├── 默认.jsx │ ├── 布局.jsx │ └── 页面.jsx ├── 默认.jsx └── 布局.jsx

Answer 1

dashboard
├── @tabs
│   ├── approval
│   │   └── page.jsx
│   ├── featured
│   │   ├── loading.jsx
│   │   └── page.jsx
│   ├── notification
│   │   └── page.jsx
│   ├── default.jsx
│   ├── layout.jsx
│   └── page.jsx
├── default.jsx
└── layout.jsx

dashboard/@tabs/layout.jsx

'use client';
import React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import { useSelectedLayoutSegment } from 'next/navigation';
import { useRouter } from 'next/navigation';

const PARENT = 'pdashboard';
const DEFAULT_TAB = 'approval';
const tabs = [
    { label: 'Approval', value: 'approval' },
    { label: 'Featured', value: 'featured' },
    { label: 'Notification', value: 'notification' }
];

export default function TabsLayout({ children }) {
  const segment = useSelectedLayoutSegment() || DEFAULT_TAB;
  const router = useRouter();

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

  const currentValue = segment;

  return (
    <div>
      <Tabs value={currentValue}  onChange={handleChange} >
        {tabs.map((tab) => (
          <Tab  key={tab.value} label={tab.label}  value={tab.value}  />
        ))}
      </Tabs>

      {children}

    </div>
  );
}

dashboard/@tabs/page.jsx

导入任何选项卡组件并从此处导出。 例如：

import DefaultTabe from "./approval/page";
export default function(){
    return <DefaultTabe/>
};

dashboard/layout.jsx

现在这个文件就像仪表板页面的根布局。

export default function PDashboardLayout({ 
  children, 
  tabs 
}) {
  return (
    <div>
      <div>
        {tabs}
      </div>
      <main>
        {children}
      </main>
    </div>
  )
}

您可以从default.jsx文件返回null

dashboard/default.jsx

dashboard/@tabs/default.jsx

您可以在每个选项卡目录（即/feature、/approval、/notification）中包含loading.jsx、error.jsx、not-found.jsx等