如何使用 Material UI 仪表板布局作为带有孩子道具的常规布局？

Question

我在 MUI 网站上找到了这个仪表板布局，并将其集成到我的项目中，安装了所有依赖项，但它处理主要内容的方式发生了一些奇怪的情况。无论我如何修改侧边栏，它总是尝试根据分段进行路由。仪表板位于 /admin 文件夹中，菜单项应指向 /admin/tickets 和 /admin/tools 等路径。

当我在段中提供 /tickets 时，它仅路由到 localhost/tickets，如果我提供 /admin/tickets，它实际上会路由到这个确切的 URL。我尝试添加路径，但它仍然基于段进行路由。有人可以帮忙吗？我已经阅读了整个 MUI 文档，但找不到解决方案。

Answer 1

"use client"
import * as React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import ConfirmationNumberIcon from '@mui/icons-material/ConfirmationNumber';
import CategoryIcon from '@mui/icons-material/Category';
import BuildIcon from '@mui/icons-material/Build';
import { AppProvider } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';

const NAVIGATION = [
  {
    segment: 'tickets',
    title: 'Tickets',
    icon: <ConfirmationNumberIcon />,
    path: '/admin/tickets',
  },
  {
    segment: 'categories',
    title: 'Categories',
    icon: <CategoryIcon />,
    path: '/admin/categories',
  },
  {
    segment: 'tools',
    title: 'Tools',
    icon: <BuildIcon />,
    path: '/admin/tools',
  },
];

const demoTheme = createTheme({
  cssVariables: {
    colorSchemeSelector: 'data-toolpad-color-scheme',
  },
  colorSchemes: { light: true, dark: true },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 600,
      lg: 1200,
      xl: 1536,
    },
  },
});

export default function DashboardLayoutBranding({ children }) {
  return (
    <ThemeProvider theme={demoTheme}>
      <AppProvider
        navigation={NAVIGATION}
        branding={{
          logo: <img src="https://mui.com/static/logo.png" alt="MUI logo" />,
          title: "Ben's Ticketing System",
        }}
      >
        <DashboardLayout>
          {children}
        </DashboardLayout>
      </AppProvider>
    </ThemeProvider>
  );
}

DashboardLayoutBranding.propTypes = {
  children: PropTypes.node.isRequired,
};