Javascript ReactJs：react 路由 6 多种布局

我在一个简单的应用程序，只包含4个模块login/registration,accounts,account-types和websites.我已经为auth和layout创建了2个模块.

所有经过身份验证的模块都共享<Layout />布局.

...

<Route path="/" element={<Auth />}>
  <Route {...routes.getRoute('auth')} />
  <Route {...routes.getRoute('register')} />
</Route>

<Route path="/accounts" element={<Layout />}>
  <Route {...routes.getRoute('accounts')} />
  <Route {...routes.getRoute('accountCreate')} />
  <Route {...routes.getRoute('accountEdit')} />
</Route>

<Route path="/account-types" element={<Layout />}>
  <Route {...routes.getRoute('accountTypes')} />
  <Route {...routes.getRoute('accountTypeCreate')} />
  <Route {...routes.getRoute('accountTypeEdit')} />
</Route>

<Route path="/websites" element={<Layout />}>
  <Route {...routes.getRoute('websites')} />
  <Route {...routes.getRoute('websiteCreate')} />
  <Route {...routes.getRoute('websiteEdit')} />
</Route>
...

这段代码可以缩短吗，大概是这样的:

<Route path="/" element={<Auth />}>
  <Route {...routes.getRoute('auth')} />
  <Route {...routes.getRoute('register')} />
</Route>

<Route path={["/accounts", "/account-types", "/websites"]} element={<Layout />}>
  <Route {...routes.getRoute('accounts')} />
  <Route {...routes.getRoute('accountCreate')} />
  <Route {...routes.getRoute('accountEdit')} />

  <Route {...routes.getRoute('accountTypes')} />
  <Route {...routes.getRoute('accountTypeCreate')} />
  <Route {...routes.getRoute('accountTypeEdit')} />

  <Route {...routes.getRoute('websites')} />
  <Route {...routes.getRoute('websiteCreate')} />
  <Route {...routes.getRoute('websiteEdit')} />
</Route>

我try 了以下方法，但收到了很多错误:

{["/accounts", "/account-types", "/websites"].map(path => (
  <Route path={path} element={<Layout />}>
    <Route {...routes.getRoute('accounts')} />
    <Route {...routes.getRoute('accountCreate')} />
    <Route {...routes.getRoute('accountEdit')} />

    <Route {...routes.getRoute('accountTypes')} />
    <Route {...routes.getRoute('accountTypeCreate')} />
    <Route {...routes.getRoute('accountTypeEdit')} />

    <Route {...routes.getRoute('websites')} />
    <Route {...routes.getRoute('websiteCreate')} />
    <Route {...routes.getRoute('websiteEdit')} />
  </Route>
))}