ReactJs: react router 6 multiple layouts

Question

I am working on a simple application that contains only 4 modules login/registration, accounts, account-types & websites. I have created 2 modules for auth and layout.

All of the authenticated modules are sharing the <Layout /> 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>
...

Can this code be shortened, something like this:

<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>

I tried doing it the following way, but received a lot of errors in return:

{["/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>
))}

Answer 1

The Route path takes only a string path value, so passing an array of string paths is invalid. If all you are really trying to accomplish is to remove the duplicated Layout component rendering you can split the Layout layout route from the sub-route paths. Render a single Layout layout route, and render nested layout routes for each of "/accounts", /account-types", and "/websites".

Example:

...

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

<Route element={<Layout />}>
  <Route path="/accounts">
    <Route {...routes.getRoute('accounts')} />
    <Route {...routes.getRoute('accountCreate')} />
    <Route {...routes.getRoute('accountEdit')} />
  </Route>
  <Route path="/account-types">
    <Route {...routes.getRoute('accountTypes')} />
    <Route {...routes.getRoute('accountTypeCreate')} />
    <Route {...routes.getRoute('accountTypeEdit')} />
  </Route>
  <Route path="/websites">
    <Route {...routes.getRoute('websites')} />
    <Route {...routes.getRoute('websiteCreate')} />
    <Route {...routes.getRoute('websiteEdit')} />
  </Route>
</Route>
...

If you are trying to further reduce code "clutter" then you might also refactor the code to map the nested routes.

const renderRoute = (routeKey) => (
  <Route key={routeKey} {...routes.getRoute(routeKey)} />
);
const renderRoutes = routes => routes.map(renderRoute);

...

<Route path="/" element={<Auth />}>
  {renderRoutes(["auth", "register"])}
</Route>

<Route element={<Layout />}>
  <Route path="/accounts">
    {renderRoutes(["accounts", "accountCreate", "accountEdit"])}
  </Route>
  <Route path="/account-types">
    {renderRoutes(["accountTypes", "accountTypeCreate", "accountAccountEdit"])}
  </Route>
  <Route path="/websites">
    {renderRoutes(["websites", "websiteCreate", "websiteEdit"])}
  </Route>
</Route>
...