Per-route layout exports

[ScottAgirs]

Hola amigos!

First-class support for custom layouts - sounds tasty to me, anyone concur'? 🍰 Haha.

My idea was that perhaps similar to action and loader exports, there could be layout (or wrapper/container-something) export that wraps the returned path childdren with the provided layout wrapper component.

This IMHO this would simplify the pathless layouts, and possibly passing params/request to the layout export could yield additional flexibility.

So, for example, routes/one-love.tsx could have:

import { Outlet } from '@remix-run/react';

const LayoutWrapper = ({ children, mode }) => {
    return (
      <div
        data-test-id="custom-remix-layout-wrapper"
      >
        <div>You're in the {mode}</div>
        {children}
      </div>
    );
}

export const loader: LoaderFunction = async ({ request, params }) => {
    // ...
    return json(iJSpostData);
};

// `layout` idea #1
export const layout: LayoutFunction = async ({ request, params }) => {
    return LayoutWrapper;
};

// OR maybe

// `layout` idea #2 (prolly a nicer/more functional approach)
export const layout: LayoutFunction = async ({ children, request, params }) => {
    const { ohSoCritical } = params;
    return (
        <LayoutWrapper mode={ohSoCritical}>
            {children}
        </LayoutWrapper>
    );
};

export default function OneLoveRoute() {
  // And here the returned would then be
  // wrapped with the provided `layout` component 🌚
  return (
    <>
      <h1>We are the world.</h1>
      <div>Bazinga</div>
    </>
  );
}

Would love to hear what y'all think? 🤗 - useful/doable at all/fun/cool or more like "take a cold shower, Scott!" (?) haha

[kiliman]

Hmm... trying to figure out what the use case is.

I wrote a simple <LayoutOutlet/> component that you put on any parent layout in place of a standard <Outlet/>. This component will check if the child route has a custom Layout handle and if so, it will use that.

You can have both external Layout components as well as inline layouts.

Anyway, this is all done within the standard Remix APIs.

Does this meet your needs? If not, can you expand on your needs?

https://codesandbox.io/s/remix-layout-outlet-fpmc10?file=/app/components/LayoutOutlet.tsx