UNPKG

4.95 kBTypeScriptView Raw
1
2import { ClientInstrumentation } from "../router/instrumentation.js";
3import * as React$1 from "react";
4import { ClientOnErrorFunction, RouterInit } from "react-router";
5
6//#region lib/dom-export/hydrated-router.d.ts
7/**
8 * Props for the {@link dom.HydratedRouter} component.
9 *
10 * @category Types
11 */
12interface HydratedRouterProps {
13 /**
14 * Context factory function to be passed through to {@link createBrowserRouter}.
15 * This function will be called to create a fresh `context` instance on each
16 * navigation/fetch and made available to
17 * [`clientAction`](../../start/framework/route-module#clientAction)/[`clientLoader`](../../start/framework/route-module#clientLoader)
18 * functions.
19 */
20 getContext?: RouterInit["getContext"];
21 /**
22 * Array of instrumentation objects allowing you to instrument the router and
23 * individual routes prior to router initialization (and on any subsequently
24 * added routes via `route.lazy` or `patchRoutesOnNavigation`). This is
25 * mostly useful for observability such as wrapping navigations, fetches,
26 * as well as route loaders/actions/middlewares with logging and/or performance
27 * tracing. See the [docs](../../how-to/instrumentation) for more information.
28 *
29 * ```tsx
30 * const logging = {
31 * router({ instrument }) {
32 * instrument({
33 * navigate: (impl, { to }) => logExecution(`navigate ${to}`, impl),
34 * fetch: (impl, { to }) => logExecution(`fetch ${to}`, impl)
35 * });
36 * },
37 * route({ instrument, id }) {
38 * instrument({
39 * middleware: (impl, { request }) => logExecution(
40 * `middleware ${request.url} (route ${id})`,
41 * impl
42 * ),
43 * loader: (impl, { request }) => logExecution(
44 * `loader ${request.url} (route ${id})`,
45 * impl
46 * ),
47 * action: (impl, { request }) => logExecution(
48 * `action ${request.url} (route ${id})`,
49 * impl
50 * ),
51 * })
52 * }
53 * };
54 *
55 * async function logExecution(label: string, impl: () => Promise<void>) {
56 * let start = performance.now();
57 * console.log(`start ${label}`);
58 * await impl();
59 * let duration = Math.round(performance.now() - start);
60 * console.log(`end ${label} (${duration}ms)`);
61 * }
62 *
63 * startTransition(() => {
64 * hydrateRoot(
65 * document,
66 * <HydratedRouter instrumentations={[logging]} />
67 * );
68 * });
69 * ```
70 */
71 instrumentations?: ClientInstrumentation[];
72 /**
73 * An error handler function that will be called for any middleware, loader, action,
74 * or render errors that are encountered in your application. This is useful for
75 * logging or reporting errors instead of in the {@link ErrorBoundary} because it's not
76 * subject to re-rendering and will only run one time per error.
77 *
78 * The `errorInfo` parameter is passed along from
79 * [`componentDidCatch`](https://react.dev/reference/react/Component#componentdidcatch)
80 * and is only present for render errors.
81 *
82 * ```tsx
83 * <HydratedRouter onError={(error, info) => {
84 * let { location, params, pattern, errorInfo } = info;
85 * console.error(error, location, errorInfo);
86 * reportToErrorService(error, location, errorInfo);
87 * }} />
88 * ```
89 */
90 onError?: ClientOnErrorFunction;
91 /**
92 * Control whether router state updates are internally wrapped in
93 * [`React.startTransition`](https://react.dev/reference/react/startTransition).
94 *
95 * - When left `undefined`, all state updates are wrapped in
96 * `React.startTransition`
97 * - This can lead to buggy behaviors if you are wrapping your own
98 * navigations/fetchers in `startTransition`.
99 * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
100 * in `React.startTransition` and router state changes will be wrapped in
101 * `React.startTransition` and also sent through
102 * [`useOptimistic`](https://react.dev/reference/react/useOptimistic) to
103 * surface mid-navigation router state changes to the UI.
104 * - When set to `false`, the router will not leverage `React.startTransition` or
105 * `React.useOptimistic` on any navigations or state changes.
106 *
107 * For more information, please see the [docs](../../explanation/react-transitions).
108 */
109 useTransitions?: boolean;
110}
111/**
112 * Framework-mode router component to be used to hydrate a router from a
113 * {@link ServerRouter}. See [`entry.client.tsx`](../framework-conventions/entry.client.tsx).
114 *
115 * @public
116 * @category Framework Routers
117 * @mode framework
118 * @param props Props
119 * @param {dom.HydratedRouterProps.getContext} props.getContext n/a
120 * @param {dom.HydratedRouterProps.onError} props.onError n/a
121 * @returns A React element that represents the hydrated application.
122 */
123declare function HydratedRouter(props: HydratedRouterProps): React$1.JSX.Element;
124//#endregion
125export { HydratedRouter, HydratedRouterProps };
\No newline at end of file