Cookbook Router
Diagnose a Problem

React troubleshooting

Fix provider boundaries, slot error isolation, and test scheduling warnings.

Slot error renders the route fallback instead of the slot fallback

Symptom A sidebar, header, modal, or other slot throws during render and the route/provider error fallback replaces a larger part of the page than expected.

Cause <Slot /> was rendered without errorFallback, so slot errors intentionally bubble to the existing route/provider error boundary.

Fix Pass a slot-local fallback. Use errorFallback={null} to render nothing, an inline function for custom UI, or a fallback component.

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

Tests warn about React act

If you call router navigation methods directly in a test, wrap the call with React Testing Library or React act helpers when it causes a provider state update.

For click-driven navigation, prefer fireEvent.click() or userEvent.click() and then waitFor() assertions.

A hook says it requires a provider

The component is outside RouterProvider/StaticRouterProvider, or a duplicate React/router-react installation created a second context identity. Confirm one dependency instance before inventing a wrapper.

On this page