子组件未使用 Outlet 渲染

Question

我在显示子组件时遇到问题。 这是我在 App.js 中使用的代码

<Route element={<ProtectedRoutes allowedRoles={[userRoles.FIELD_FORCE_MANAGER]} />}>
      <Route
        path="/dashboard-ff"
        element={
          <DashboardWrapper>
            <FieldForceDashboard />
          </DashboardWrapper>
        }
      />
 </Route>

现在我拥有允许的 userRole。所以我的没有问题。但无论如何，这就是代码：

import React from "react";
import { Navigate, Outlet } from "react-router-dom";
import { useSelector } from "react-redux";
import PropTypes from "prop-types";

const ProtectedRoutes = ({ allowedRoles }) => {
  const { isAuthenticated, userRole } = useSelector((state) => state.auth);

  return isAuthenticated && allowedRoles.includes(userRole) ? <Outlet /> : <Navigate to="/" />;
};

ProtectedRoutes.propTypes = {
  allowedRoles: PropTypes.arrayOf(PropTypes.string).isRequired,
};

export default ProtectedRoutes;

这是我的代码：

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

注意我的 DashboardWrapper 正在渲染。问题出在渲染上。请注意，如果我在 App.js 中删除，则会呈现如下：

<Route element={<ProtectedRoutes allowedRoles={[userRoles.FIELD_FORCE_MANAGER]} />}>
      <Route
        path="/dashboard-ff"
        element={
            <FieldForceDashboard />
        }
      />
    </Route>

Answer 1

问题

如果当

not 直接被 FieldForceDashboard 包裹时渲染

DashboardWrapper

那么我怀疑问题只是

DashboardWrapper

没有渲染其

children

属性。

DashboardWrapper

是一个 wrapper 组件，因此它应该渲染

children

属性。

Outlet

组件由 layout 路由组件使用，以允许嵌套路由渲染其

element

内容。

解决方案建议

包装组件

更新

DashboardWrapper

以渲染

children

而不是

Outlet

。

const DashboardWrapper = ({ children }) => {
  ...

  return (
    {/* ... common UI ... */}
    {children}
    {/* ... more common UI... */}
  );
};

<Route
  element={(
    <ProtectedRoutes
      allowedRoles={[userRoles.FIELD_FORCE_MANAGER]}
    />
  )}
>
  <Route
    path="/dashboard-ff"
    element={(
      <DashboardWrapper>        // <-- renders children
        <FieldForceDashboard /> // <-- child
      </DashboardWrapper>
    )}
  />
 </Route>

布局路线组件

如果您希望

DashboardWrapper

成为布局路线，那么我建议将其重命名为

DashboardLayout

并将其渲染为布局路线。

示例：

const DashboardLayout = () => {
  ...

  return (
    {/* ... common UI ... */}
    <Outlet />
    {/* ... more common UI... */}
  );
};

<Route
  element={(
    <ProtectedRoutes
      allowedRoles={[userRoles.FIELD_FORCE_MANAGER]}
    />
  )}
>
  <Route element={<DashboardLayout />}>
    <Route path="/dashboard-ff" element={<FieldForceDashboard />} />
  </Route>
</Route>