[Feature] The ability to define layout at element level (not above)

[eslachance]

Currently we are building a system were we are using 3 different layouts. Each page in what I'll just call a wizard, can have a different layout, and render the content using its own Outlet.

Because each page can be different, I'm finding myself having to create a pattern like this to provide the layout:

  {
    path: 'app',
    element: <VerticalLayout />,
    children: [{ index: true, element: <MobileAppPage /> }],
  },

What would be great is to rather do this:

  {
    path: 'app',
    element: <MobileAppPage />,
    layout: <VerticalLayout />,
  },

I do have a dirty workaround for most pages, but, for the / route, I didn't really have a proper solution so I actually had to redirect to a separate route since an index route can't have children:

  {
    index: true,
    element: <Navigate to="./home" />,
  },
  {
    path: 'home',
    element: <VerticalLayout />,
    children: [{ index: true, element: <Home /> }],
  },

So, having a layout property would be greatly helpful in this case!

[eslachance]

Edit: there is a workaround for the home route:

export const routes = [
  {
   element: <MainLayout />,
   children: [ { index: true, element : <Home /> } ]
  },
   element: <SecondaryLayout />,
   children: [ { path: '/about', element : <About /> } ]
  }
]

Still somewhat dirty, but a bit better.