Function HydratedRouter

Parameters

• props: HydratedRouterProps

  Props

  Props for the dom.HydratedRouter component.

  • OptionalgetContext?: () => MaybePromise<RouterContextProvider>

    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.

  • Optionalinstrumentations?: ClientInstrumentation[]

    Array of instrumentation objects allowing you to instrument the router and individual routes prior to router initialization (and on any subsequently added routes via route.lazy or patchRoutesOnNavigation). This is mostly useful for observability such as wrapping navigations, fetches, as well as route loaders/actions/middlewares with logging and/or performance tracing. See the docs for more information.

    const logging = {
      router({ instrument }) {
        instrument({
          navigate: (impl, { to }) => logExecution(`navigate ${to}`, impl),
          fetch: (impl, { to }) => logExecution(`fetch ${to}`, impl)
        });
      },
      route({ instrument, id }) {
        instrument({
          middleware: (impl, { request }) => logExecution(
            `middleware ${request.url} (route ${id})`,
            impl
          ),
          loader: (impl, { request }) => logExecution(
            `loader ${request.url} (route ${id})`,
            impl
          ),
          action: (impl, { request }) => logExecution(
            `action ${request.url} (route ${id})`,
            impl
          ),
        })
      }
    };
    
    async function logExecution(label: string, impl: () => Promise<void>) {
      let start = performance.now();
      console.log(`start ${label}`);
      await impl();
      let duration = Math.round(performance.now() - start);
      console.log(`end ${label} (${duration}ms)`);
    }
    
    startTransition(() => {
      hydrateRoot(
        document,
        <HydratedRouter instrumentations={[logging]} />
      );
    });
    Copy

  • OptionalonError?: ClientOnErrorFunction

    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);
    }} />
    Copy

  • Optionalunstable_fetch?: unstable_RouterFetch

    This prop is experimental and subject to breaking changes.

    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.

    Browser-managed data prefetches from Link, NavLink, or PrefetchPageLinks use native `` elements and do not call this function. If your data requests require custom headers or other request transformations, use `prefetch="none"` on links and avoid rendering PrefetchPageLinks.

  • OptionaluseTransitions?: boolean

    Control whether router state updates are internally wrapped in React.startTransition.

    • When left undefined, all state updates are wrapped in React.startTransition
      • This can lead to buggy behaviors if you are wrapping your own navigations/fetchers in startTransition.
    • When set to true, Link and Form navigations will be wrapped in React.startTransition and router state changes will be wrapped in React.startTransition and also sent through useOptimistic to surface mid-navigation router state changes to the UI.
    • When set to false, the router will not leverage React.startTransition or React.useOptimistic on any navigations or state changes.

    For more information, please see the docs.