React 组件未按预期显示

Question

我有一个用于仪表板的布局组件。根据 jwt 中存储的角色成功登录后，用户将被路由到特定的仪表板。我遇到的问题是仪表板组件未显示在屏幕上。我知道角色正在传递到仪表板布局。不确定它是否像预期的那样传递到仪表板本身。

仪表板布局

import { useEffect,useState } from 'react';
// import { getUserRoles, retrieveToken } from "../Utils/AuthUtils";
import { useNavigate } from 'react-router-dom';
import Sidebarr from '../Components/Sidebarr';
import Navbar from '../Components/Navbar';
import classes from "../Layouts/DashboardLayout.module.css";
import ErrorBoundary from '../ErrorBoundary';
import { useAuth } from '../Utils/AuthProvider';

const DashboardLayout = ({ children}) => {
  // State to management
  const { token, userRoles } = useAuth(); 
  const navigate = useNavigate();
  const [isSidebar, setIsSidebar] = useState(true);

  


  useEffect(() => {
    if (!token && window.location.pathname !== '/api/account/login') {
      navigate('/api/account/login');
    }
  }, [token, navigate]);


  return (
    <>
  
      <ErrorBoundary fallback={<p>Something went wrong</p>}>


      <div className={classes.layout}>
        <main className={classes.content}>
          <Sidebarr isSidebar={isSidebar} />
        <div>
          <Navbar setIsSidebar={setIsSidebar} />
          {children}
          {/* {typeof children === 'function' && children({ userRoles })} */}
        </div>
        </main>
      </div>
      
      </ErrorBoundary>
    </>
      
    
  );
};

export default DashboardLayout;

仪表板

import { Box } from '@mui/material';
import DashboardLayout from '../Layouts/DashboardLayout';
import Header from '../Components/Header';



const Dashboard = () => {

  return (
    <DashboardLayout>
      {({ userRoles }) => (
        <>
        <Box>
          <Header
            title={userRoles.includes('Overseer') ? 'Admin Dashboard' : 'Group Leader Dashboard'}
            subtitle="Welcome to your dashboard"
            />

        </Box>
          {/* Additional content based on user roles can be added here */}
        

        </>
      )}
    </DashboardLayout>
  );
};

export default Dashboard;

Answer 1

在

Dashboard

中，

DashboardLayout

中的子级被定义为函数。在

DashboardLayout

中，

props.children

需要作为函数来调用

return (
  <ErrorBoundary fallback={<p>Something went wrong</p>}>
    <div className={classes.layout}>
      <main className={classes.content}>
        <Sidebarr isSidebar={isSidebar} />
        <div>
          <Navbar setIsSidebar={setIsSidebar} />
          {children({ userRoles })}
          {/* {typeof children === 'function' && children({ userRoles })} */}
        </div>
      </main>
    </div>
  </ErrorBoundary>
);