Cookbook Router
Practical Patterns

Isolate slot errors

Keep a broken modal, sidebar, or header from replacing the full route boundary.

Default bubbling

A slot view error bubbles to the nearest route/provider error boundary unless the rendered <Slot /> opts into isolation.

Render nothing for a failed slot

<Slot name="modal" errorFallback={null} />

Render a retry UI

<Slot
  name="modal"
  errorFallback={({ error, reset }) => (
    <ModalError error={error} onRetry={reset} />
  )}
/>

A component reference is also accepted:

<Slot name="modal" errorFallback={ModalError} />

The fallback receives error and reset. Reset remounts the slot boundary; it does not mutate route state or promise the underlying bug has disappeared.

Where this bites

Route-definition slot fallback and slot IDs are no longer supported. errorFallback exists on the React <Slot /> component, not in layout.slots route configuration.

On this page