HydratedRouter

Framework

Summary

Framework-mode router component to be used to hydrate a router from a ServerRouter. See entry.client.tsx.

Signature

function HydratedRouter(props: HydratedRouterProps)

Props

getContext

Context factory function to be passed through to createBrowserRouter. This function will be called to create a fresh context instance on each navigation/fetch and made available to clientAction/clientLoader functions.

onError

An error handler function that will be called for any middleware, loader, action, or render errors that are encountered in your application. This is useful for logging or reporting errors instead of in the ErrorBoundary because it's not subject to re-rendering and will only run one time per error.

The errorInfo parameter is passed along from componentDidCatch and is only present for render errors.

<HydratedRouter onError={(error, info) => {
  let { location, params, pattern, errorInfo } = info;
  console.error(error, location, errorInfo);
  reportToErrorService(error, location, errorInfo);
}} />

unstable_fetch

Provide a custom implementation for fetch, which will be used to perform JavaScript-issued manifest and data requests. The context identifies the operation that initiated each request. Defaults to window.fetch.

This prop is read when the singleton router is created. Changing it after router initialization has no effect. To use changing values such as auth tokens, read current application state inside the function rather than capturing values from a component render.

See the Custom Fetch guide for examples of authentication headers, cross-origin credentials, traversal caching, and retries.