这个 Codesandbox Reactjs 应用 MainLayout 是如何工作的

Posted 2023-02-22

【中文标题】这个 Codesandbox Reactjs 应用 MainLayout 是如何工作的

【英文标题】：How does this Codesandbox Reactjs app MainLayout work

【发布时间】：2021-03-15 10:57:51

【问题描述】：

我学习了 React 并阅读了大量代码，现在我看到 this Codesandbox 并且无法理解为什么有两个 Main Layout 都带有 ToolBar

基本上是这样的：

路线：

const routes = [
  
    path: 'app',
    element: <DashboardLayout />,
    children: [
       path: 'account', element: <AccountView /> ,
       path: 'customers', element: <CustomerListView /> ,
       path: 'dashboard', element: <DashboardView /> ,
       path: 'products', element: <ProductListView /> ,
       path: 'settings', element: <SettingsView /> ,
       path: '*', element: <Navigate to="/404" /> 
    ]
  ,
  
    path: '/',
    element: <MainLayout />,
    children: [
       path: 'login', element: <LoginView /> ,
       path: 'register', element: <RegisterView /> ,
       path: '404', element: <NotFoundView /> ,
       path: '/', element: <Navigate to="/app/dashboard" /> ,
       path: '*', element: <Navigate to="/404" /> 
    ]
  
];

export default routes;

你有DashboardLayout和MainLayout，当应用程序启动时，我看到MainLayout首先呈现，默认路由是<Navigate to="/app/dashboard" />，那就是DashboardLayout。

查看MainLayout 的代码时，我看到与DashboardLayout 相同的代码镜像：

点赞MainLayout：

const useStyles = makeStyles((theme) => (
  root: 
    backgroundColor: theme.palette.background.default,
    display: 'flex',
    height: '100%',
    overflow: 'hidden',
    width: '100%'
  ,
  wrapper: 
    display: 'flex',
    flex: '1 1 auto',
    overflow: 'hidden',
    paddingTop: 64
  ,
  contentContainer: 
    display: 'flex',
    flex: '1 1 auto',
    overflow: 'hidden'
  ,
  content: 
    flex: '1 1 auto',
    height: '100%',
    overflow: 'auto'
  
));

const MainLayout = () => 
  const classes = useStyles();

  return (
    <div className=classes.root>
      <TopBar />
      <div className=classes.wrapper>
        <div className=classes.contentContainer>
          <div className=classes.content>
            <Outlet />
          </div>
        </div>
      </div>
    </div>
  );
;

export default MainLayout;

点赞DashboardLayout：

const useStyles = makeStyles((theme) => (
  root: 
    backgroundColor: theme.palette.background.dark,
    display: 'flex',
    height: '100%',
    overflow: 'hidden',
    width: '100%'
  ,
  wrapper: 
    display: 'flex',
    flex: '1 1 auto',
    overflow: 'hidden',
    paddingTop: 64,
    [theme.breakpoints.up('lg')]: 
      paddingLeft: 256
    
  ,
  contentContainer: 
    display: 'flex',
    flex: '1 1 auto',
    overflow: 'hidden'
  ,
  content: 
    flex: '1 1 auto',
    height: '100%',
    overflow: 'auto'
  
));

const DashboardLayout = () => 
  const classes = useStyles();
  const [isMobileNavOpen, setMobileNavOpen] = useState(false);

  return (
    <div className=classes.root>
      <TopBar onMobileNavOpen=() => setMobileNavOpen(true) />
      <NavBar
        onMobileClose=() => setMobileNavOpen(false)
        openMobile=isMobileNavOpen
      />
      <div className=classes.wrapper>
        <div className=classes.contentContainer>
          <div className=classes.content>
            <Outlet />
          </div>
        </div>
      </div>
    </div>
  );
;

export default DashboardLayout;

这样做有什么好处我的意思是MainLayout 是出于什么原因呈现的？这是否与useRoutes 元素结构（如分组溃败element）有关？

【参考方案1】：

这是模板布局中的常见模式，通常是良好的设计实践。使用它的主要原因是用于经过身份验证/未经身份验证的路由（即登录与未登录）。您会注意到两种布局的 topbar.js 完全不同。

对于主布局，这是您未经身份验证的布局，它是您可以显示主页、关于页面等的地方，您希望任何人都可以访问。有了这个，你可能不想显示通常的导航项目，比如个人资料链接等。你当然可以在 React 中使用 state 来做到这一点，但后一种方式更整洁，你不必有其他在应用路径下未经身份验证而运行的可能复杂的代码。

仪表板布局通常用作经过身份验证的路径。这可能是公司的后端管理部分或其他网络应用程序。

这样的模板通常提供足够的分离，以便开发人员可以在应用中实现自己的身份验证和后端功能，但仍然可以看到所有已创建组件的预期设计路径。