如何将Material UI仪表盘布局作为含children prop的常规布局并修复路由异常

核心问题分析 #

你的问题出在路由嵌套配置和链接路径的相对/绝对处理上：

• 直接用/tickets是绝对路径，会跳转到根域名下的/tickets
• 硬写/admin/tickets虽然能生效，但不利于后续路由路径变更
• 未正确配置嵌套路由，导致侧边栏链接无法基于/admin父路径自动拼接

具体解决方案 #

1. 配置嵌套路由（路由入口文件，比如App.jsx） #

将/admin设为父路由，子路由（tickets、tools）嵌套在其下：

import { Routes, Route } from 'react-router-dom';
import AdminDashboard from './components/AdminDashboard';
import Tickets from './components/Tickets';
import Tools from './components/Tools';

function App() {
  return (
    <Routes>
      {/* 其他全局路由 */}
      <Route path="/admin" element={<AdminDashboard />}>
        {/* 子路由路径无需加/admin，会自动基于父路由拼接 */}
        <Route path="tickets" element={<Tickets />} />
        <Route path="tools" element={<Tools />} />
        {/* 可选：设置/admin的默认首页 */}
        <Route index element={<div>Admin Dashboard Home</div>} />
      </Route>
    </Routes>
  );
}

2. 在AdminDashboard中添加路由出口 #

父路由组件需要用<Outlet>来渲染子路由的内容：

import { Outlet } from 'react-router-dom';
import Sidebar from './Sidebar';
import { Box } from '@mui/material';

function AdminDashboard() {
  return (
    <Box sx={{ display: 'flex' }}>
      <Sidebar />
      {/* 子路由的内容会渲染在这个Outlet中 */}
      <Outlet />
    </Box>
  );
}

3. 修改侧边栏链接为相对路径 #

使用React Router的Link组件，路径不要加开头的/，这样会自动基于当前父路由路径拼接：

import { Link } from 'react-router-dom';
import { List, ListItem, ListItemButton, ListItemText } from '@mui/material';

function Sidebar() {
  return (
    <List>
      <ListItem disablePadding>
        <ListItemButton component={Link} to="tickets">
          <ListItemText primary="Tickets" />
        </ListItemButton>
      </ListItem>
      <ListItem disablePadding>
        <ListItemButton component={Link} to="tools">
          <ListItemText primary="Tools" />
        </ListItemButton>
      </ListItem>
    </List>
  );
}

关键注意事项 #

• 确保所有侧边栏导航使用相对路径（无前缀/），避免硬编码绝对路径
• 必须通过<Outlet>在父路由中渲染子内容，否则子路由无法正确挂载
• 如果使用MUI的MenuItem组件，同样需要将component属性设为Link，并使用相对路径

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