[RFC] Per route Layout component

[sergiodxa]

Right now, only app/root.tsx can export a Layout. But this component could be useful for any route.

Since an error boundary can be exported from any route, it makes sense to allow also the export of a Layout from those routes too. This will allow us to have a shared layout between the error boundary and the component of the route.

It's useful if a route adds things like a header that you want to keep when an error occurs in that route.

Currently, an alternative to achieve this is to:

1. Create a Layout component and render it in both the error boundary and the route component.
2. Add a parent layout route that renders this shared layout, and nest a route with the error boundary inside it, so in case of an error, the parent layout is still rendered.

While those are solutions, they are not as convenient as simply exporting a Layout from the route that has the error boundary.

Another potential benefit could be that inside Layout it would be possible to wrap the props.children with a Suspense boundary, allowing a single per-route suspense boundary that works for the whole UI, and the usage of React.use at the route component level.

export function loader() {
  return { data: getData() } // this is { data: Promise<T> }
}

export function Layout({children}: Route.LayoutProps) {
  return (
    <div>
      <header>Layout Header</header>
      <Suspense fallback={<Skeleton />}>
        {children}
      </Suspense>
    </div>
  )
}

export default function Component({ loaderData }: Route.ComponentProps) {
  let data = React.use(loaderData.data) // this is T
  return (
    <div>
      <h1>Component</h1>
      <p>{data}</p>
    </div>
  )
}

This couldn't be done as userland by using the first solution (render a Layout inside the route component), because the React.use call would be outside of a Suspense boundary.

And while adding the Suspense in a parent layout route would work, if this parent route has two nested routes, the fallback would be shown for both routes, which is not ideal as it's not specific to the route that is loading.

[brophdawg11]

👍 I think this makes sense to further align the route module exports. My only initial concern is expanding the surface area for the "A note on useLoaderData in the Layout Component" nuance - but that should be able to documented clearly

[sergiodxa]

Thinking more about the loader data, could the route have a Route.LayoutProps that receives loaderData being the return type of the loader or undefined, similar to what useRouteLoaderData would have returned.

export function Layout({ children, loaderData }: Route.LayoutProps) {
  return (
    <div>
      {loaderData?.value ?? "Fallback"}
      {children}
    </div>
  )
}