React路由列表配置问题：页面空白，需显示仪表盘与主页

核心问题分析 #

1. MasterLayout组件未返回JSX：箭头函数使用多行写法但未显式return内容，导致组件完全不渲染，直接出现空白页。
2. React Router v6 API误用：代码混用了v5的render、exact属性，但v6已废弃这些API，改用element属性，且路由匹配逻辑已更新。
3. 嵌套路由配置错误：父路由与子路由路径未正确关联，缺少嵌套路由必备的<Outlet>组件来承载子路由内容。

分步修复代码 #

1. 修复MasterLayout组件（关键修复）

补全JSX返回逻辑，同时适配v6路由API：

import { Routes, Route, Navigate, Outlet } from 'react-router-dom';

const MasterLayout = () => {
  // 必须显式return JSX内容
  return (
    <main>
      {/* 若需公共布局（如侧边栏、导航栏），可放置在Outlet外部 */}
      {/* <AdminSidebar /> */}
      <Outlet /> {/* 子路由的内容会渲染到这个位置 */}
      <Routes>
        {routes.map((route, idx) => (
          route.component && (
            <Route
              key={idx}
              path={route.path}
              element={<route.component />} {/* v6用element替代原render属性 */}
            />
          )
        ))}
        {/* 重定向根/admin路径到仪表盘 */}
        <Route path="/admin" element={<Navigate to="/admin/dashboard" replace />} />
      </Routes>
    </main>
  );
};

2. 调整App.js的路由配置

v6中嵌套路由需要父路由用/*匹配所有子路径，同时用element指定布局组件：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          {/* 父路由匹配/admin下的所有子路径，MasterLayout作为公共布局 */}
          <Route path="/admin/*" element={<MasterLayout />} />
        </Routes>
      </Router>
    </div>
  );
}

3. 修改route.js的路由路径

父路由已指定/admin，子路由改用相对路径简化配置：

const routes = [
  { path: '/dashboard', name: 'Dashboard', component: Dashboard },
  { path: '/profile', name: 'Profile', component: Profile },
];

注：v6已移除exact属性，路由默认精确匹配，若需模糊匹配可使用*通配符（如path="/*"）。

额外注意事项 #

• 确保安装了正确版本的React Router：npm install react-router-dom@6
• 若MasterLayout需要保留公共导航/侧边栏，将这些元素放在<Outlet>外部即可，子路由内容会自动嵌入<Outlet>位置。

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