Signature

function Outlet({ context, children }: OutletProps): ReactNode;

Parameters

Accepts context and optional children. When children is null or undefined, Outlet renders Routes with its default loading fallback. An explicit child replaces that route rendering.

Returns

Returns an Outlet context provider around its children or Routes. A missing or null context inherits the nearest ancestor Outlet context.

Root shell

Use Outlet from a root module to place the active page inside a persistent shell. Keep route components in their own files.

import { Outlet } from "@kasperrt/smolter/preact";

export default function Root() {
  return (
    <main>
      <header>Task manager</header>
      <Outlet />
    </main>
  );
}

Flat routing

Outlet does not create a hierarchy of nested route records. It renders the active flat match. Context can be read with useOutletContext<T>; provide and share that type yourself because it cannot be inferred across component boundaries.