UNPKG

61.1 kBmodel/vnd.mtsView Raw
1import { m as HTMLFormMethod, n as FormEncType, o as LoaderFunctionArgs, p as MiddlewareEnabled, c as RouterContextProvider, q as AppLoadContext, r as RouteObject, s as History, t as MaybePromise, u as MapRoutePropertiesFunction, v as Action, L as Location, w as DataRouteMatch, x as Submission, y as RouteData, z as DataStrategyFunction, B as PatchRoutesOnNavigationFunction, E as DataRouteObject, U as UIMatch, T as To, I as Path, P as Params, J as InitialEntry, K as NonIndexRouteObject, O as LazyRouteFunction, Q as IndexRouteObject, V as RouteMatch, W as TrackedPromise } from './routeModules-Djumx26z.mjs';
2import * as React from 'react';
3
4type unstable_ServerInstrumentation = {
5 handler?: unstable_InstrumentRequestHandlerFunction;
6 route?: unstable_InstrumentRouteFunction;
7};
8type unstable_ClientInstrumentation = {
9 router?: unstable_InstrumentRouterFunction;
10 route?: unstable_InstrumentRouteFunction;
11};
12type unstable_InstrumentRequestHandlerFunction = (handler: InstrumentableRequestHandler) => void;
13type unstable_InstrumentRouterFunction = (router: InstrumentableRouter) => void;
14type unstable_InstrumentRouteFunction = (route: InstrumentableRoute) => void;
15type unstable_InstrumentationHandlerResult = {
16 status: "success";
17 error: undefined;
18} | {
19 status: "error";
20 error: Error;
21};
22type InstrumentFunction<T> = (handler: () => Promise<unstable_InstrumentationHandlerResult>, info: T) => Promise<void>;
23type ReadonlyRequest = {
24 method: string;
25 url: string;
26 headers: Pick<Headers, "get">;
27};
28type ReadonlyContext = MiddlewareEnabled extends true ? Pick<RouterContextProvider, "get"> : Readonly<AppLoadContext>;
29type InstrumentableRoute = {
30 id: string;
31 index: boolean | undefined;
32 path: string | undefined;
33 instrument(instrumentations: RouteInstrumentations): void;
34};
35type RouteInstrumentations = {
36 lazy?: InstrumentFunction<RouteLazyInstrumentationInfo>;
37 "lazy.loader"?: InstrumentFunction<RouteLazyInstrumentationInfo>;
38 "lazy.action"?: InstrumentFunction<RouteLazyInstrumentationInfo>;
39 "lazy.middleware"?: InstrumentFunction<RouteLazyInstrumentationInfo>;
40 middleware?: InstrumentFunction<RouteHandlerInstrumentationInfo>;
41 loader?: InstrumentFunction<RouteHandlerInstrumentationInfo>;
42 action?: InstrumentFunction<RouteHandlerInstrumentationInfo>;
43};
44type RouteLazyInstrumentationInfo = undefined;
45type RouteHandlerInstrumentationInfo = Readonly<{
46 request: ReadonlyRequest;
47 params: LoaderFunctionArgs["params"];
48 unstable_pattern: string;
49 context: ReadonlyContext;
50}>;
51type InstrumentableRouter = {
52 instrument(instrumentations: RouterInstrumentations): void;
53};
54type RouterInstrumentations = {
55 navigate?: InstrumentFunction<RouterNavigationInstrumentationInfo>;
56 fetch?: InstrumentFunction<RouterFetchInstrumentationInfo>;
57};
58type RouterNavigationInstrumentationInfo = Readonly<{
59 to: string | number;
60 currentUrl: string;
61 formMethod?: HTMLFormMethod;
62 formEncType?: FormEncType;
63 formData?: FormData;
64 body?: any;
65}>;
66type RouterFetchInstrumentationInfo = Readonly<{
67 href: string;
68 currentUrl: string;
69 fetcherKey: string;
70 formMethod?: HTMLFormMethod;
71 formEncType?: FormEncType;
72 formData?: FormData;
73 body?: any;
74}>;
75type InstrumentableRequestHandler = {
76 instrument(instrumentations: RequestHandlerInstrumentations): void;
77};
78type RequestHandlerInstrumentations = {
79 request?: InstrumentFunction<RequestHandlerInstrumentationInfo>;
80};
81type RequestHandlerInstrumentationInfo = Readonly<{
82 request: ReadonlyRequest;
83 context: ReadonlyContext | undefined;
84}>;
85
86/**
87 * A Router instance manages all navigation and data loading/mutations
88 */
89interface Router$1 {
90 /**
91 * @private
92 * PRIVATE - DO NOT USE
93 *
94 * Return the basename for the router
95 */
96 get basename(): RouterInit["basename"];
97 /**
98 * @private
99 * PRIVATE - DO NOT USE
100 *
101 * Return the future config for the router
102 */
103 get future(): FutureConfig;
104 /**
105 * @private
106 * PRIVATE - DO NOT USE
107 *
108 * Return the current state of the router
109 */
110 get state(): RouterState;
111 /**
112 * @private
113 * PRIVATE - DO NOT USE
114 *
115 * Return the routes for this router instance
116 */
117 get routes(): DataRouteObject[];
118 /**
119 * @private
120 * PRIVATE - DO NOT USE
121 *
122 * Return the window associated with the router
123 */
124 get window(): RouterInit["window"];
125 /**
126 * @private
127 * PRIVATE - DO NOT USE
128 *
129 * Initialize the router, including adding history listeners and kicking off
130 * initial data fetches. Returns a function to cleanup listeners and abort
131 * any in-progress loads
132 */
133 initialize(): Router$1;
134 /**
135 * @private
136 * PRIVATE - DO NOT USE
137 *
138 * Subscribe to router.state updates
139 *
140 * @param fn function to call with the new state
141 */
142 subscribe(fn: RouterSubscriber): () => void;
143 /**
144 * @private
145 * PRIVATE - DO NOT USE
146 *
147 * Enable scroll restoration behavior in the router
148 *
149 * @param savedScrollPositions Object that will manage positions, in case
150 * it's being restored from sessionStorage
151 * @param getScrollPosition Function to get the active Y scroll position
152 * @param getKey Function to get the key to use for restoration
153 */
154 enableScrollRestoration(savedScrollPositions: Record<string, number>, getScrollPosition: GetScrollPositionFunction, getKey?: GetScrollRestorationKeyFunction): () => void;
155 /**
156 * @private
157 * PRIVATE - DO NOT USE
158 *
159 * Navigate forward/backward in the history stack
160 * @param to Delta to move in the history stack
161 */
162 navigate(to: number): Promise<void>;
163 /**
164 * Navigate to the given path
165 * @param to Path to navigate to
166 * @param opts Navigation options (method, submission, etc.)
167 */
168 navigate(to: To | null, opts?: RouterNavigateOptions): Promise<void>;
169 /**
170 * @private
171 * PRIVATE - DO NOT USE
172 *
173 * Trigger a fetcher load/submission
174 *
175 * @param key Fetcher key
176 * @param routeId Route that owns the fetcher
177 * @param href href to fetch
178 * @param opts Fetcher options, (method, submission, etc.)
179 */
180 fetch(key: string, routeId: string, href: string | null, opts?: RouterFetchOptions): Promise<void>;
181 /**
182 * @private
183 * PRIVATE - DO NOT USE
184 *
185 * Trigger a revalidation of all current route loaders and fetcher loads
186 */
187 revalidate(): Promise<void>;
188 /**
189 * @private
190 * PRIVATE - DO NOT USE
191 *
192 * Utility function to create an href for the given location
193 * @param location
194 */
195 createHref(location: Location | URL): string;
196 /**
197 * @private
198 * PRIVATE - DO NOT USE
199 *
200 * Utility function to URL encode a destination path according to the internal
201 * history implementation
202 * @param to
203 */
204 encodeLocation(to: To): Path;
205 /**
206 * @private
207 * PRIVATE - DO NOT USE
208 *
209 * Get/create a fetcher for the given key
210 * @param key
211 */
212 getFetcher<TData = any>(key: string): Fetcher<TData>;
213 /**
214 * @internal
215 * PRIVATE - DO NOT USE
216 *
217 * Reset the fetcher for a given key
218 * @param key
219 */
220 resetFetcher(key: string, opts?: {
221 reason?: unknown;
222 }): void;
223 /**
224 * @private
225 * PRIVATE - DO NOT USE
226 *
227 * Delete the fetcher for a given key
228 * @param key
229 */
230 deleteFetcher(key: string): void;
231 /**
232 * @private
233 * PRIVATE - DO NOT USE
234 *
235 * Cleanup listeners and abort any in-progress loads
236 */
237 dispose(): void;
238 /**
239 * @private
240 * PRIVATE - DO NOT USE
241 *
242 * Get a navigation blocker
243 * @param key The identifier for the blocker
244 * @param fn The blocker function implementation
245 */
246 getBlocker(key: string, fn: BlockerFunction): Blocker;
247 /**
248 * @private
249 * PRIVATE - DO NOT USE
250 *
251 * Delete a navigation blocker
252 * @param key The identifier for the blocker
253 */
254 deleteBlocker(key: string): void;
255 /**
256 * @private
257 * PRIVATE DO NOT USE
258 *
259 * Patch additional children routes into an existing parent route
260 * @param routeId The parent route id or a callback function accepting `patch`
261 * to perform batch patching
262 * @param children The additional children routes
263 * @param unstable_allowElementMutations Allow mutation or route elements on
264 * existing routes. Intended for RSC-usage
265 * only.
266 */
267 patchRoutes(routeId: string | null, children: RouteObject[], unstable_allowElementMutations?: boolean): void;
268 /**
269 * @private
270 * PRIVATE - DO NOT USE
271 *
272 * HMR needs to pass in-flight route updates to React Router
273 * TODO: Replace this with granular route update APIs (addRoute, updateRoute, deleteRoute)
274 */
275 _internalSetRoutes(routes: RouteObject[]): void;
276 /**
277 * @private
278 * PRIVATE - DO NOT USE
279 *
280 * Cause subscribers to re-render. This is used to force a re-render.
281 */
282 _internalSetStateDoNotUseOrYouWillBreakYourApp(state: Partial<RouterState>): void;
283 /**
284 * @private
285 * PRIVATE - DO NOT USE
286 *
287 * Internal fetch AbortControllers accessed by unit tests
288 */
289 _internalFetchControllers: Map<string, AbortController>;
290}
291/**
292 * State maintained internally by the router. During a navigation, all states
293 * reflect the "old" location unless otherwise noted.
294 */
295interface RouterState {
296 /**
297 * The action of the most recent navigation
298 */
299 historyAction: Action;
300 /**
301 * The current location reflected by the router
302 */
303 location: Location;
304 /**
305 * The current set of route matches
306 */
307 matches: DataRouteMatch[];
308 /**
309 * Tracks whether we've completed our initial data load
310 */
311 initialized: boolean;
312 /**
313 * Tracks whether we should be rendering a HydrateFallback during hydration
314 */
315 renderFallback: boolean;
316 /**
317 * Current scroll position we should start at for a new view
318 * - number -> scroll position to restore to
319 * - false -> do not restore scroll at all (used during submissions/revalidations)
320 * - null -> don't have a saved position, scroll to hash or top of page
321 */
322 restoreScrollPosition: number | false | null;
323 /**
324 * Indicate whether this navigation should skip resetting the scroll position
325 * if we are unable to restore the scroll position
326 */
327 preventScrollReset: boolean;
328 /**
329 * Tracks the state of the current navigation
330 */
331 navigation: Navigation;
332 /**
333 * Tracks any in-progress revalidations
334 */
335 revalidation: RevalidationState;
336 /**
337 * Data from the loaders for the current matches
338 */
339 loaderData: RouteData;
340 /**
341 * Data from the action for the current matches
342 */
343 actionData: RouteData | null;
344 /**
345 * Errors caught from loaders for the current matches
346 */
347 errors: RouteData | null;
348 /**
349 * Map of current fetchers
350 */
351 fetchers: Map<string, Fetcher>;
352 /**
353 * Map of current blockers
354 */
355 blockers: Map<string, Blocker>;
356}
357/**
358 * Data that can be passed into hydrate a Router from SSR
359 */
360type HydrationState = Partial<Pick<RouterState, "loaderData" | "actionData" | "errors">>;
361/**
362 * Future flags to toggle new feature behavior
363 */
364interface FutureConfig {
365 unstable_passThroughRequests: boolean;
366}
367/**
368 * Initialization options for createRouter
369 */
370interface RouterInit {
371 routes: RouteObject[];
372 history: History;
373 basename?: string;
374 getContext?: () => MaybePromise<RouterContextProvider>;
375 unstable_instrumentations?: unstable_ClientInstrumentation[];
376 mapRouteProperties?: MapRoutePropertiesFunction;
377 future?: Partial<FutureConfig>;
378 hydrationRouteProperties?: string[];
379 hydrationData?: HydrationState;
380 window?: Window;
381 dataStrategy?: DataStrategyFunction;
382 patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
383}
384/**
385 * State returned from a server-side query() call
386 */
387interface StaticHandlerContext {
388 basename: Router$1["basename"];
389 location: RouterState["location"];
390 matches: RouterState["matches"];
391 loaderData: RouterState["loaderData"];
392 actionData: RouterState["actionData"];
393 errors: RouterState["errors"];
394 statusCode: number;
395 loaderHeaders: Record<string, Headers>;
396 actionHeaders: Record<string, Headers>;
397 _deepestRenderedBoundaryId?: string | null;
398}
399/**
400 * A StaticHandler instance manages a singular SSR navigation/fetch event
401 */
402interface StaticHandler {
403 dataRoutes: DataRouteObject[];
404 query(request: Request, opts?: {
405 requestContext?: unknown;
406 filterMatchesToLoad?: (match: DataRouteMatch) => boolean;
407 skipLoaderErrorBubbling?: boolean;
408 skipRevalidation?: boolean;
409 dataStrategy?: DataStrategyFunction<unknown>;
410 generateMiddlewareResponse?: (query: (r: Request, args?: {
411 filterMatchesToLoad?: (match: DataRouteMatch) => boolean;
412 }) => Promise<StaticHandlerContext | Response>) => MaybePromise<Response>;
413 unstable_normalizePath?: (request: Request) => Path;
414 }): Promise<StaticHandlerContext | Response>;
415 queryRoute(request: Request, opts?: {
416 routeId?: string;
417 requestContext?: unknown;
418 dataStrategy?: DataStrategyFunction<unknown>;
419 generateMiddlewareResponse?: (queryRoute: (r: Request) => Promise<Response>) => MaybePromise<Response>;
420 unstable_normalizePath?: (request: Request) => Path;
421 }): Promise<any>;
422}
423type ViewTransitionOpts = {
424 currentLocation: Location;
425 nextLocation: Location;
426};
427/**
428 * Subscriber function signature for changes to router state
429 */
430interface RouterSubscriber {
431 (state: RouterState, opts: {
432 deletedFetchers: string[];
433 newErrors: RouteData | null;
434 viewTransitionOpts?: ViewTransitionOpts;
435 flushSync: boolean;
436 }): void;
437}
438/**
439 * Function signature for determining the key to be used in scroll restoration
440 * for a given location
441 */
442interface GetScrollRestorationKeyFunction {
443 (location: Location, matches: UIMatch[]): string | null;
444}
445/**
446 * Function signature for determining the current scroll position
447 */
448interface GetScrollPositionFunction {
449 (): number;
450}
451/**
452 * - "route": relative to the route hierarchy so `..` means remove all segments
453 * of the current route even if it has many. For example, a `route("posts/:id")`
454 * would have both `:id` and `posts` removed from the url.
455 * - "path": relative to the pathname so `..` means remove one segment of the
456 * pathname. For example, a `route("posts/:id")` would have only `:id` removed
457 * from the url.
458 */
459type RelativeRoutingType = "route" | "path";
460type BaseNavigateOrFetchOptions = {
461 preventScrollReset?: boolean;
462 relative?: RelativeRoutingType;
463 flushSync?: boolean;
464 unstable_defaultShouldRevalidate?: boolean;
465};
466type BaseNavigateOptions = BaseNavigateOrFetchOptions & {
467 replace?: boolean;
468 state?: any;
469 fromRouteId?: string;
470 viewTransition?: boolean;
471 unstable_mask?: To;
472};
473type BaseSubmissionOptions = {
474 formMethod?: HTMLFormMethod;
475 formEncType?: FormEncType;
476} & ({
477 formData: FormData;
478 body?: undefined;
479} | {
480 formData?: undefined;
481 body: any;
482});
483/**
484 * Options for a navigate() call for a normal (non-submission) navigation
485 */
486type LinkNavigateOptions = BaseNavigateOptions;
487/**
488 * Options for a navigate() call for a submission navigation
489 */
490type SubmissionNavigateOptions = BaseNavigateOptions & BaseSubmissionOptions;
491/**
492 * Options to pass to navigate() for a navigation
493 */
494type RouterNavigateOptions = LinkNavigateOptions | SubmissionNavigateOptions;
495/**
496 * Options for a fetch() load
497 */
498type LoadFetchOptions = BaseNavigateOrFetchOptions;
499/**
500 * Options for a fetch() submission
501 */
502type SubmitFetchOptions = BaseNavigateOrFetchOptions & BaseSubmissionOptions;
503/**
504 * Options to pass to fetch()
505 */
506type RouterFetchOptions = LoadFetchOptions | SubmitFetchOptions;
507/**
508 * Potential states for state.navigation
509 */
510type NavigationStates = {
511 Idle: {
512 state: "idle";
513 location: undefined;
514 formMethod: undefined;
515 formAction: undefined;
516 formEncType: undefined;
517 formData: undefined;
518 json: undefined;
519 text: undefined;
520 };
521 Loading: {
522 state: "loading";
523 location: Location;
524 formMethod: Submission["formMethod"] | undefined;
525 formAction: Submission["formAction"] | undefined;
526 formEncType: Submission["formEncType"] | undefined;
527 formData: Submission["formData"] | undefined;
528 json: Submission["json"] | undefined;
529 text: Submission["text"] | undefined;
530 };
531 Submitting: {
532 state: "submitting";
533 location: Location;
534 formMethod: Submission["formMethod"];
535 formAction: Submission["formAction"];
536 formEncType: Submission["formEncType"];
537 formData: Submission["formData"];
538 json: Submission["json"];
539 text: Submission["text"];
540 };
541};
542type Navigation = NavigationStates[keyof NavigationStates];
543type RevalidationState = "idle" | "loading";
544/**
545 * Potential states for fetchers
546 */
547type FetcherStates<TData = any> = {
548 /**
549 * The fetcher is not calling a loader or action
550 *
551 * ```tsx
552 * fetcher.state === "idle"
553 * ```
554 */
555 Idle: {
556 state: "idle";
557 formMethod: undefined;
558 formAction: undefined;
559 formEncType: undefined;
560 text: undefined;
561 formData: undefined;
562 json: undefined;
563 /**
564 * If the fetcher has never been called, this will be undefined.
565 */
566 data: TData | undefined;
567 };
568 /**
569 * The fetcher is loading data from a {@link LoaderFunction | loader} from a
570 * call to {@link FetcherWithComponents.load | `fetcher.load`}.
571 *
572 * ```tsx
573 * // somewhere
574 * <button onClick={() => fetcher.load("/some/route") }>Load</button>
575 *
576 * // the state will update
577 * fetcher.state === "loading"
578 * ```
579 */
580 Loading: {
581 state: "loading";
582 formMethod: Submission["formMethod"] | undefined;
583 formAction: Submission["formAction"] | undefined;
584 formEncType: Submission["formEncType"] | undefined;
585 text: Submission["text"] | undefined;
586 formData: Submission["formData"] | undefined;
587 json: Submission["json"] | undefined;
588 data: TData | undefined;
589 };
590 /**
591 The fetcher is submitting to a {@link LoaderFunction} (GET) or {@link ActionFunction} (POST) from a {@link FetcherWithComponents.Form | `fetcher.Form`} or {@link FetcherWithComponents.submit | `fetcher.submit`}.
592
593 ```tsx
594 // somewhere
595 <input
596 onChange={e => {
597 fetcher.submit(event.currentTarget.form, { method: "post" });
598 }}
599 />
600
601 // the state will update
602 fetcher.state === "submitting"
603
604 // and formData will be available
605 fetcher.formData
606 ```
607 */
608 Submitting: {
609 state: "submitting";
610 formMethod: Submission["formMethod"];
611 formAction: Submission["formAction"];
612 formEncType: Submission["formEncType"];
613 text: Submission["text"];
614 formData: Submission["formData"];
615 json: Submission["json"];
616 data: TData | undefined;
617 };
618};
619type Fetcher<TData = any> = FetcherStates<TData>[keyof FetcherStates<TData>];
620interface BlockerBlocked {
621 state: "blocked";
622 reset: () => void;
623 proceed: () => void;
624 location: Location;
625}
626interface BlockerUnblocked {
627 state: "unblocked";
628 reset: undefined;
629 proceed: undefined;
630 location: undefined;
631}
632interface BlockerProceeding {
633 state: "proceeding";
634 reset: undefined;
635 proceed: undefined;
636 location: Location;
637}
638type Blocker = BlockerUnblocked | BlockerBlocked | BlockerProceeding;
639type BlockerFunction = (args: {
640 currentLocation: Location;
641 nextLocation: Location;
642 historyAction: Action;
643}) => boolean;
644declare const IDLE_NAVIGATION: NavigationStates["Idle"];
645declare const IDLE_FETCHER: FetcherStates["Idle"];
646declare const IDLE_BLOCKER: BlockerUnblocked;
647/**
648 * Create a router and listen to history POP navigations
649 */
650declare function createRouter(init: RouterInit): Router$1;
651interface CreateStaticHandlerOptions {
652 basename?: string;
653 mapRouteProperties?: MapRoutePropertiesFunction;
654 unstable_instrumentations?: Pick<unstable_ServerInstrumentation, "route">[];
655 future?: Partial<FutureConfig>;
656}
657
658declare function mapRouteProperties(route: RouteObject): Partial<RouteObject> & {
659 hasErrorBoundary: boolean;
660};
661declare const hydrationRouteProperties: (keyof RouteObject)[];
662/**
663 * @category Data Routers
664 */
665interface MemoryRouterOpts {
666 /**
667 * Basename path for the application.
668 */
669 basename?: string;
670 /**
671 * A function that returns an {@link RouterContextProvider} instance
672 * which is provided as the `context` argument to client [`action`](../../start/data/route-object#action)s,
673 * [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
674 * This function is called to generate a fresh `context` instance on each
675 * navigation or fetcher call.
676 */
677 getContext?: RouterInit["getContext"];
678 /**
679 * Future flags to enable for the router.
680 */
681 future?: Partial<FutureConfig>;
682 /**
683 * Hydration data to initialize the router with if you have already performed
684 * data loading on the server.
685 */
686 hydrationData?: HydrationState;
687 /**
688 * Initial entries in the in-memory history stack
689 */
690 initialEntries?: InitialEntry[];
691 /**
692 * Index of `initialEntries` the application should initialize to
693 */
694 initialIndex?: number;
695 /**
696 * Array of instrumentation objects allowing you to instrument the router and
697 * individual routes prior to router initialization (and on any subsequently
698 * added routes via `route.lazy` or `patchRoutesOnNavigation`). This is
699 * mostly useful for observability such as wrapping navigations, fetches,
700 * as well as route loaders/actions/middlewares with logging and/or performance
701 * tracing. See the [docs](../../how-to/instrumentation) for more information.
702 *
703 * ```tsx
704 * let router = createBrowserRouter(routes, {
705 * unstable_instrumentations: [logging]
706 * });
707 *
708 *
709 * let logging = {
710 * router({ instrument }) {
711 * instrument({
712 * navigate: (impl, info) => logExecution(`navigate ${info.to}`, impl),
713 * fetch: (impl, info) => logExecution(`fetch ${info.to}`, impl)
714 * });
715 * },
716 * route({ instrument, id }) {
717 * instrument({
718 * middleware: (impl, info) => logExecution(
719 * `middleware ${info.request.url} (route ${id})`,
720 * impl
721 * ),
722 * loader: (impl, info) => logExecution(
723 * `loader ${info.request.url} (route ${id})`,
724 * impl
725 * ),
726 * action: (impl, info) => logExecution(
727 * `action ${info.request.url} (route ${id})`,
728 * impl
729 * ),
730 * })
731 * }
732 * };
733 *
734 * async function logExecution(label: string, impl: () => Promise<void>) {
735 * let start = performance.now();
736 * console.log(`start ${label}`);
737 * await impl();
738 * let duration = Math.round(performance.now() - start);
739 * console.log(`end ${label} (${duration}ms)`);
740 * }
741 * ```
742 */
743 unstable_instrumentations?: unstable_ClientInstrumentation[];
744 /**
745 * Override the default data strategy of running loaders in parallel -
746 * see the [docs](../../how-to/data-strategy) for more information.
747 *
748 * ```tsx
749 * let router = createBrowserRouter(routes, {
750 * async dataStrategy({
751 * matches,
752 * request,
753 * runClientMiddleware,
754 * }) {
755 * const matchesToLoad = matches.filter((m) =>
756 * m.shouldCallHandler(),
757 * );
758 *
759 * const results: Record<string, DataStrategyResult> = {};
760 * await runClientMiddleware(() =>
761 * Promise.all(
762 * matchesToLoad.map(async (match) => {
763 * results[match.route.id] = await match.resolve();
764 * }),
765 * ),
766 * );
767 * return results;
768 * },
769 * });
770 * ```
771 */
772 dataStrategy?: DataStrategyFunction;
773 /**
774 * Lazily define portions of the route tree on navigations.
775 */
776 patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
777}
778/**
779 * Create a new {@link DataRouter} that manages the application path using an
780 * in-memory [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
781 * stack. Useful for non-browser environments without a DOM API.
782 *
783 * @public
784 * @category Data Routers
785 * @mode data
786 * @param routes Application routes
787 * @param opts Options
788 * @param {MemoryRouterOpts.basename} opts.basename n/a
789 * @param {MemoryRouterOpts.dataStrategy} opts.dataStrategy n/a
790 * @param {MemoryRouterOpts.future} opts.future n/a
791 * @param {MemoryRouterOpts.getContext} opts.getContext n/a
792 * @param {MemoryRouterOpts.hydrationData} opts.hydrationData n/a
793 * @param {MemoryRouterOpts.initialEntries} opts.initialEntries n/a
794 * @param {MemoryRouterOpts.initialIndex} opts.initialIndex n/a
795 * @param {MemoryRouterOpts.unstable_instrumentations} opts.unstable_instrumentations n/a
796 * @param {MemoryRouterOpts.patchRoutesOnNavigation} opts.patchRoutesOnNavigation n/a
797 * @returns An initialized {@link DataRouter} to pass to {@link RouterProvider | `<RouterProvider>`}
798 */
799declare function createMemoryRouter(routes: RouteObject[], opts?: MemoryRouterOpts): Router$1;
800/**
801 * Function signature for client side error handling for loader/actions errors
802 * and rendering errors via `componentDidCatch`
803 */
804interface ClientOnErrorFunction {
805 (error: unknown, info: {
806 location: Location;
807 params: Params;
808 unstable_pattern: string;
809 errorInfo?: React.ErrorInfo;
810 }): void;
811}
812/**
813 * @category Types
814 */
815interface RouterProviderProps {
816 /**
817 * The {@link DataRouter} instance to use for navigation and data fetching.
818 */
819 router: Router$1;
820 /**
821 * The [`ReactDOM.flushSync`](https://react.dev/reference/react-dom/flushSync)
822 * implementation to use for flushing updates.
823 *
824 * You usually don't have to worry about this:
825 * - The `RouterProvider` exported from `react-router/dom` handles this internally for you
826 * - If you are rendering in a non-DOM environment, you can import
827 * `RouterProvider` from `react-router` and ignore this prop
828 */
829 flushSync?: (fn: () => unknown) => undefined;
830 /**
831 * An error handler function that will be called for any middleware, loader, action,
832 * or render errors that are encountered in your application. This is useful for
833 * logging or reporting errors instead of in the {@link ErrorBoundary} because it's not
834 * subject to re-rendering and will only run one time per error.
835 *
836 * The `errorInfo` parameter is passed along from
837 * [`componentDidCatch`](https://react.dev/reference/react/Component#componentdidcatch)
838 * and is only present for render errors.
839 *
840 * ```tsx
841 * <RouterProvider onError=(error, info) => {
842 * let { location, params, unstable_pattern, errorInfo } = info;
843 * console.error(error, location, errorInfo);
844 * reportToErrorService(error, location, errorInfo);
845 * }} />
846 * ```
847 */
848 onError?: ClientOnErrorFunction;
849 /**
850 * Control whether router state updates are internally wrapped in
851 * [`React.startTransition`](https://react.dev/reference/react/startTransition).
852 *
853 * - When left `undefined`, all state updates are wrapped in
854 * `React.startTransition`
855 * - This can lead to buggy behaviors if you are wrapping your own
856 * navigations/fetchers in `startTransition`.
857 * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
858 * in `React.startTransition` and router state changes will be wrapped in
859 * `React.startTransition` and also sent through
860 * [`useOptimistic`](https://react.dev/reference/react/useOptimistic) to
861 * surface mid-navigation router state changes to the UI.
862 * - When set to `false`, the router will not leverage `React.startTransition` or
863 * `React.useOptimistic` on any navigations or state changes.
864 *
865 * For more information, please see the [docs](https://reactrouter.com/explanation/react-transitions).
866 */
867 unstable_useTransitions?: boolean;
868}
869/**
870 * Render the UI for the given {@link DataRouter}. This component should
871 * typically be at the top of an app's element tree.
872 *
873 * ```tsx
874 * import { createBrowserRouter } from "react-router";
875 * import { RouterProvider } from "react-router/dom";
876 * import { createRoot } from "react-dom/client";
877 *
878 * const router = createBrowserRouter(routes);
879 * createRoot(document.getElementById("root")).render(
880 * <RouterProvider router={router} />
881 * );
882 * ```
883 *
884 * <docs-info>Please note that this component is exported both from
885 * `react-router` and `react-router/dom` with the only difference being that the
886 * latter automatically wires up `react-dom`'s [`flushSync`](https://react.dev/reference/react-dom/flushSync)
887 * implementation. You _almost always_ want to use the version from
888 * `react-router/dom` unless you're running in a non-DOM environment.</docs-info>
889 *
890 *
891 * @public
892 * @category Data Routers
893 * @mode data
894 * @param props Props
895 * @param {RouterProviderProps.flushSync} props.flushSync n/a
896 * @param {RouterProviderProps.onError} props.onError n/a
897 * @param {RouterProviderProps.router} props.router n/a
898 * @param {RouterProviderProps.unstable_useTransitions} props.unstable_useTransitions n/a
899 * @returns React element for the rendered router
900 */
901declare function RouterProvider({ router, flushSync: reactDomFlushSyncImpl, onError, unstable_useTransitions, }: RouterProviderProps): React.ReactElement;
902/**
903 * @category Types
904 */
905interface MemoryRouterProps {
906 /**
907 * Application basename
908 */
909 basename?: string;
910 /**
911 * Nested {@link Route} elements describing the route tree
912 */
913 children?: React.ReactNode;
914 /**
915 * Initial entries in the in-memory history stack
916 */
917 initialEntries?: InitialEntry[];
918 /**
919 * Index of `initialEntries` the application should initialize to
920 */
921 initialIndex?: number;
922 /**
923 * Control whether router state updates are internally wrapped in
924 * [`React.startTransition`](https://react.dev/reference/react/startTransition).
925 *
926 * - When left `undefined`, all router state updates are wrapped in
927 * `React.startTransition`
928 * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
929 * in `React.startTransition` and all router state updates are wrapped in
930 * `React.startTransition`
931 * - When set to `false`, the router will not leverage `React.startTransition`
932 * on any navigations or state changes.
933 *
934 * For more information, please see the [docs](https://reactrouter.com/explanation/react-transitions).
935 */
936 unstable_useTransitions?: boolean;
937}
938/**
939 * A declarative {@link Router | `<Router>`} that stores all entries in memory.
940 *
941 * @public
942 * @category Declarative Routers
943 * @mode declarative
944 * @param props Props
945 * @param {MemoryRouterProps.basename} props.basename n/a
946 * @param {MemoryRouterProps.children} props.children n/a
947 * @param {MemoryRouterProps.initialEntries} props.initialEntries n/a
948 * @param {MemoryRouterProps.initialIndex} props.initialIndex n/a
949 * @param {MemoryRouterProps.unstable_useTransitions} props.unstable_useTransitions n/a
950 * @returns A declarative in-memory {@link Router | `<Router>`} for client-side
951 * routing.
952 */
953declare function MemoryRouter({ basename, children, initialEntries, initialIndex, unstable_useTransitions, }: MemoryRouterProps): React.ReactElement;
954/**
955 * @category Types
956 */
957interface NavigateProps {
958 /**
959 * The path to navigate to. This can be a string or a {@link Path} object
960 */
961 to: To;
962 /**
963 * Whether to replace the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
964 * stack
965 */
966 replace?: boolean;
967 /**
968 * State to pass to the new {@link Location} to store in [`history.state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state).
969 */
970 state?: any;
971 /**
972 * How to interpret relative routing in the `to` prop.
973 * See {@link RelativeRoutingType}.
974 */
975 relative?: RelativeRoutingType;
976}
977/**
978 * A component-based version of {@link useNavigate} to use in a
979 * [`React.Component` class](https://react.dev/reference/react/Component) where
980 * hooks cannot be used.
981 *
982 * It's recommended to avoid using this component in favor of {@link useNavigate}.
983 *
984 * @example
985 * <Navigate to="/tasks" />
986 *
987 * @public
988 * @category Components
989 * @param props Props
990 * @param {NavigateProps.relative} props.relative n/a
991 * @param {NavigateProps.replace} props.replace n/a
992 * @param {NavigateProps.state} props.state n/a
993 * @param {NavigateProps.to} props.to n/a
994 * @returns {void}
995 *
996 */
997declare function Navigate({ to, replace, state, relative, }: NavigateProps): null;
998/**
999 * @category Types
1000 */
1001interface OutletProps {
1002 /**
1003 * Provides a context value to the element tree below the outlet. Use when
1004 * the parent route needs to provide values to child routes.
1005 *
1006 * ```tsx
1007 * <Outlet context={myContextValue} />
1008 * ```
1009 *
1010 * Access the context with {@link useOutletContext}.
1011 */
1012 context?: unknown;
1013}
1014/**
1015 * Renders the matching child route of a parent route or nothing if no child
1016 * route matches.
1017 *
1018 * @example
1019 * import { Outlet } from "react-router";
1020 *
1021 * export default function SomeParent() {
1022 * return (
1023 * <div>
1024 * <h1>Parent Content</h1>
1025 * <Outlet />
1026 * </div>
1027 * );
1028 * }
1029 *
1030 * @public
1031 * @category Components
1032 * @param props Props
1033 * @param {OutletProps.context} props.context n/a
1034 * @returns React element for the rendered outlet or `null` if no child route matches.
1035 */
1036declare function Outlet(props: OutletProps): React.ReactElement | null;
1037/**
1038 * @category Types
1039 */
1040interface PathRouteProps {
1041 /**
1042 * Whether the path should be case-sensitive. Defaults to `false`.
1043 */
1044 caseSensitive?: NonIndexRouteObject["caseSensitive"];
1045 /**
1046 * The path pattern to match. If unspecified or empty, then this becomes a
1047 * layout route.
1048 */
1049 path?: NonIndexRouteObject["path"];
1050 /**
1051 * The unique identifier for this route (for use with {@link DataRouter}s)
1052 */
1053 id?: NonIndexRouteObject["id"];
1054 /**
1055 * A function that returns a promise that resolves to the route object.
1056 * Used for code-splitting routes.
1057 * See [`lazy`](../../start/data/route-object#lazy).
1058 */
1059 lazy?: LazyRouteFunction<NonIndexRouteObject>;
1060 /**
1061 * The route middleware.
1062 * See [`middleware`](../../start/data/route-object#middleware).
1063 */
1064 middleware?: NonIndexRouteObject["middleware"];
1065 /**
1066 * The route loader.
1067 * See [`loader`](../../start/data/route-object#loader).
1068 */
1069 loader?: NonIndexRouteObject["loader"];
1070 /**
1071 * The route action.
1072 * See [`action`](../../start/data/route-object#action).
1073 */
1074 action?: NonIndexRouteObject["action"];
1075 hasErrorBoundary?: NonIndexRouteObject["hasErrorBoundary"];
1076 /**
1077 * The route shouldRevalidate function.
1078 * See [`shouldRevalidate`](../../start/data/route-object#shouldRevalidate).
1079 */
1080 shouldRevalidate?: NonIndexRouteObject["shouldRevalidate"];
1081 /**
1082 * The route handle.
1083 */
1084 handle?: NonIndexRouteObject["handle"];
1085 /**
1086 * Whether this is an index route.
1087 */
1088 index?: false;
1089 /**
1090 * Child Route components
1091 */
1092 children?: React.ReactNode;
1093 /**
1094 * The React element to render when this Route matches.
1095 * Mutually exclusive with `Component`.
1096 */
1097 element?: React.ReactNode | null;
1098 /**
1099 * The React element to render while this router is loading data.
1100 * Mutually exclusive with `HydrateFallback`.
1101 */
1102 hydrateFallbackElement?: React.ReactNode | null;
1103 /**
1104 * The React element to render at this route if an error occurs.
1105 * Mutually exclusive with `ErrorBoundary`.
1106 */
1107 errorElement?: React.ReactNode | null;
1108 /**
1109 * The React Component to render when this route matches.
1110 * Mutually exclusive with `element`.
1111 */
1112 Component?: React.ComponentType | null;
1113 /**
1114 * The React Component to render while this router is loading data.
1115 * Mutually exclusive with `hydrateFallbackElement`.
1116 */
1117 HydrateFallback?: React.ComponentType | null;
1118 /**
1119 * The React Component to render at this route if an error occurs.
1120 * Mutually exclusive with `errorElement`.
1121 */
1122 ErrorBoundary?: React.ComponentType | null;
1123}
1124/**
1125 * @category Types
1126 */
1127interface LayoutRouteProps extends PathRouteProps {
1128}
1129/**
1130 * @category Types
1131 */
1132interface IndexRouteProps {
1133 /**
1134 * Whether the path should be case-sensitive. Defaults to `false`.
1135 */
1136 caseSensitive?: IndexRouteObject["caseSensitive"];
1137 /**
1138 * The path pattern to match. If unspecified or empty, then this becomes a
1139 * layout route.
1140 */
1141 path?: IndexRouteObject["path"];
1142 /**
1143 * The unique identifier for this route (for use with {@link DataRouter}s)
1144 */
1145 id?: IndexRouteObject["id"];
1146 /**
1147 * A function that returns a promise that resolves to the route object.
1148 * Used for code-splitting routes.
1149 * See [`lazy`](../../start/data/route-object#lazy).
1150 */
1151 lazy?: LazyRouteFunction<IndexRouteObject>;
1152 /**
1153 * The route middleware.
1154 * See [`middleware`](../../start/data/route-object#middleware).
1155 */
1156 middleware?: IndexRouteObject["middleware"];
1157 /**
1158 * The route loader.
1159 * See [`loader`](../../start/data/route-object#loader).
1160 */
1161 loader?: IndexRouteObject["loader"];
1162 /**
1163 * The route action.
1164 * See [`action`](../../start/data/route-object#action).
1165 */
1166 action?: IndexRouteObject["action"];
1167 hasErrorBoundary?: IndexRouteObject["hasErrorBoundary"];
1168 /**
1169 * The route shouldRevalidate function.
1170 * See [`shouldRevalidate`](../../start/data/route-object#shouldRevalidate).
1171 */
1172 shouldRevalidate?: IndexRouteObject["shouldRevalidate"];
1173 /**
1174 * The route handle.
1175 */
1176 handle?: IndexRouteObject["handle"];
1177 /**
1178 * Whether this is an index route.
1179 */
1180 index: true;
1181 /**
1182 * Child Route components
1183 */
1184 children?: undefined;
1185 /**
1186 * The React element to render when this Route matches.
1187 * Mutually exclusive with `Component`.
1188 */
1189 element?: React.ReactNode | null;
1190 /**
1191 * The React element to render while this router is loading data.
1192 * Mutually exclusive with `HydrateFallback`.
1193 */
1194 hydrateFallbackElement?: React.ReactNode | null;
1195 /**
1196 * The React element to render at this route if an error occurs.
1197 * Mutually exclusive with `ErrorBoundary`.
1198 */
1199 errorElement?: React.ReactNode | null;
1200 /**
1201 * The React Component to render when this route matches.
1202 * Mutually exclusive with `element`.
1203 */
1204 Component?: React.ComponentType | null;
1205 /**
1206 * The React Component to render while this router is loading data.
1207 * Mutually exclusive with `hydrateFallbackElement`.
1208 */
1209 HydrateFallback?: React.ComponentType | null;
1210 /**
1211 * The React Component to render at this route if an error occurs.
1212 * Mutually exclusive with `errorElement`.
1213 */
1214 ErrorBoundary?: React.ComponentType | null;
1215}
1216/**
1217 * @category Types
1218 */
1219type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;
1220/**
1221 * Configures an element to render when a pattern matches the current location.
1222 * It must be rendered within a {@link Routes} element. Note that these routes
1223 * do not participate in data loading, actions, code splitting, or any other
1224 * route module features.
1225 *
1226 * @example
1227 * // Usually used in a declarative router
1228 * function App() {
1229 * return (
1230 * <BrowserRouter>
1231 * <Routes>
1232 * <Route index element={<StepOne />} />
1233 * <Route path="step-2" element={<StepTwo />} />
1234 * <Route path="step-3" element={<StepThree />} />
1235 * </Routes>
1236 * </BrowserRouter>
1237 * );
1238 * }
1239 *
1240 * // But can be used with a data router as well if you prefer the JSX notation
1241 * const routes = createRoutesFromElements(
1242 * <>
1243 * <Route index loader={step1Loader} Component={StepOne} />
1244 * <Route path="step-2" loader={step2Loader} Component={StepTwo} />
1245 * <Route path="step-3" loader={step3Loader} Component={StepThree} />
1246 * </>
1247 * );
1248 *
1249 * const router = createBrowserRouter(routes);
1250 *
1251 * function App() {
1252 * return <RouterProvider router={router} />;
1253 * }
1254 *
1255 * @public
1256 * @category Components
1257 * @param props Props
1258 * @param {PathRouteProps.action} props.action n/a
1259 * @param {PathRouteProps.caseSensitive} props.caseSensitive n/a
1260 * @param {PathRouteProps.Component} props.Component n/a
1261 * @param {PathRouteProps.children} props.children n/a
1262 * @param {PathRouteProps.element} props.element n/a
1263 * @param {PathRouteProps.ErrorBoundary} props.ErrorBoundary n/a
1264 * @param {PathRouteProps.errorElement} props.errorElement n/a
1265 * @param {PathRouteProps.handle} props.handle n/a
1266 * @param {PathRouteProps.HydrateFallback} props.HydrateFallback n/a
1267 * @param {PathRouteProps.hydrateFallbackElement} props.hydrateFallbackElement n/a
1268 * @param {PathRouteProps.id} props.id n/a
1269 * @param {PathRouteProps.index} props.index n/a
1270 * @param {PathRouteProps.lazy} props.lazy n/a
1271 * @param {PathRouteProps.loader} props.loader n/a
1272 * @param {PathRouteProps.path} props.path n/a
1273 * @param {PathRouteProps.shouldRevalidate} props.shouldRevalidate n/a
1274 * @returns {void}
1275 */
1276declare function Route(props: RouteProps): React.ReactElement | null;
1277/**
1278 * @category Types
1279 */
1280interface RouterProps {
1281 /**
1282 * The base path for the application. This is prepended to all locations
1283 */
1284 basename?: string;
1285 /**
1286 * Nested {@link Route} elements describing the route tree
1287 */
1288 children?: React.ReactNode;
1289 /**
1290 * The location to match against. Defaults to the current location.
1291 * This can be a string or a {@link Location} object.
1292 */
1293 location: Partial<Location> | string;
1294 /**
1295 * The type of navigation that triggered this `location` change.
1296 * Defaults to {@link NavigationType.Pop}.
1297 */
1298 navigationType?: Action;
1299 /**
1300 * The navigator to use for navigation. This is usually a history object
1301 * or a custom navigator that implements the {@link Navigator} interface.
1302 */
1303 navigator: Navigator;
1304 /**
1305 * Whether this router is static or not (used for SSR). If `true`, the router
1306 * will not be reactive to location changes.
1307 */
1308 static?: boolean;
1309 /**
1310 * Control whether router state updates are internally wrapped in
1311 * [`React.startTransition`](https://react.dev/reference/react/startTransition).
1312 *
1313 * - When left `undefined`, all router state updates are wrapped in
1314 * `React.startTransition`
1315 * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
1316 * in `React.startTransition` and all router state updates are wrapped in
1317 * `React.startTransition`
1318 * - When set to `false`, the router will not leverage `React.startTransition`
1319 * on any navigations or state changes.
1320 *
1321 * For more information, please see the [docs](https://reactrouter.com/explanation/react-transitions).
1322 */
1323 unstable_useTransitions?: boolean;
1324}
1325/**
1326 * Provides location context for the rest of the app.
1327 *
1328 * Note: You usually won't render a `<Router>` directly. Instead, you'll render a
1329 * router that is more specific to your environment such as a {@link BrowserRouter}
1330 * in web browsers or a {@link ServerRouter} for server rendering.
1331 *
1332 * @public
1333 * @category Declarative Routers
1334 * @mode declarative
1335 * @param props Props
1336 * @param {RouterProps.basename} props.basename n/a
1337 * @param {RouterProps.children} props.children n/a
1338 * @param {RouterProps.location} props.location n/a
1339 * @param {RouterProps.navigationType} props.navigationType n/a
1340 * @param {RouterProps.navigator} props.navigator n/a
1341 * @param {RouterProps.static} props.static n/a
1342 * @param {RouterProps.unstable_useTransitions} props.unstable_useTransitions n/a
1343 * @returns React element for the rendered router or `null` if the location does
1344 * not match the {@link props.basename}
1345 */
1346declare function Router({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp, unstable_useTransitions, }: RouterProps): React.ReactElement | null;
1347/**
1348 * @category Types
1349 */
1350interface RoutesProps {
1351 /**
1352 * Nested {@link Route} elements
1353 */
1354 children?: React.ReactNode;
1355 /**
1356 * The {@link Location} to match against. Defaults to the current location.
1357 */
1358 location?: Partial<Location> | string;
1359}
1360/**
1361 * Renders a branch of {@link Route | `<Route>`s} that best matches the current
1362 * location. Note that these routes do not participate in [data loading](../../start/framework/route-module#loader),
1363 * [`action`](../../start/framework/route-module#action), code splitting, or
1364 * any other [route module](../../start/framework/route-module) features.
1365 *
1366 * @example
1367 * import { Route, Routes } from "react-router";
1368 *
1369 * <Routes>
1370 * <Route index element={<StepOne />} />
1371 * <Route path="step-2" element={<StepTwo />} />
1372 * <Route path="step-3" element={<StepThree />} />
1373 * </Routes>
1374 *
1375 * @public
1376 * @category Components
1377 * @param props Props
1378 * @param {RoutesProps.children} props.children n/a
1379 * @param {RoutesProps.location} props.location n/a
1380 * @returns React element for the rendered routes or `null` if no route matches
1381 */
1382declare function Routes({ children, location, }: RoutesProps): React.ReactElement | null;
1383interface AwaitResolveRenderFunction<Resolve = any> {
1384 (data: Awaited<Resolve>): React.ReactNode;
1385}
1386/**
1387 * @category Types
1388 */
1389interface AwaitProps<Resolve> {
1390 /**
1391 * When using a function, the resolved value is provided as the parameter.
1392 *
1393 * ```tsx [2]
1394 * <Await resolve={reviewsPromise}>
1395 * {(resolvedReviews) => <Reviews items={resolvedReviews} />}
1396 * </Await>
1397 * ```
1398 *
1399 * When using React elements, {@link useAsyncValue} will provide the
1400 * resolved value:
1401 *
1402 * ```tsx [2]
1403 * <Await resolve={reviewsPromise}>
1404 * <Reviews />
1405 * </Await>
1406 *
1407 * function Reviews() {
1408 * const resolvedReviews = useAsyncValue();
1409 * return <div>...</div>;
1410 * }
1411 * ```
1412 */
1413 children: React.ReactNode | AwaitResolveRenderFunction<Resolve>;
1414 /**
1415 * The error element renders instead of the `children` when the [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
1416 * rejects.
1417 *
1418 * ```tsx
1419 * <Await
1420 * errorElement={<div>Oops</div>}
1421 * resolve={reviewsPromise}
1422 * >
1423 * <Reviews />
1424 * </Await>
1425 * ```
1426 *
1427 * To provide a more contextual error, you can use the {@link useAsyncError} in a
1428 * child component
1429 *
1430 * ```tsx
1431 * <Await
1432 * errorElement={<ReviewsError />}
1433 * resolve={reviewsPromise}
1434 * >
1435 * <Reviews />
1436 * </Await>
1437 *
1438 * function ReviewsError() {
1439 * const error = useAsyncError();
1440 * return <div>Error loading reviews: {error.message}</div>;
1441 * }
1442 * ```
1443 *
1444 * If you do not provide an `errorElement`, the rejected value will bubble up
1445 * to the nearest route-level [`ErrorBoundary`](../../start/framework/route-module#errorboundary)
1446 * and be accessible via the {@link useRouteError} hook.
1447 */
1448 errorElement?: React.ReactNode;
1449 /**
1450 * Takes a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
1451 * returned from a [`loader`](../../start/framework/route-module#loader) to be
1452 * resolved and rendered.
1453 *
1454 * ```tsx
1455 * import { Await, useLoaderData } from "react-router";
1456 *
1457 * export async function loader() {
1458 * let reviews = getReviews(); // not awaited
1459 * let book = await getBook();
1460 * return {
1461 * book,
1462 * reviews, // this is a promise
1463 * };
1464 * }
1465 *
1466 * export default function Book() {
1467 * const {
1468 * book,
1469 * reviews, // this is the same promise
1470 * } = useLoaderData();
1471 *
1472 * return (
1473 * <div>
1474 * <h1>{book.title}</h1>
1475 * <p>{book.description}</p>
1476 * <React.Suspense fallback={<ReviewsSkeleton />}>
1477 * <Await
1478 * // and is the promise we pass to Await
1479 * resolve={reviews}
1480 * >
1481 * <Reviews />
1482 * </Await>
1483 * </React.Suspense>
1484 * </div>
1485 * );
1486 * }
1487 * ```
1488 */
1489 resolve: Resolve;
1490}
1491/**
1492 * Used to render promise values with automatic error handling.
1493 *
1494 * **Note:** `<Await>` expects to be rendered inside a [`<React.Suspense>`](https://react.dev/reference/react/Suspense)
1495 *
1496 * @example
1497 * import { Await, useLoaderData } from "react-router";
1498 *
1499 * export async function loader() {
1500 * // not awaited
1501 * const reviews = getReviews();
1502 * // awaited (blocks the transition)
1503 * const book = await fetch("/api/book").then((res) => res.json());
1504 * return { book, reviews };
1505 * }
1506 *
1507 * function Book() {
1508 * const { book, reviews } = useLoaderData();
1509 * return (
1510 * <div>
1511 * <h1>{book.title}</h1>
1512 * <p>{book.description}</p>
1513 * <React.Suspense fallback={<ReviewsSkeleton />}>
1514 * <Await
1515 * resolve={reviews}
1516 * errorElement={
1517 * <div>Could not load reviews 😬</div>
1518 * }
1519 * children={(resolvedReviews) => (
1520 * <Reviews items={resolvedReviews} />
1521 * )}
1522 * />
1523 * </React.Suspense>
1524 * </div>
1525 * );
1526 * }
1527 *
1528 * @public
1529 * @category Components
1530 * @mode framework
1531 * @mode data
1532 * @param props Props
1533 * @param {AwaitProps.children} props.children n/a
1534 * @param {AwaitProps.errorElement} props.errorElement n/a
1535 * @param {AwaitProps.resolve} props.resolve n/a
1536 * @returns React element for the rendered awaited value
1537 */
1538declare function Await<Resolve>({ children, errorElement, resolve, }: AwaitProps<Resolve>): React.JSX.Element;
1539/**
1540 * Creates a route config from a React "children" object, which is usually
1541 * either a `<Route>` element or an array of them. Used internally by
1542 * `<Routes>` to create a route config from its children.
1543 *
1544 * @category Utils
1545 * @mode data
1546 * @param children The React children to convert into a route config
1547 * @param parentPath The path of the parent route, used to generate unique IDs.
1548 * @returns An array of {@link RouteObject}s that can be used with a {@link DataRouter}
1549 */
1550declare function createRoutesFromChildren(children: React.ReactNode, parentPath?: number[]): RouteObject[];
1551/**
1552 * Create route objects from JSX elements instead of arrays of objects.
1553 *
1554 * @example
1555 * const routes = createRoutesFromElements(
1556 * <>
1557 * <Route index loader={step1Loader} Component={StepOne} />
1558 * <Route path="step-2" loader={step2Loader} Component={StepTwo} />
1559 * <Route path="step-3" loader={step3Loader} Component={StepThree} />
1560 * </>
1561 * );
1562 *
1563 * const router = createBrowserRouter(routes);
1564 *
1565 * function App() {
1566 * return <RouterProvider router={router} />;
1567 * }
1568 *
1569 * @name createRoutesFromElements
1570 * @public
1571 * @category Utils
1572 * @mode data
1573 * @param children The React children to convert into a route config
1574 * @param parentPath The path of the parent route, used to generate unique IDs.
1575 * This is used for internal recursion and is not intended to be used by the
1576 * application developer.
1577 * @returns An array of {@link RouteObject}s that can be used with a {@link DataRouter}
1578 */
1579declare const createRoutesFromElements: typeof createRoutesFromChildren;
1580/**
1581 * Renders the result of {@link matchRoutes} into a React element.
1582 *
1583 * @public
1584 * @category Utils
1585 * @param matches The array of {@link RouteMatch | route matches} to render
1586 * @returns A React element that renders the matched routes or `null` if no matches
1587 */
1588declare function renderMatches(matches: RouteMatch[] | null): React.ReactElement | null;
1589declare function useRouteComponentProps(): {
1590 params: Readonly<Params<string>>;
1591 loaderData: any;
1592 actionData: any;
1593 matches: UIMatch<unknown, unknown>[];
1594};
1595type RouteComponentProps = ReturnType<typeof useRouteComponentProps>;
1596type RouteComponentType = React.ComponentType<RouteComponentProps>;
1597declare function WithComponentProps({ children, }: {
1598 children: React.ReactElement;
1599}): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
1600declare function withComponentProps(Component: RouteComponentType): () => React.ReactElement<{
1601 params: Readonly<Params<string>>;
1602 loaderData: any;
1603 actionData: any;
1604 matches: UIMatch<unknown, unknown>[];
1605}, string | React.JSXElementConstructor<any>>;
1606declare function useHydrateFallbackProps(): {
1607 params: Readonly<Params<string>>;
1608 loaderData: any;
1609 actionData: any;
1610};
1611type HydrateFallbackProps = ReturnType<typeof useHydrateFallbackProps>;
1612type HydrateFallbackType = React.ComponentType<HydrateFallbackProps>;
1613declare function WithHydrateFallbackProps({ children, }: {
1614 children: React.ReactElement;
1615}): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
1616declare function withHydrateFallbackProps(HydrateFallback: HydrateFallbackType): () => React.ReactElement<{
1617 params: Readonly<Params<string>>;
1618 loaderData: any;
1619 actionData: any;
1620}, string | React.JSXElementConstructor<any>>;
1621declare function useErrorBoundaryProps(): {
1622 params: Readonly<Params<string>>;
1623 loaderData: any;
1624 actionData: any;
1625 error: unknown;
1626};
1627type ErrorBoundaryProps = ReturnType<typeof useErrorBoundaryProps>;
1628type ErrorBoundaryType = React.ComponentType<ErrorBoundaryProps>;
1629declare function WithErrorBoundaryProps({ children, }: {
1630 children: React.ReactElement;
1631}): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
1632declare function withErrorBoundaryProps(ErrorBoundary: ErrorBoundaryType): () => React.ReactElement<{
1633 params: Readonly<Params<string>>;
1634 loaderData: any;
1635 actionData: any;
1636 error: unknown;
1637}, string | React.JSXElementConstructor<any>>;
1638
1639interface DataRouterContextObject extends Omit<NavigationContextObject, "future" | "unstable_useTransitions"> {
1640 router: Router$1;
1641 staticContext?: StaticHandlerContext;
1642 onError?: ClientOnErrorFunction;
1643}
1644declare const DataRouterContext: React.Context<DataRouterContextObject | null>;
1645declare const DataRouterStateContext: React.Context<RouterState | null>;
1646type ViewTransitionContextObject = {
1647 isTransitioning: false;
1648} | {
1649 isTransitioning: true;
1650 flushSync: boolean;
1651 currentLocation: Location;
1652 nextLocation: Location;
1653};
1654declare const ViewTransitionContext: React.Context<ViewTransitionContextObject>;
1655type FetchersContextObject = Map<string, any>;
1656declare const FetchersContext: React.Context<FetchersContextObject>;
1657declare const AwaitContext: React.Context<TrackedPromise | null>;
1658declare const AwaitContextProvider: (props: React.ComponentProps<typeof AwaitContext.Provider>) => React.FunctionComponentElement<React.ProviderProps<TrackedPromise | null>>;
1659interface NavigateOptions {
1660 /** Replace the current entry in the history stack instead of pushing a new one */
1661 replace?: boolean;
1662 /** Masked URL */
1663 unstable_mask?: To;
1664 /** Adds persistent client side routing state to the next location */
1665 state?: any;
1666 /** If you are using {@link ScrollRestoration `<ScrollRestoration>`}, prevent the scroll position from being reset to the top of the window when navigating */
1667 preventScrollReset?: boolean;
1668 /** Defines the relative path behavior for the link. "route" will use the route hierarchy so ".." will remove all URL segments of the current route pattern while "path" will use the URL path so ".." will remove one URL segment. */
1669 relative?: RelativeRoutingType;
1670 /** Wraps the initial state update for this navigation in a {@link https://react.dev/reference/react-dom/flushSync ReactDOM.flushSync} call instead of the default {@link https://react.dev/reference/react/startTransition React.startTransition} */
1671 flushSync?: boolean;
1672 /** Enables a {@link https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API View Transition} for this navigation by wrapping the final state update in `document.startViewTransition()`. If you need to apply specific styles for this view transition, you will also need to leverage the {@link useViewTransitionState `useViewTransitionState()`} hook. */
1673 viewTransition?: boolean;
1674 /** Specifies the default revalidation behavior after this submission */
1675 unstable_defaultShouldRevalidate?: boolean;
1676}
1677/**
1678 * A Navigator is a "location changer"; it's how you get to different locations.
1679 *
1680 * Every history instance conforms to the Navigator interface, but the
1681 * distinction is useful primarily when it comes to the low-level `<Router>` API
1682 * where both the location and a navigator must be provided separately in order
1683 * to avoid "tearing" that may occur in a suspense-enabled app if the action
1684 * and/or location were to be read directly from the history instance.
1685 */
1686interface Navigator {
1687 createHref: History["createHref"];
1688 encodeLocation?: History["encodeLocation"];
1689 go: History["go"];
1690 push(to: To, state?: any, opts?: NavigateOptions): void;
1691 replace(to: To, state?: any, opts?: NavigateOptions): void;
1692}
1693interface NavigationContextObject {
1694 basename: string;
1695 navigator: Navigator;
1696 static: boolean;
1697 unstable_useTransitions: boolean | undefined;
1698 future: {};
1699}
1700declare const NavigationContext: React.Context<NavigationContextObject>;
1701interface LocationContextObject {
1702 location: Location;
1703 navigationType: Action;
1704}
1705declare const LocationContext: React.Context<LocationContextObject>;
1706interface RouteContextObject {
1707 outlet: React.ReactElement | null;
1708 matches: RouteMatch[];
1709 isDataRoute: boolean;
1710}
1711declare const RouteContext: React.Context<RouteContextObject>;
1712
1713export { createRoutesFromElements as $, AwaitContextProvider as A, type BlockerFunction as B, type ClientOnErrorFunction as C, type RouteProps as D, type RouterProps as E, type Fetcher as F, type GetScrollPositionFunction as G, type HydrationState as H, IDLE_NAVIGATION as I, type RoutesProps as J, Await as K, type LayoutRouteProps as L, type MemoryRouterOpts as M, type NavigateOptions as N, type OutletProps as O, type PathRouteProps as P, MemoryRouter as Q, type RouterInit as R, type StaticHandler as S, Navigate as T, Outlet as U, Route as V, Router as W, RouterProvider as X, Routes as Y, createMemoryRouter as Z, createRoutesFromChildren as _, type RouterProviderProps as a, renderMatches as a0, createRouter as a1, DataRouterContext as a2, DataRouterStateContext as a3, FetchersContext as a4, LocationContext as a5, NavigationContext as a6, RouteContext as a7, ViewTransitionContext as a8, hydrationRouteProperties as a9, mapRouteProperties as aa, WithComponentProps as ab, withComponentProps as ac, WithHydrateFallbackProps as ad, withHydrateFallbackProps as ae, WithErrorBoundaryProps as af, withErrorBoundaryProps as ag, type FutureConfig as ah, type CreateStaticHandlerOptions as ai, type Router$1 as b, type Blocker as c, type RelativeRoutingType as d, type Navigation as e, type RouterState as f, type GetScrollRestorationKeyFunction as g, type StaticHandlerContext as h, type NavigationStates as i, type RouterSubscriber as j, type RouterNavigateOptions as k, type RouterFetchOptions as l, type RevalidationState as m, type unstable_ServerInstrumentation as n, type unstable_InstrumentRequestHandlerFunction as o, type unstable_InstrumentRouterFunction as p, type unstable_InstrumentRouteFunction as q, type unstable_InstrumentationHandlerResult as r, IDLE_FETCHER as s, IDLE_BLOCKER as t, type unstable_ClientInstrumentation as u, type Navigator as v, type AwaitProps as w, type IndexRouteProps as x, type MemoryRouterProps as y, type NavigateProps as z };