[Feature Request] Handling multiple <Outlet/> inside component

[amBunkowski]

It would be greate to see support for current setups:
<> <TableContainerStl> <Outlet id="someId"/> </LicencesTableContainerStl> <Outlet id="someId2" /> </>

[kiliman]

An <Outlet> renders a child route. Are you saying that you want the child route to specify the content for each outlet, for example with a <Slot id> component?

// child-route.tsx
export function ChildRoute() {
  return (
    <>
      <Slot id="someId">
        // content for slot 1
      </Slot>
      <Slot id="someId2">
        // content for slot 2
      </Slot>
    </>
  )
}

Or do you want to configure multiple child routes for the same path but with a slotId param?

You could potentially have different loaders as well.

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      // multiple children with the same path but different slots.
      // You can have different elements and loaders
      {
        slotId: 'someId',
        path: "team", // alternate syntax "team@someId"
        element: <ElementForSomeId />,
        loader: teamLoader,
      },
      {
        slotId: 'someId2',
        path: "team", // alternate syntax "team@someId2"
        element: <ElementForSomeId2 />,
        loader: teamLoader2,
      },
    ],
  },
]);