UNPKG

53.7 kBTypeScriptView Raw
1import * as React from 'react';
2import { k as RouteObject, R as RouterInit, F as FutureConfig$1, H as HydrationState, I as InitialEntry, D as DataStrategyFunction, ar as PatchRoutesOnNavigationFunction, b as Router$1, T as To, d as RelativeRoutingType, x as NonIndexRouteObject, a2 as LazyRouteFunction, s as IndexRouteObject, e as Location, f as Action, aq as Navigator, at as RouteMatch, p as StaticHandlerContext, c as RouteManifest, a as RouteModules, ap as DataRouteObject, aR as RouteModule, a1 as HTMLFormMethod, $ as FormEncType, aC as PageLinkDescriptor, aS as History, z as GetScrollRestorationKeyFunction, N as NavigateOptions, J as Fetcher, n as SerializeFrom, B as BlockerFunction } from './route-data-CGHGzi13.js';
3
4/**
5 * @private
6 */
7declare function mapRouteProperties(route: RouteObject): Partial<RouteObject> & {
8 hasErrorBoundary: boolean;
9};
10interface MemoryRouterOpts {
11 /**
12 * Basename path for the application.
13 */
14 basename?: string;
15 /**
16 * Function to provide the initial context values for all client side navigations/fetches
17 */
18 unstable_getContext?: RouterInit["unstable_getContext"];
19 /**
20 * Future flags to enable for the router.
21 */
22 future?: Partial<FutureConfig$1>;
23 /**
24 * Hydration data to initialize the router with if you have already performed
25 * data loading on the server.
26 */
27 hydrationData?: HydrationState;
28 /**
29 * Initial entires in the in-memory history stack
30 */
31 initialEntries?: InitialEntry[];
32 /**
33 * Index of `initialEntries` the application should initialize to
34 */
35 initialIndex?: number;
36 /**
37 * Override the default data strategy of loading in parallel.
38 * Only intended for advanced usage.
39 */
40 dataStrategy?: DataStrategyFunction;
41 /**
42 * Lazily define portions of the route tree on navigations.
43 */
44 patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
45}
46/**
47 * Create a new data router that manages the application path using an in-memory
48 * history stack. Useful for non-browser environments without a DOM API.
49 *
50 * @category Data Routers
51 */
52declare function createMemoryRouter(
53/**
54 * Application routes
55 */
56routes: RouteObject[],
57/**
58 * Router options
59 */
60opts?: MemoryRouterOpts): Router$1;
61interface RouterProviderProps {
62 router: Router$1;
63 flushSync?: (fn: () => unknown) => undefined;
64}
65/**
66 * Given a Remix Router instance, render the appropriate UI
67 */
68declare function RouterProvider({ router, flushSync: reactDomFlushSyncImpl, }: RouterProviderProps): React.ReactElement;
69/**
70 * @category Types
71 */
72interface MemoryRouterProps {
73 basename?: string;
74 children?: React.ReactNode;
75 initialEntries?: InitialEntry[];
76 initialIndex?: number;
77}
78/**
79 * A `<Router>` that stores all entries in memory.
80 *
81 * @category Component Routers
82 */
83declare function MemoryRouter({ basename, children, initialEntries, initialIndex, }: MemoryRouterProps): React.ReactElement;
84/**
85 * @category Types
86 */
87interface NavigateProps {
88 to: To;
89 replace?: boolean;
90 state?: any;
91 relative?: RelativeRoutingType;
92}
93/**
94 * A component-based version of {@link useNavigate} to use in a [`React.Component
95 * Class`](https://reactjs.org/docs/react-component.html) where hooks are not
96 * able to be used.
97 *
98 * It's recommended to avoid using this component in favor of {@link useNavigate}
99 *
100 * @category Components
101 */
102declare function Navigate({ to, replace, state, relative, }: NavigateProps): null;
103/**
104 * @category Types
105 */
106interface OutletProps {
107 /**
108 Provides a context value to the element tree below the outlet. Use when the parent route needs to provide values to child routes.
109
110 ```tsx
111 <Outlet context={myContextValue} />
112 ```
113
114 Access the context with {@link useOutletContext}.
115 */
116 context?: unknown;
117}
118/**
119 Renders the matching child route of a parent route or nothing if no child route matches.
120
121 ```tsx
122 import { Outlet } from "react-router"
123
124 export default function SomeParent() {
125 return (
126 <div>
127 <h1>Parent Content</h1>
128 <Outlet />
129 </div>
130 );
131 }
132 ```
133
134 @category Components
135 */
136declare function Outlet(props: OutletProps): React.ReactElement | null;
137/**
138 * @category Types
139 */
140interface PathRouteProps {
141 caseSensitive?: NonIndexRouteObject["caseSensitive"];
142 path?: NonIndexRouteObject["path"];
143 id?: NonIndexRouteObject["id"];
144 lazy?: LazyRouteFunction<NonIndexRouteObject>;
145 loader?: NonIndexRouteObject["loader"];
146 action?: NonIndexRouteObject["action"];
147 hasErrorBoundary?: NonIndexRouteObject["hasErrorBoundary"];
148 shouldRevalidate?: NonIndexRouteObject["shouldRevalidate"];
149 handle?: NonIndexRouteObject["handle"];
150 index?: false;
151 children?: React.ReactNode;
152 element?: React.ReactNode | null;
153 hydrateFallbackElement?: React.ReactNode | null;
154 errorElement?: React.ReactNode | null;
155 Component?: React.ComponentType | null;
156 HydrateFallback?: React.ComponentType | null;
157 ErrorBoundary?: React.ComponentType | null;
158}
159/**
160 * @category Types
161 */
162interface LayoutRouteProps extends PathRouteProps {
163}
164/**
165 * @category Types
166 */
167interface IndexRouteProps {
168 caseSensitive?: IndexRouteObject["caseSensitive"];
169 path?: IndexRouteObject["path"];
170 id?: IndexRouteObject["id"];
171 lazy?: LazyRouteFunction<IndexRouteObject>;
172 loader?: IndexRouteObject["loader"];
173 action?: IndexRouteObject["action"];
174 hasErrorBoundary?: IndexRouteObject["hasErrorBoundary"];
175 shouldRevalidate?: IndexRouteObject["shouldRevalidate"];
176 handle?: IndexRouteObject["handle"];
177 index: true;
178 children?: undefined;
179 element?: React.ReactNode | null;
180 hydrateFallbackElement?: React.ReactNode | null;
181 errorElement?: React.ReactNode | null;
182 Component?: React.ComponentType | null;
183 HydrateFallback?: React.ComponentType | null;
184 ErrorBoundary?: React.ComponentType | null;
185}
186type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;
187/**
188 * Configures an element to render when a pattern matches the current location.
189 * It must be rendered within a {@link Routes} element. Note that these routes
190 * do not participate in data loading, actions, code splitting, or any other
191 * route module features.
192 *
193 * @category Components
194 */
195declare function Route$1(_props: RouteProps): React.ReactElement | null;
196/**
197 * @category Types
198 */
199interface RouterProps {
200 basename?: string;
201 children?: React.ReactNode;
202 location: Partial<Location> | string;
203 navigationType?: Action;
204 navigator: Navigator;
205 static?: boolean;
206}
207/**
208 * Provides location context for the rest of the app.
209 *
210 * Note: You usually won't render a `<Router>` directly. Instead, you'll render a
211 * router that is more specific to your environment such as a `<BrowserRouter>`
212 * in web browsers or a `<StaticRouter>` for server rendering.
213 *
214 * @category Components
215 */
216declare function Router({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp, }: RouterProps): React.ReactElement | null;
217/**
218 * @category Types
219 */
220interface RoutesProps {
221 /**
222 * Nested {@link Route} elements
223 */
224 children?: React.ReactNode;
225 /**
226 * The location to match against. Defaults to the current location.
227 */
228 location?: Partial<Location> | string;
229}
230/**
231 Renders a branch of {@link Route | `<Routes>`} that best matches the current
232 location. Note that these routes do not participate in data loading, actions,
233 code splitting, or any other route module features.
234
235 ```tsx
236 import { Routes, Route } from "react-router"
237
238<Routes>
239 <Route index element={<StepOne />} />
240 <Route path="step-2" element={<StepTwo />} />
241 <Route path="step-3" element={<StepThree />}>
242</Routes>
243 ```
244
245 @category Components
246 */
247declare function Routes({ children, location, }: RoutesProps): React.ReactElement | null;
248interface AwaitResolveRenderFunction<Resolve = any> {
249 (data: Awaited<Resolve>): React.ReactNode;
250}
251/**
252 * @category Types
253 */
254interface AwaitProps<Resolve> {
255 /**
256 When using a function, the resolved value is provided as the parameter.
257
258 ```tsx [2]
259 <Await resolve={reviewsPromise}>
260 {(resolvedReviews) => <Reviews items={resolvedReviews} />}
261 </Await>
262 ```
263
264 When using React elements, {@link useAsyncValue} will provide the
265 resolved value:
266
267 ```tsx [2]
268 <Await resolve={reviewsPromise}>
269 <Reviews />
270 </Await>
271
272 function Reviews() {
273 const resolvedReviews = useAsyncValue()
274 return <div>...</div>
275 }
276 ```
277 */
278 children: React.ReactNode | AwaitResolveRenderFunction<Resolve>;
279 /**
280 The error element renders instead of the children when the promise rejects.
281
282 ```tsx
283 <Await
284 errorElement={<div>Oops</div>}
285 resolve={reviewsPromise}
286 >
287 <Reviews />
288 </Await>
289 ```
290
291 To provide a more contextual error, you can use the {@link useAsyncError} in a
292 child component
293
294 ```tsx
295 <Await
296 errorElement={<ReviewsError />}
297 resolve={reviewsPromise}
298 >
299 <Reviews />
300 </Await>
301
302 function ReviewsError() {
303 const error = useAsyncError()
304 return <div>Error loading reviews: {error.message}</div>
305 }
306 ```
307
308 If you do not provide an errorElement, the rejected value will bubble up to
309 the nearest route-level {@link NonIndexRouteObject#ErrorBoundary | ErrorBoundary} and be accessible
310 via {@link useRouteError} hook.
311 */
312 errorElement?: React.ReactNode;
313 /**
314 Takes a promise returned from a {@link LoaderFunction | loader} value to be resolved and rendered.
315
316 ```jsx
317 import { useLoaderData, Await } from "react-router"
318
319 export async function loader() {
320 let reviews = getReviews() // not awaited
321 let book = await getBook()
322 return {
323 book,
324 reviews, // this is a promise
325 }
326 }
327
328 export default function Book() {
329 const {
330 book,
331 reviews, // this is the same promise
332 } = useLoaderData()
333
334 return (
335 <div>
336 <h1>{book.title}</h1>
337 <p>{book.description}</p>
338 <React.Suspense fallback={<ReviewsSkeleton />}>
339 <Await
340 // and is the promise we pass to Await
341 resolve={reviews}
342 >
343 <Reviews />
344 </Await>
345 </React.Suspense>
346 </div>
347 );
348 }
349 ```
350 */
351 resolve: Resolve;
352}
353/**
354Used to render promise values with automatic error handling.
355
356```tsx
357import { Await, useLoaderData } from "react-router";
358
359export function loader() {
360 // not awaited
361 const reviews = getReviews()
362 // awaited (blocks the transition)
363 const book = await fetch("/api/book").then((res) => res.json())
364 return { book, reviews }
365}
366
367function Book() {
368 const { book, reviews } = useLoaderData();
369 return (
370 <div>
371 <h1>{book.title}</h1>
372 <p>{book.description}</p>
373 <React.Suspense fallback={<ReviewsSkeleton />}>
374 <Await
375 resolve={reviews}
376 errorElement={
377 <div>Could not load reviews 😬</div>
378 }
379 children={(resolvedReviews) => (
380 <Reviews items={resolvedReviews} />
381 )}
382 />
383 </React.Suspense>
384 </div>
385 );
386}
387```
388
389**Note:** `<Await>` expects to be rendered inside of a `<React.Suspense>`
390
391@category Components
392
393*/
394declare function Await<Resolve>({ children, errorElement, resolve, }: AwaitProps<Resolve>): React.JSX.Element;
395/**
396 * Creates a route config from a React "children" object, which is usually
397 * either a `<Route>` element or an array of them. Used internally by
398 * `<Routes>` to create a route config from its children.
399 *
400 * @category Utils
401 */
402declare function createRoutesFromChildren(children: React.ReactNode, parentPath?: number[]): RouteObject[];
403/**
404 * Create route objects from JSX elements instead of arrays of objects
405 */
406declare let createRoutesFromElements: typeof createRoutesFromChildren;
407/**
408 * Renders the result of `matchRoutes()` into a React element.
409 *
410 * @category Utils
411 */
412declare function renderMatches(matches: RouteMatch[] | null): React.ReactElement | null;
413
414type SerializedError = {
415 message: string;
416 stack?: string;
417};
418interface FrameworkContextObject {
419 manifest: AssetsManifest;
420 routeModules: RouteModules;
421 criticalCss?: CriticalCss;
422 serverHandoffString?: string;
423 future: FutureConfig;
424 ssr: boolean;
425 isSpaMode: boolean;
426 serializeError?(error: Error): SerializedError;
427 renderMeta?: {
428 didRenderScripts?: boolean;
429 streamCache?: Record<number, Promise<void> & {
430 result?: {
431 done: boolean;
432 value: string;
433 };
434 error?: unknown;
435 }>;
436 };
437}
438interface EntryContext extends FrameworkContextObject {
439 staticHandlerContext: StaticHandlerContext;
440 serverHandoffStream?: ReadableStream<Uint8Array>;
441}
442interface FutureConfig {
443 unstable_middleware: boolean;
444}
445type CriticalCss = string | {
446 rel: "stylesheet";
447 href: string;
448};
449interface AssetsManifest {
450 entry: {
451 imports: string[];
452 module: string;
453 };
454 routes: RouteManifest<EntryRoute>;
455 url: string;
456 version: string;
457 hmr?: {
458 timestamp?: number;
459 runtime: string;
460 };
461}
462
463interface Route {
464 index?: boolean;
465 caseSensitive?: boolean;
466 id: string;
467 parentId?: string;
468 path?: string;
469}
470interface EntryRoute extends Route {
471 hasAction: boolean;
472 hasLoader: boolean;
473 hasClientAction: boolean;
474 hasClientLoader: boolean;
475 hasErrorBoundary: boolean;
476 imports?: string[];
477 css?: string[];
478 module: string;
479 clientActionModule: string | undefined;
480 clientLoaderModule: string | undefined;
481 hydrateFallbackModule: string | undefined;
482 parentId?: string;
483}
484declare function createClientRoutesWithHMRRevalidationOptOut(needsRevalidation: Set<string>, manifest: RouteManifest<EntryRoute>, routeModulesCache: RouteModules, initialState: HydrationState, ssr: boolean, isSpaMode: boolean): DataRouteObject[];
485declare function createClientRoutes(manifest: RouteManifest<EntryRoute>, routeModulesCache: RouteModules, initialState: HydrationState | null, ssr: boolean, isSpaMode: boolean, parentId?: string, routesByParentId?: Record<string, Omit<EntryRoute, "children">[]>, needsRevalidation?: Set<string>): DataRouteObject[];
486declare function shouldHydrateRouteLoader(route: EntryRoute, routeModule: RouteModule, isSpaMode: boolean): boolean;
487
488type ParamKeyValuePair = [string, string];
489type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams;
490/**
491 Creates a URLSearchParams object using the given initializer.
492
493 This is identical to `new URLSearchParams(init)` except it also
494 supports arrays as values in the object form of the initializer
495 instead of just strings. This is convenient when you need multiple
496 values for a given key, but don't want to use an array initializer.
497
498 For example, instead of:
499
500 ```tsx
501 let searchParams = new URLSearchParams([
502 ['sort', 'name'],
503 ['sort', 'price']
504 ]);
505 ```
506 you can do:
507
508 ```
509 let searchParams = createSearchParams({
510 sort: ['name', 'price']
511 });
512 ```
513
514 @category Utils
515 */
516declare function createSearchParams(init?: URLSearchParamsInit): URLSearchParams;
517type JsonObject = {
518 [Key in string]: JsonValue;
519} & {
520 [Key in string]?: JsonValue | undefined;
521};
522type JsonArray = JsonValue[] | readonly JsonValue[];
523type JsonPrimitive = string | number | boolean | null;
524type JsonValue = JsonPrimitive | JsonObject | JsonArray;
525type SubmitTarget = HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | JsonValue | null;
526/**
527 * Submit options shared by both navigations and fetchers
528 */
529interface SharedSubmitOptions {
530 /**
531 * The HTTP method used to submit the form. Overrides `<form method>`.
532 * Defaults to "GET".
533 */
534 method?: HTMLFormMethod;
535 /**
536 * The action URL path used to submit the form. Overrides `<form action>`.
537 * Defaults to the path of the current route.
538 */
539 action?: string;
540 /**
541 * The encoding used to submit the form. Overrides `<form encType>`.
542 * Defaults to "application/x-www-form-urlencoded".
543 */
544 encType?: FormEncType;
545 /**
546 * Determines whether the form action is relative to the route hierarchy or
547 * the pathname. Use this if you want to opt out of navigating the route
548 * hierarchy and want to instead route based on /-delimited URL segments
549 */
550 relative?: RelativeRoutingType;
551 /**
552 * In browser-based environments, prevent resetting scroll after this
553 * navigation when using the <ScrollRestoration> component
554 */
555 preventScrollReset?: boolean;
556 /**
557 * Enable flushSync for this submission's state updates
558 */
559 flushSync?: boolean;
560}
561/**
562 * Submit options available to fetchers
563 */
564interface FetcherSubmitOptions extends SharedSubmitOptions {
565}
566/**
567 * Submit options available to navigations
568 */
569interface SubmitOptions extends FetcherSubmitOptions {
570 /**
571 * Set `true` to replace the current entry in the browser's history stack
572 * instead of creating a new one (i.e. stay on "the same page"). Defaults
573 * to `false`.
574 */
575 replace?: boolean;
576 /**
577 * State object to add to the history stack entry for this navigation
578 */
579 state?: any;
580 /**
581 * Indicate a specific fetcherKey to use when using navigate=false
582 */
583 fetcherKey?: string;
584 /**
585 * navigate=false will use a fetcher instead of a navigation
586 */
587 navigate?: boolean;
588 /**
589 * Enable view transitions on this submission navigation
590 */
591 viewTransition?: boolean;
592}
593
594declare const FrameworkContext: React.Context<FrameworkContextObject | undefined>;
595/**
596 * Defines the discovery behavior of the link:
597 *
598 * - "render" - default, discover the route when the link renders
599 * - "none" - don't eagerly discover, only discover if the link is clicked
600 */
601type DiscoverBehavior = "render" | "none";
602/**
603 * Defines the prefetching behavior of the link:
604 *
605 * - "none": Never fetched
606 * - "intent": Fetched when the user focuses or hovers the link
607 * - "render": Fetched when the link is rendered
608 * - "viewport": Fetched when the link is in the viewport
609 */
610type PrefetchBehavior = "intent" | "render" | "none" | "viewport";
611/**
612 Renders all of the `<link>` tags created by route module {@link LinksFunction} export. You should render it inside the `<head>` of your document.
613
614 ```tsx
615 import { Links } from "react-router";
616
617 export default function Root() {
618 return (
619 <html>
620 <head>
621 <Links />
622 </head>
623 <body></body>
624 </html>
625 );
626 }
627 ```
628
629 @category Components
630 */
631declare function Links(): React.JSX.Element;
632/**
633 Renders `<link rel=prefetch|modulepreload>` tags for modules and data of another page to enable an instant navigation to that page. {@link LinkProps.prefetch | `<Link prefetch>`} uses this internally, but you can render it to prefetch a page for any other reason.
634
635 ```tsx
636 import { PrefetchPageLinks } from "react-router"
637
638 <PrefetchPageLinks page="/absolute/path" />
639 ```
640
641 For example, you may render one of this as the user types into a search field to prefetch search results before they click through to their selection.
642
643 @category Components
644 */
645declare function PrefetchPageLinks({ page, ...dataLinkProps }: PageLinkDescriptor): React.JSX.Element | null;
646/**
647 Renders all the `<meta>` tags created by route module {@link MetaFunction} exports. You should render it inside the `<head>` of your HTML.
648
649 ```tsx
650 import { Meta } from "react-router";
651
652 export default function Root() {
653 return (
654 <html>
655 <head>
656 <Meta />
657 </head>
658 </html>
659 );
660 }
661 ```
662
663 @category Components
664 */
665declare function Meta(): React.JSX.Element;
666/**
667 A couple common attributes:
668
669 - `<Scripts crossOrigin>` for hosting your static assets on a different server than your app.
670 - `<Scripts nonce>` to support a [content security policy for scripts](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) with [nonce-sources](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources) for your `<script>` tags.
671
672 You cannot pass through attributes such as `async`, `defer`, `src`, `type`, `noModule` because they are managed by React Router internally.
673
674 @category Types
675 */
676type ScriptsProps = Omit<React.HTMLProps<HTMLScriptElement>, "children" | "async" | "defer" | "src" | "type" | "noModule" | "dangerouslySetInnerHTML" | "suppressHydrationWarning">;
677/**
678 Renders the client runtime of your app. It should be rendered inside the `<body>` of the document.
679
680 ```tsx
681 import { Scripts } from "react-router";
682
683 export default function Root() {
684 return (
685 <html>
686 <head />
687 <body>
688 <Scripts />
689 </body>
690 </html>
691 );
692 }
693 ```
694
695 If server rendering, you can omit `<Scripts/>` and the app will work as a traditional web app without JavaScript, relying solely on HTML and browser behaviors.
696
697 @category Components
698 */
699declare function Scripts(props: ScriptsProps): React.JSX.Element | null;
700
701declare global {
702 const REACT_ROUTER_VERSION: string;
703}
704/**
705 * @category Routers
706 */
707interface DOMRouterOpts {
708 /**
709 * Basename path for the application.
710 */
711 basename?: string;
712 /**
713 * Function to provide the initial context values for all client side navigations/fetches
714 */
715 unstable_getContext?: RouterInit["unstable_getContext"];
716 /**
717 * Future flags to enable for the router.
718 */
719 future?: Partial<FutureConfig$1>;
720 /**
721 * Hydration data to initialize the router with if you have already performed
722 * data loading on the server.
723 */
724 hydrationData?: HydrationState;
725 /**
726 * Override the default data strategy of loading in parallel.
727 * Only intended for advanced usage.
728 */
729 dataStrategy?: DataStrategyFunction;
730 /**
731 * Lazily define portions of the route tree on navigations.
732 */
733 patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
734 /**
735 * Window object override - defaults to the global `window` instance.
736 */
737 window?: Window;
738}
739/**
740 * Create a new data router that manages the application path via `history.pushState`
741 * and `history.replaceState`.
742 *
743 * @category Data Routers
744 */
745declare function createBrowserRouter(
746/**
747 * Application routes
748 */
749routes: RouteObject[],
750/**
751 * Router options
752 */
753opts?: DOMRouterOpts): Router$1;
754/**
755 * Create a new data router that manages the application path via the URL hash
756 *
757 * @category Data Routers
758 */
759declare function createHashRouter(routes: RouteObject[], opts?: DOMRouterOpts): Router$1;
760/**
761 * @category Types
762 */
763interface BrowserRouterProps {
764 basename?: string;
765 children?: React.ReactNode;
766 window?: Window;
767}
768/**
769 * A `<Router>` for use in web browsers. Provides the cleanest URLs.
770 *
771 * @category Component Routers
772 */
773declare function BrowserRouter({ basename, children, window, }: BrowserRouterProps): React.JSX.Element;
774/**
775 * @category Types
776 */
777interface HashRouterProps {
778 basename?: string;
779 children?: React.ReactNode;
780 window?: Window;
781}
782/**
783 * A `<Router>` for use in web browsers. Stores the location in the hash
784 * portion of the URL so it is not sent to the server.
785 *
786 * @category Component Routers
787 */
788declare function HashRouter({ basename, children, window }: HashRouterProps): React.JSX.Element;
789/**
790 * @category Types
791 */
792interface HistoryRouterProps {
793 basename?: string;
794 children?: React.ReactNode;
795 history: History;
796}
797/**
798 * A `<Router>` that accepts a pre-instantiated history object. It's important
799 * to note that using your own history object is highly discouraged and may add
800 * two versions of the history library to your bundles unless you use the same
801 * version of the history library that React Router uses internally.
802 *
803 * @name unstable_HistoryRouter
804 * @category Component Routers
805 */
806declare function HistoryRouter({ basename, children, history, }: HistoryRouterProps): React.JSX.Element;
807declare namespace HistoryRouter {
808 var displayName: string;
809}
810/**
811 * @category Types
812 */
813interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
814 /**
815 Defines the link discovery behavior
816
817 ```tsx
818 <Link /> // default ("render")
819 <Link discover="render" />
820 <Link discover="none" />
821 ```
822
823 - **render** - default, discover the route when the link renders
824 - **none** - don't eagerly discover, only discover if the link is clicked
825 */
826 discover?: DiscoverBehavior;
827 /**
828 Defines the data and module prefetching behavior for the link.
829
830 ```tsx
831 <Link /> // default
832 <Link prefetch="none" />
833 <Link prefetch="intent" />
834 <Link prefetch="render" />
835 <Link prefetch="viewport" />
836 ```
837
838 - **none** - default, no prefetching
839 - **intent** - prefetches when the user hovers or focuses the link
840 - **render** - prefetches when the link renders
841 - **viewport** - prefetches when the link is in the viewport, very useful for mobile
842
843 Prefetching is done with HTML `<link rel="prefetch">` tags. They are inserted after the link.
844
845 ```tsx
846 <a href="..." />
847 <a href="..." />
848 <link rel="prefetch" /> // might conditionally render
849 ```
850
851 Because of this, if you are using `nav :last-child` you will need to use `nav :last-of-type` so the styles don't conditionally fall off your last link (and any other similar selectors).
852 */
853 prefetch?: PrefetchBehavior;
854 /**
855 Will use document navigation instead of client side routing when the link is clicked: the browser will handle the transition normally (as if it were an `<a href>`).
856
857 ```tsx
858 <Link to="/logout" reloadDocument />
859 ```
860 */
861 reloadDocument?: boolean;
862 /**
863 Replaces the current entry in the history stack instead of pushing a new one onto it.
864
865 ```tsx
866 <Link replace />
867 ```
868
869 ```
870 # with a history stack like this
871 A -> B
872
873 # normal link click pushes a new entry
874 A -> B -> C
875
876 # but with `replace`, B is replaced by C
877 A -> C
878 ```
879 */
880 replace?: boolean;
881 /**
882 Adds persistent client side routing state to the next location.
883
884 ```tsx
885 <Link to="/somewhere/else" state={{ some: "value" }} />
886 ```
887
888 The location state is accessed from the `location`.
889
890 ```tsx
891 function SomeComp() {
892 const location = useLocation()
893 location.state; // { some: "value" }
894 }
895 ```
896
897 This state is inaccessible on the server as it is implemented on top of [`history.state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state)
898 */
899 state?: any;
900 /**
901 Prevents the scroll position from being reset to the top of the window when the link is clicked and the app is using {@link ScrollRestoration}. This only prevents new locations reseting scroll to the top, scroll position will be restored for back/forward button navigation.
902
903 ```tsx
904 <Link to="?tab=one" preventScrollReset />
905 ```
906 */
907 preventScrollReset?: boolean;
908 /**
909 Defines the relative path behavior for the link.
910
911 ```tsx
912 <Link to=".." /> // default: "route"
913 <Link relative="route" />
914 <Link relative="path" />
915 ```
916
917 Consider a route hierarchy where a parent route pattern is "blog" and a child route pattern is "blog/:slug/edit".
918
919 - **route** - default, resolves the link relative to the route pattern. In the example above a relative link of `".."` will remove both `:slug/edit` segments back to "/blog".
920 - **path** - relative to the path so `..` will only remove one URL segment up to "/blog/:slug"
921 */
922 relative?: RelativeRoutingType;
923 /**
924 Can be a string or a partial {@link Path}:
925
926 ```tsx
927 <Link to="/some/path" />
928
929 <Link
930 to={{
931 pathname: "/some/path",
932 search: "?query=string",
933 hash: "#hash",
934 }}
935 />
936 ```
937 */
938 to: To;
939 /**
940 Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) for this navigation.
941
942 ```jsx
943 <Link to={to} viewTransition>
944 Click me
945 </Link>
946 ```
947
948 To apply specific styles for the transition, see {@link useViewTransitionState}
949 */
950 viewTransition?: boolean;
951}
952/**
953 A progressively enhanced `<a href>` wrapper to enable navigation with client-side routing.
954
955 ```tsx
956 import { Link } from "react-router";
957
958 <Link to="/dashboard">Dashboard</Link>;
959
960 <Link
961 to={{
962 pathname: "/some/path",
963 search: "?query=string",
964 hash: "#hash",
965 }}
966 />
967 ```
968
969 @category Components
970 */
971declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
972/**
973 The object passed to {@link NavLink} `children`, `className`, and `style` prop callbacks to render and style the link based on its state.
974
975 ```
976 // className
977 <NavLink
978 to="/messages"
979 className={({ isActive, isPending }) =>
980 isPending ? "pending" : isActive ? "active" : ""
981 }
982 >
983 Messages
984 </NavLink>
985
986 // style
987 <NavLink
988 to="/messages"
989 style={({ isActive, isPending }) => {
990 return {
991 fontWeight: isActive ? "bold" : "",
992 color: isPending ? "red" : "black",
993 }
994 )}
995 />
996
997 // children
998 <NavLink to="/tasks">
999 {({ isActive, isPending }) => (
1000 <span className={isActive ? "active" : ""}>Tasks</span>
1001 )}
1002 </NavLink>
1003 ```
1004
1005 */
1006type NavLinkRenderProps = {
1007 /**
1008 * Indicates if the link's URL matches the current location.
1009 */
1010 isActive: boolean;
1011 /**
1012 * Indicates if the pending location matches the link's URL.
1013 */
1014 isPending: boolean;
1015 /**
1016 * Indicates if a view transition to the link's URL is in progress. See {@link useViewTransitionState}
1017 */
1018 isTransitioning: boolean;
1019};
1020/**
1021 * @category Types
1022 */
1023interface NavLinkProps extends Omit<LinkProps, "className" | "style" | "children"> {
1024 /**
1025 Can be regular React children or a function that receives an object with the active and pending states of the link.
1026
1027 ```tsx
1028 <NavLink to="/tasks">
1029 {({ isActive }) => (
1030 <span className={isActive ? "active" : ""}>Tasks</span>
1031 )}
1032 </NavLink>
1033 ```
1034 */
1035 children?: React.ReactNode | ((props: NavLinkRenderProps) => React.ReactNode);
1036 /**
1037 Changes the matching logic to make it case-sensitive:
1038
1039 | Link | URL | isActive |
1040 | -------------------------------------------- | ------------- | -------- |
1041 | `<NavLink to="/SpOnGe-bOB" />` | `/sponge-bob` | true |
1042 | `<NavLink to="/SpOnGe-bOB" caseSensitive />` | `/sponge-bob` | false |
1043 */
1044 caseSensitive?: boolean;
1045 /**
1046 Classes are automatically applied to NavLink that correspond to {@link NavLinkRenderProps}.
1047
1048 ```css
1049 a.active { color: red; }
1050 a.pending { color: blue; }
1051 a.transitioning {
1052 view-transition-name: my-transition;
1053 }
1054 ```
1055 */
1056 className?: string | ((props: NavLinkRenderProps) => string | undefined);
1057 /**
1058 Changes the matching logic for the `active` and `pending` states to only match to the "end" of the {@link NavLinkProps.to}. If the URL is longer, it will no longer be considered active.
1059
1060 | Link | URL | isActive |
1061 | ----------------------------- | ------------ | -------- |
1062 | `<NavLink to="/tasks" />` | `/tasks` | true |
1063 | `<NavLink to="/tasks" />` | `/tasks/123` | true |
1064 | `<NavLink to="/tasks" end />` | `/tasks` | true |
1065 | `<NavLink to="/tasks" end />` | `/tasks/123` | false |
1066
1067 `<NavLink to="/">` is an exceptional case because _every_ URL matches `/`. To avoid this matching every single route by default, it effectively ignores the `end` prop and only matches when you're at the root route.
1068 */
1069 end?: boolean;
1070 style?: React.CSSProperties | ((props: NavLinkRenderProps) => React.CSSProperties | undefined);
1071}
1072/**
1073 Wraps {@link Link | `<Link>`} with additional props for styling active and pending states.
1074
1075 - Automatically applies classes to the link based on its active and pending states, see {@link NavLinkProps.className}.
1076 - Automatically applies `aria-current="page"` to the link when the link is active. See [`aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) on MDN.
1077
1078 ```tsx
1079 import { NavLink } from "react-router"
1080 <NavLink to="/message" />
1081 ```
1082
1083 States are available through the className, style, and children render props. See {@link NavLinkRenderProps}.
1084
1085 ```tsx
1086 <NavLink
1087 to="/messages"
1088 className={({ isActive, isPending }) =>
1089 isPending ? "pending" : isActive ? "active" : ""
1090 }
1091 >
1092 Messages
1093 </NavLink>
1094 ```
1095
1096 @category Components
1097 */
1098declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
1099/**
1100 * Form props shared by navigations and fetchers
1101 */
1102interface SharedFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
1103 /**
1104 * The HTTP verb to use when the form is submitted. Supports "get", "post",
1105 * "put", "delete", and "patch".
1106 *
1107 * Native `<form>` only supports `get` and `post`, avoid the other verbs if
1108 * you'd like to support progressive enhancement
1109 */
1110 method?: HTMLFormMethod;
1111 /**
1112 * The encoding type to use for the form submission.
1113 */
1114 encType?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
1115 /**
1116 * The URL to submit the form data to. If `undefined`, this defaults to the closest route in context.
1117 */
1118 action?: string;
1119 /**
1120 * Determines whether the form action is relative to the route hierarchy or
1121 * the pathname. Use this if you want to opt out of navigating the route
1122 * hierarchy and want to instead route based on /-delimited URL segments
1123 */
1124 relative?: RelativeRoutingType;
1125 /**
1126 * Prevent the scroll position from resetting to the top of the viewport on
1127 * completion of the navigation when using the <ScrollRestoration> component
1128 */
1129 preventScrollReset?: boolean;
1130 /**
1131 * A function to call when the form is submitted. If you call
1132 * `event.preventDefault()` then this form will not do anything.
1133 */
1134 onSubmit?: React.FormEventHandler<HTMLFormElement>;
1135}
1136/**
1137 * Form props available to fetchers
1138 * @category Types
1139 */
1140interface FetcherFormProps extends SharedFormProps {
1141}
1142/**
1143 * Form props available to navigations
1144 * @category Types
1145 */
1146interface FormProps extends SharedFormProps {
1147 discover?: DiscoverBehavior;
1148 /**
1149 * Indicates a specific fetcherKey to use when using `navigate={false}` so you
1150 * can pick up the fetcher's state in a different component in a {@link
1151 * useFetcher}.
1152 */
1153 fetcherKey?: string;
1154 /**
1155 * Skips the navigation and uses a {@link useFetcher | fetcher} internally
1156 * when `false`. This is essentially a shorthand for `useFetcher()` +
1157 * `<fetcher.Form>` where you don't care about the resulting data in this
1158 * component.
1159 */
1160 navigate?: boolean;
1161 /**
1162 * Forces a full document navigation instead of client side routing + data
1163 * fetch.
1164 */
1165 reloadDocument?: boolean;
1166 /**
1167 * Replaces the current entry in the browser history stack when the form
1168 * navigates. Use this if you don't want the user to be able to click "back"
1169 * to the page with the form on it.
1170 */
1171 replace?: boolean;
1172 /**
1173 * State object to add to the history stack entry for this navigation
1174 */
1175 state?: any;
1176 /**
1177 * Enables a [View
1178 * Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
1179 * for this navigation. To apply specific styles during the transition see
1180 * {@link useViewTransitionState}.
1181 */
1182 viewTransition?: boolean;
1183}
1184/**
1185
1186A progressively enhanced HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) that submits data to actions via `fetch`, activating pending states in `useNavigation` which enables advanced user interfaces beyond a basic HTML form. After a form's action completes, all data on the page is automatically revalidated to keep the UI in sync with the data.
1187
1188Because it uses the HTML form API, server rendered pages are interactive at a basic level before JavaScript loads. Instead of React Router managing the submission, the browser manages the submission as well as the pending states (like the spinning favicon). After JavaScript loads, React Router takes over enabling web application user experiences.
1189
1190Form is most useful for submissions that should also change the URL or otherwise add an entry to the browser history stack. For forms that shouldn't manipulate the browser history stack, use [`<fetcher.Form>`][fetcher_form].
1191
1192```tsx
1193import { Form } from "react-router";
1194
1195function NewEvent() {
1196 return (
1197 <Form action="/events" method="post">
1198 <input name="title" type="text" />
1199 <input name="description" type="text" />
1200 </Form>
1201 )
1202}
1203```
1204
1205@category Components
1206*/
1207declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
1208type ScrollRestorationProps = ScriptsProps & {
1209 /**
1210 Defines the key used to restore scroll positions.
1211
1212 ```tsx
1213 <ScrollRestoration
1214 getKey={(location, matches) => {
1215 // default behavior
1216 return location.key
1217 }}
1218 />
1219 ```
1220 */
1221 getKey?: GetScrollRestorationKeyFunction;
1222 storageKey?: string;
1223};
1224/**
1225 Emulates the browser's scroll restoration on location changes. Apps should only render one of these, right before the {@link Scripts} component.
1226
1227 ```tsx
1228 import { ScrollRestoration } from "react-router";
1229
1230 export default function Root() {
1231 return (
1232 <html>
1233 <body>
1234 <ScrollRestoration />
1235 <Scripts />
1236 </body>
1237 </html>
1238 );
1239 }
1240 ```
1241
1242 This component renders an inline `<script>` to prevent scroll flashing. The `nonce` prop will be passed down to the script tag to allow CSP nonce usage.
1243
1244 ```tsx
1245 <ScrollRestoration nonce={cspNonce} />
1246 ```
1247
1248 @category Components
1249 */
1250declare function ScrollRestoration({ getKey, storageKey, ...props }: ScrollRestorationProps): React.JSX.Element | null;
1251declare namespace ScrollRestoration {
1252 var displayName: string;
1253}
1254/**
1255 * Handles the click behavior for router `<Link>` components. This is useful if
1256 * you need to create custom `<Link>` components with the same click behavior we
1257 * use in our exported `<Link>`.
1258 *
1259 * @category Hooks
1260 */
1261declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, state, preventScrollReset, relative, viewTransition, }?: {
1262 target?: React.HTMLAttributeAnchorTarget;
1263 replace?: boolean;
1264 state?: any;
1265 preventScrollReset?: boolean;
1266 relative?: RelativeRoutingType;
1267 viewTransition?: boolean;
1268}): (event: React.MouseEvent<E, MouseEvent>) => void;
1269/**
1270 Returns a tuple of the current URL's {@link URLSearchParams} and a function to update them. Setting the search params causes a navigation.
1271
1272 ```tsx
1273 import { useSearchParams } from "react-router";
1274
1275 export function SomeComponent() {
1276 const [searchParams, setSearchParams] = useSearchParams();
1277 // ...
1278 }
1279 ```
1280
1281 @category Hooks
1282 */
1283declare function useSearchParams(defaultInit?: URLSearchParamsInit): [URLSearchParams, SetURLSearchParams];
1284/**
1285 Sets new search params and causes a navigation when called.
1286
1287 ```tsx
1288 <button
1289 onClick={() => {
1290 const params = new URLSearchParams();
1291 params.set("someKey", "someValue");
1292 setSearchParams(params, {
1293 preventScrollReset: true,
1294 });
1295 }}
1296 />
1297 ```
1298
1299 It also supports a function for setting new search params.
1300
1301 ```tsx
1302 <button
1303 onClick={() => {
1304 setSearchParams((prev) => {
1305 prev.set("someKey", "someValue");
1306 return prev;
1307 });
1308 }}
1309 />
1310 ```
1311 */
1312type SetURLSearchParams = (nextInit?: URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions) => void;
1313/**
1314 * Submits a HTML `<form>` to the server without reloading the page.
1315 */
1316interface SubmitFunction {
1317 (
1318 /**
1319 Can be multiple types of elements and objects
1320
1321 **`HTMLFormElement`**
1322
1323 ```tsx
1324 <Form
1325 onSubmit={(event) => {
1326 submit(event.currentTarget);
1327 }}
1328 />
1329 ```
1330
1331 **`FormData`**
1332
1333 ```tsx
1334 const formData = new FormData();
1335 formData.append("myKey", "myValue");
1336 submit(formData, { method: "post" });
1337 ```
1338
1339 **Plain object that will be serialized as `FormData`**
1340
1341 ```tsx
1342 submit({ myKey: "myValue" }, { method: "post" });
1343 ```
1344
1345 **Plain object that will be serialized as JSON**
1346
1347 ```tsx
1348 submit(
1349 { myKey: "myValue" },
1350 { method: "post", encType: "application/json" }
1351 );
1352 ```
1353 */
1354 target: SubmitTarget,
1355 /**
1356 * Options that override the `<form>`'s own attributes. Required when
1357 * submitting arbitrary data without a backing `<form>`.
1358 */
1359 options?: SubmitOptions): Promise<void>;
1360}
1361/**
1362 * Submits a fetcher `<form>` to the server without reloading the page.
1363 */
1364interface FetcherSubmitFunction {
1365 (
1366 /**
1367 Can be multiple types of elements and objects
1368
1369 **`HTMLFormElement`**
1370
1371 ```tsx
1372 <fetcher.Form
1373 onSubmit={(event) => {
1374 fetcher.submit(event.currentTarget);
1375 }}
1376 />
1377 ```
1378
1379 **`FormData`**
1380
1381 ```tsx
1382 const formData = new FormData();
1383 formData.append("myKey", "myValue");
1384 fetcher.submit(formData, { method: "post" });
1385 ```
1386
1387 **Plain object that will be serialized as `FormData`**
1388
1389 ```tsx
1390 fetcher.submit({ myKey: "myValue" }, { method: "post" });
1391 ```
1392
1393 **Plain object that will be serialized as JSON**
1394
1395 ```tsx
1396 fetcher.submit(
1397 { myKey: "myValue" },
1398 { method: "post", encType: "application/json" }
1399 );
1400 ```
1401
1402 */
1403 target: SubmitTarget, options?: FetcherSubmitOptions): Promise<void>;
1404}
1405/**
1406 The imperative version of {@link Form | `<Form>`} that lets you submit a form from code instead of a user interaction.
1407
1408 ```tsx
1409 import { useSubmit } from "react-router";
1410
1411 function SomeComponent() {
1412 const submit = useSubmit();
1413 return (
1414 <Form
1415 onChange={(event) => {
1416 submit(event.currentTarget);
1417 }}
1418 />
1419 );
1420 }
1421 ```
1422
1423 @category Hooks
1424 */
1425declare function useSubmit(): SubmitFunction;
1426/**
1427 Resolves the URL to the closest route in the component hierarchy instead of the current URL of the app.
1428
1429 This is used internally by {@link Form} resolve the action to the closest route, but can be used generically as well.
1430
1431 ```tsx
1432 import { useFormAction } from "react-router";
1433
1434 function SomeComponent() {
1435 // closest route URL
1436 let action = useFormAction();
1437
1438 // closest route URL + "destroy"
1439 let destroyAction = useFormAction("destroy");
1440 }
1441 ```
1442
1443 @category Hooks
1444 */
1445declare function useFormAction(
1446/**
1447 * The action to append to the closest route URL.
1448 */
1449action?: string, { relative }?: {
1450 relative?: RelativeRoutingType;
1451}): string;
1452/**
1453The return value of `useFetcher` that keeps track of the state of a fetcher.
1454
1455```tsx
1456let fetcher = useFetcher();
1457```
1458 */
1459type FetcherWithComponents<TData> = Fetcher<TData> & {
1460 /**
1461 Just like {@link Form} except it doesn't cause a navigation.
1462
1463 ```tsx
1464 function SomeComponent() {
1465 const fetcher = useFetcher()
1466 return (
1467 <fetcher.Form method="post" action="/some/route">
1468 <input type="text" />
1469 </fetcher.Form>
1470 )
1471 }
1472 ```
1473 */
1474 Form: React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>;
1475 /**
1476 Submits form data to a route. While multiple nested routes can match a URL, only the leaf route will be called.
1477
1478 The `formData` can be multiple types:
1479
1480 - [`FormData`][form_data] - A `FormData` instance.
1481 - [`HTMLFormElement`][html_form_element] - A [`<form>`][form_element] DOM element.
1482 - `Object` - An object of key/value pairs that will be converted to a `FormData` instance by default. You can pass a more complex object and serialize it as JSON by specifying `encType: "application/json"`. See [`useSubmit`][use-submit] for more details.
1483
1484 If the method is `GET`, then the route [`loader`][loader] is being called and with the `formData` serialized to the url as [`URLSearchParams`][url_search_params]. If `DELETE`, `PATCH`, `POST`, or `PUT`, then the route [`action`][action] is being called with `formData` as the body.
1485
1486 ```tsx
1487 // Submit a FormData instance (GET request)
1488 const formData = new FormData();
1489 fetcher.submit(formData);
1490
1491 // Submit the HTML form element
1492 fetcher.submit(event.currentTarget.form, {
1493 method: "POST",
1494 });
1495
1496 // Submit key/value JSON as a FormData instance
1497 fetcher.submit(
1498 { serialized: "values" },
1499 { method: "POST" }
1500 );
1501
1502 // Submit raw JSON
1503 fetcher.submit(
1504 {
1505 deeply: {
1506 nested: {
1507 json: "values",
1508 },
1509 },
1510 },
1511 {
1512 method: "POST",
1513 encType: "application/json",
1514 }
1515 );
1516 ```
1517 */
1518 submit: FetcherSubmitFunction;
1519 /**
1520 Loads data from a route. Useful for loading data imperatively inside of user events outside of a normal button or form, like a combobox or search input.
1521
1522 ```tsx
1523 let fetcher = useFetcher()
1524
1525 <input onChange={e => {
1526 fetcher.load(`/search?q=${e.target.value}`)
1527 }} />
1528 ```
1529 */
1530 load: (href: string, opts?: {
1531 /**
1532 * Wraps the initial state update for this `fetcher.load` in a
1533 * `ReactDOM.flushSync` call instead of the default `React.startTransition`.
1534 * This allows you to perform synchronous DOM actions immediately after the
1535 * update is flushed to the DOM.
1536 */
1537 flushSync?: boolean;
1538 }) => Promise<void>;
1539};
1540/**
1541 Useful for creating complex, dynamic user interfaces that require multiple, concurrent data interactions without causing a navigation.
1542
1543 Fetchers track their own, independent state and can be used to load data, submit forms, and generally interact with loaders and actions.
1544
1545 ```tsx
1546 import { useFetcher } from "react-router"
1547
1548 function SomeComponent() {
1549 let fetcher = useFetcher()
1550
1551 // states are available on the fetcher
1552 fetcher.state // "idle" | "loading" | "submitting"
1553 fetcher.data // the data returned from the action or loader
1554
1555 // render a form
1556 <fetcher.Form method="post" />
1557
1558 // load data
1559 fetcher.load("/some/route")
1560
1561 // submit data
1562 fetcher.submit(someFormRef, { method: "post" })
1563 fetcher.submit(someData, {
1564 method: "post",
1565 encType: "application/json"
1566 })
1567 }
1568 ```
1569
1570 @category Hooks
1571 */
1572declare function useFetcher<T = any>({ key, }?: {
1573 /**
1574 By default, `useFetcher` generate a unique fetcher scoped to that component. If you want to identify a fetcher with your own key such that you can access it from elsewhere in your app, you can do that with the `key` option:
1575
1576 ```tsx
1577 function SomeComp() {
1578 let fetcher = useFetcher({ key: "my-key" })
1579 // ...
1580 }
1581
1582 // Somewhere else
1583 function AnotherComp() {
1584 // this will be the same fetcher, sharing the state across the app
1585 let fetcher = useFetcher({ key: "my-key" });
1586 // ...
1587 }
1588 ```
1589 */
1590 key?: string;
1591}): FetcherWithComponents<SerializeFrom<T>>;
1592/**
1593 Returns an array of all in-flight fetchers. This is useful for components throughout the app that didn't create the fetchers but want to use their submissions to participate in optimistic UI.
1594
1595 ```tsx
1596 import { useFetchers } from "react-router";
1597
1598 function SomeComponent() {
1599 const fetchers = useFetchers();
1600 fetchers[0].formData; // FormData
1601 fetchers[0].state; // etc.
1602 // ...
1603 }
1604 ```
1605
1606 @category Hooks
1607 */
1608declare function useFetchers(): (Fetcher & {
1609 key: string;
1610})[];
1611/**
1612 * When rendered inside a RouterProvider, will restore scroll positions on navigations
1613 */
1614declare function useScrollRestoration({ getKey, storageKey, }?: {
1615 getKey?: GetScrollRestorationKeyFunction;
1616 storageKey?: string;
1617}): void;
1618/**
1619 * Setup a callback to be fired on the window's `beforeunload` event.
1620 *
1621 * @category Hooks
1622 */
1623declare function useBeforeUnload(callback: (event: BeforeUnloadEvent) => any, options?: {
1624 capture?: boolean;
1625}): void;
1626/**
1627 Wrapper around useBlocker to show a window.confirm prompt to users instead of building a custom UI with {@link useBlocker}.
1628
1629 The `unstable_` flag will not be removed because this technique has a lot of rough edges and behaves very differently (and incorrectly sometimes) across browsers if users click addition back/forward navigations while the confirmation is open. Use at your own risk.
1630
1631 ```tsx
1632 function ImportantForm() {
1633 let [value, setValue] = React.useState("");
1634
1635 // Block navigating elsewhere when data has been entered into the input
1636 unstable_usePrompt({
1637 message: "Are you sure?",
1638 when: ({ currentLocation, nextLocation }) =>
1639 value !== "" &&
1640 currentLocation.pathname !== nextLocation.pathname,
1641 });
1642
1643 return (
1644 <Form method="post">
1645 <label>
1646 Enter some important data:
1647 <input
1648 name="data"
1649 value={value}
1650 onChange={(e) => setValue(e.target.value)}
1651 />
1652 </label>
1653 <button type="submit">Save</button>
1654 </Form>
1655 );
1656 }
1657 ```
1658
1659 @category Hooks
1660 @name unstable_usePrompt
1661 */
1662declare function usePrompt({ when, message, }: {
1663 when: boolean | BlockerFunction;
1664 message: string;
1665}): void;
1666/**
1667 This hook returns `true` when there is an active [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) to the specified location. This can be used to apply finer-grained styles to elements to further customize the view transition. This requires that view transitions have been enabled for the given navigation via {@link LinkProps.viewTransition} (or the `Form`, `submit`, or `navigate` call)
1668
1669 @category Hooks
1670 @name useViewTransitionState
1671 */
1672declare function useViewTransitionState(to: To, opts?: {
1673 relative?: RelativeRoutingType;
1674}): boolean;
1675
1676declare global {
1677 interface Navigator {
1678 connection?: {
1679 saveData: boolean;
1680 };
1681 }
1682}
1683declare function getPatchRoutesOnNavigationFunction(manifest: AssetsManifest, routeModules: RouteModules, ssr: boolean, isSpaMode: boolean, basename: string | undefined): PatchRoutesOnNavigationFunction | undefined;
1684declare function useFogOFWarDiscovery(router: Router$1, manifest: AssetsManifest, routeModules: RouteModules, ssr: boolean, isSpaMode: boolean): void;
1685
1686export { useSearchParams as $, type AssetsManifest as A, type BrowserRouterProps as B, type CriticalCss as C, type DOMRouterOpts as D, type EntryContext as E, type FutureConfig as F, type FetcherSubmitFunction as G, type HashRouterProps as H, type IndexRouteProps as I, type FetcherWithComponents as J, createBrowserRouter as K, type LayoutRouteProps as L, type MemoryRouterOpts as M, type NavigateProps as N, type OutletProps as O, type PathRouteProps as P, createHashRouter as Q, type RouterProviderProps as R, type ScrollRestorationProps as S, BrowserRouter as T, HashRouter as U, Link as V, HistoryRouter as W, NavLink as X, Form as Y, ScrollRestoration as Z, useLinkClickHandler as _, type Route as a, useSubmit as a0, useFormAction as a1, useFetcher as a2, useFetchers as a3, useBeforeUnload as a4, usePrompt as a5, useViewTransitionState as a6, type FetcherSubmitOptions as a7, type ParamKeyValuePair as a8, type SubmitOptions as a9, type URLSearchParamsInit as aa, type SubmitTarget as ab, createSearchParams as ac, Meta as ad, Links as ae, Scripts as af, PrefetchPageLinks as ag, type ScriptsProps as ah, mapRouteProperties as ai, FrameworkContext as aj, getPatchRoutesOnNavigationFunction as ak, useFogOFWarDiscovery as al, createClientRoutes as am, createClientRoutesWithHMRRevalidationOptOut as an, shouldHydrateRouteLoader as ao, useScrollRestoration as ap, type AwaitProps as b, type MemoryRouterProps as c, type RouteProps as d, type RouterProps as e, type RoutesProps as f, Await as g, MemoryRouter as h, Navigate as i, Outlet as j, Route$1 as k, Router as l, RouterProvider as m, Routes as n, createMemoryRouter as o, createRoutesFromChildren as p, createRoutesFromElements as q, renderMatches as r, type HistoryRouterProps as s, type LinkProps as t, type NavLinkProps as u, type NavLinkRenderProps as v, type FetcherFormProps as w, type FormProps as x, type SetURLSearchParams as y, type SubmitFunction as z };
1687
\No newline at end of file