React Router 6嵌套路由仅渲染Dashboard组件问题求助

你遇到的问题核心是违反了React Router 6的嵌套路由规则：嵌套路由的父组件必须通过<Outlet />来渲染子路由的内容。你的User、CustomerPortal、StaffPortal这几个父路由组件里没有添加<Outlet />，导致/user/customer/account、/user/staff/members这类子路由的内容无法被渲染，始终只能显示默认的Dashboard组件。

解决步骤 #

1. 在父路由组件中添加<Outlet /> #

首先需要给所有嵌套路由的父组件引入并渲染<Outlet />，子路由的内容会自动插入到这个位置。

示例：修改User组件

import { Outlet } from 'react-router-dom';

function User() {
  // 这里可以放置用户页面的公共内容，比如侧边导航、顶部栏等
  return (
    <div className="user-layout">
      <aside className="user-sidebar">用户侧边导航</aside>
      {/* 子路由内容将渲染在此处 */}
      <Outlet />
    </div>
  );
}

示例：修改StaffPortal组件

import { Outlet } from 'react-router-dom';

function StaffPortal() {
  return (
    <div className="staff-portal">
      <header className="staff-header">员工门户顶部导航</header>
      {/* 员工子路由内容渲染区域 */}
      <Outlet />
    </div>
  );
}

同样的方式，给CustomerPortal组件也添加<Outlet />即可。

2. 给父路由添加index路由（可选但推荐） #

当前访问/user/customer或/user/staff时，因为没有匹配的子路由会出现空白。可以给这两个路由添加index路由，让父路径默认跳转到对应的Dashboard：

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route index element={<SignIn />} />
          <Route path="/register" element={<SignUp />} />
          <Route path="/user" element={<User />}>
            <Route path="customer" element={<CustomerPortal />}>
              {/* 访问/user/customer时默认显示CustomerDashboard */}
              <Route index element={<CustomerDashBoard />} />
              <Route path="dashboard" element={<CustomerDashBoard />} />
              <Route path="account" element={<CmAccountMgmt />} />
            </Route>
            <Route path="staff" element={<StaffPortal />}>
              {/* 访问/user/staff时默认显示StaffDashboard */}
              <Route index element={<StaffDashBoard />} />
              <Route path="dashboard" element={<StaffDashBoard />} />
              <Route path="members" element={<MemberDisplay />} />
              <Route path="revenue" element={<StaffRevenue />} />
              <Route path="employee" element={<StaffEmployee />} />
            </Route>
          </Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

后续角色鉴权思路（参考） #

等路由正常工作后，你可以通过自定义路由组件实现角色控制，比如创建ProtectedRoute组件：

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

function ProtectedRoute({ allowedRoles }) {
  // 暂时用模拟角色，后续替换为真实用户角色（比如从localStorage/状态中获取）
  const userRole = 'staff';

  if (!allowedRoles.includes(userRole)) {
    // 角色不匹配时重定向到对应角色的首页
    return <Navigate to={`/user/${userRole}`} replace />;
  }

  return <Outlet />;
}

在路由中使用：

<Route path="/user" element={<User />}>
  <Route element={<ProtectedRoute allowedRoles={['customer']} />}>
    <Route path="customer" element={<CustomerPortal />}>
      {/* 客户子路由 */}
    </Route>
  </Route>
  <Route element={<ProtectedRoute allowedRoles={['staff']} />}>
    <Route path="staff" element={<StaffPortal />}>
      {/* 员工子路由 */}
    </Route>
  </Route>
</Route>

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