仪表板布局 - Material UI 的路由不正确？

Question

我正在将 Material-UI DashboardLayout 集成到我的 React 项目中，但遇到了路由问题。当我在导航中定义像

"/dashboard/review-files"

这样的段时，它会路由到文字路径

"/dashboard/review-files"

，而不是动态解析为

http://localhost:3080/mentor/dashboard/review-files

之类的内容。

我已确保

App.js

中的 React Router 设置与导航中定义的路径匹配，并且应用程序中没有其他错误。我已经浏览了 Material-UI 文档和其他资源，但我仍然不明白为什么会发生这种情况。 我的目标是让导航正确路由到完整的 URL，例如单击

 时的 

http://localhost:3080/mentor/dashboard/review-files 。 如果您能提供有关如何完成这项工作的指导，我将不胜感激。预先感谢！

代码片段：

//App.js (Simplified):

const NAVIGATION = [
  {
    kind: 'header',
    title: 'Main items',
  },
   {
    segment: '/dashboard/review-files',
    title: 'Review Files',
    icon: <RateReviewIcon />,
  },
]
return (
  <>
    <AppProvider
      navigation={NAVIGATION} 

    >
    <BrowserRouter>
    
        <Routes>

          <Route path="/mentor/dashboard" element={element={<Dashboard />} />
        </Routes>
    </BrowserRouter>
   </AppProvider>
  </>
);

//Dashboard.js:
function Dashboard() {
 
  return (
    

      <DashboardLayout>
      <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '90vh' }}>
          <DemoPageContent />
            <Outlet /> //For displaying the nested components
          <Footer />
        </Box>
      </DashboardLayout>
    


  );
}
export default Dashboard;

渲染时输出导航链接：

mentor/dashboard/review-files

应该如何：

localhost:3080/mentor/dashboard/review-files

Answer 1

问题似乎出在您正在通过的

segment

上。在 MUI 文档中，段路径通常不带前导正斜杠 (/)。

尝试使用：

segment: 'dashboard/review-files'