[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,
      },
    ],
  },
]);

[Tyrannogyna]

I would like first option. I have the case where a parent layout defines the styles for a few sections, and content for all of them is set by the child route. I don't see an easy way divide this data other than repeating the layout in each child route or fetching the data for all child routes in the parent, and none of those seems like a very good solution

[PatrykWalach]

I've came up with user land solution

import { useOutlet } from "@remix-run/react";
import { createContext, use, type ReactNode } from "react";

const ExtraOutletContext = createContext<string>("children");

export function ExtraOutlet(props: {
  id: string;
  context?: unknown;
}): ReactNode {
  return useExtraOutlet(props.id, props.context);
}

export function ExtraOutlets(
  props: Record<"children" | (string & {}), ReactNode>,
): ReactNode {
  const id = use(ExtraOutletContext);

  return props[id];
}

export function useExtraOutlet(id: string, context?: unknown): ReactNode {
  const outlet = useOutlet(context);
  return <ExtraOutletContext value={id}>{outlet}</ExtraOutletContext>;
}

Usage looks like this:

// root.tsx
export function Root() {
  return (
    <>
      <ExtraOutlet id="appBar" />
      <main>
        <Outlet />
      </main>
      <ExtraOutlet id="footer" />
    </>
  );
}

// routes.tsx
const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: (
          <ExtraOutlets appBar={<AppBar />}>
            <ElementForSomeId />
          </ExtraOutlets>
        ),
        loader: teamLoader,
      },
    ],
  },
]);

[PatrykWalach]

But it's not possible to provide fallback for not existing extra outlet 🤔

[chrisl8888]

Similar problem to #9601