使用Outlet时子组件FieldForceDashboard无法渲染求助

你的问题核心在于 DashboardWrapper 的实现逻辑和使用方式不匹配：它用了 react-router 的 <Outlet /> 来渲染内容，但你在 App.js 里是把 <FieldForceDashboard /> 直接作为 DashboardWrapper 的子组件传入的——而 <Outlet /> 是专门用来渲染路由嵌套的子路由内容的，不是用来渲染组件的直接子元素的。所以包裹后子组件根本没被渲染，Outlet 找不到对应的子路由内容，自然就显示空白了。

下面给两种可行的解决办法：

方案一：修改 DashboardWrapper，改用 children 渲染 #

把 DashboardWrapper 里的 <Outlet /> 替换成接收的 children props，让它能正常渲染传入的子组件：

// 修改后的 DashboardWrapper 核心代码
const DashboardWrapper = ({ children }) => {
  // 原有的状态、逻辑代码...

  return (
    <>
      <Sidenav
        color={sidenavColor}
        brand={(transparentSidenav && !darkMode) || whiteSidenav
          ? brandDark
          : brandWhite
        }
        brandName="Pharm"
        routes={routes}
        onMouseEnter={handleOnMouseEnter}
        onMouseLeave={handleOnMouseLeave}
      />
      {children} {/* 替换原来的 <Outlet /> */}
    </>
  );
};

修改后你原来的 App.js 路由配置不需要变动，就能正常渲染 <FieldForceDashboard /> 了。

方案二：调整路由结构，适配 Outlet 的嵌套路由逻辑 #

如果想保留 DashboardWrapper 里的 <Outlet />，可以把它设置为父路由的 element，让子路由来渲染 <FieldForceDashboard />：

// 修改后的 App.js 路由配置
<Route
  element={<ProtectedRoutes allowedRoles={[userRoles.FIELD_FORCE_MANAGER]} />}
>
  {/* 将 DashboardWrapper 作为父路由的 element */}
  <Route element={<DashboardWrapper />}>
    <Route path="/dashboard-ff" element={<FieldForceDashboard />} />
  </Route>
</Route>

这样路由嵌套后，DashboardWrapper 里的 <Outlet /> 就会自动渲染子路由的 <FieldForceDashboard /> 内容。

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