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

Question

我学习 React 并阅读了很多代码，现在我看到 this Codesandbox 并且无法理解为什么有两个主布局都带有 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?

Answer 1

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

对于主布局，这是您的未经身份验证的布局，您可以在其中显示您希望任何人都可以访问的主页、关于页面等。有了这个，你可能不想显示通常的导航项，例如配置文件 link 等。你当然可以在 React 中使用状态来做到这一点，但后一种方式更简洁，你不需要在应用程序路径下未通过身份验证时，不必有其他可能复杂的代码运行。

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

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

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

How does this Codesandbox Reactjs app MainLayout work

reactjs

react-router-dom

react-material