Reactjs 如何在不重复代码的情况下使布线组件更紧凑

我是新来的。我有一个小小的挑战。我的代码目前看起来像这样

。。。
函数批准器（）{
返回(
...
);
}

您可以创建包装器组件并在AppRouter.js中使用它：

function AppRouter() {
    return (
        <Router>
          <PageWrapper>
             <Switch>
               ....
             </Switch>
          </PageWrapper>
      </Router>
    );
  }

函数批准程序（）{
返回(
....
);
}

如果不想反复重复布线组件，可以使用布线对象数组，例如：

function AppRouter() {
    const routes = [
       { path="/dashboard", component: Dashboard },
       { path="/applicant/:id", component: UserDetail },
       ...
    ];

    return (
        <Router>
          <PageWrapper>
             <Switch>
               {routes.map(route => (
                    <Route id={route.path} path={route.path} exact 
                     component={route.component} />
               )}
             </Switch>
          </PageWrapper>
      </Router>
    );
  }

函数批准程序（）{
常数路由=[
{path=“/dashboard”，组件：dashboard}，
{path=“/applicator/：id”，组件：UserDetail}，
...
];
返回(
{routes.map（route=>(
)}
);
}

在PageWrapper.js中，请注意如何呈现子对象：

function PageWrapper({children}) {
    return (
      <div className="container">
        <Aside />
        <div className="main-content">
            <AppbarMain />
            <div className="main-body">
              <div className="display-body">
                 {children}
            </div>
            <div className="footer">
              footer
            </div>
          </div>
        </div>
      </div>
    );
  }

函数页面包装器（{children}）{
返回(
{儿童}
页脚
);
}

Hi@realAlexBarge，谢谢。您是否可以展示一下交换机中的一条路由的外观？您不想重复路由组件吗？