如何在react js和react router dom中创建多个布局?

czq61nw1  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(298)

我正在创建一个web应用程序,其中,当用户类型为admin时,我需要两个布局显示 Jmeter 板布局,当用户类型为employee so表单布局时,我需要两个布局。首先,它必须只显示登录页面,并根据类型登录用户。
这是我的路由数组,它位于一个文件夹中。

export const routes = [
  {
    path: "/",
    component: Login,
    exact: true,
    layout:  DashboardLayout 
  },
  {
    path: "/dashboard",
    component: Dashboard,
    exact: true,
    layout: DashboardLayout 
  },
  {
    path: "/editor",
    component: CompanyAbout,
    exact: true,
    layout:  DashboardLayout 
  },

const renderRoutes = (routes) => {
  routes.map((route) => {
    const RouteComponent = route.component
    const Layout = route.layout
    return (
      <Route
        exact={route.exact}
        path={route.path}
        render={(props) => (
          <Layout>
            <RouteComponent {...props} />
          </Layout>
        )}
      />
    );
  });
};

function App() {
  return (
    <>
      <div className="wrapper">
        <Router>
          <Row>
            <Col md={12}>
              <Switch>
                {renderRoutes(routes)}
              </Switch>
            </Col>
          </Row>
          {/* <Row>
            <Footer />
          </Row> */}
        </Router>
      </div>
    </>
  );
}

这是我的app.js文件,请告诉我哪里做错了。

相关问题