react-router 7.7.1 → 7.8.0-pre.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +81 -5
- package/dist/development/browser-z32v5KVN.d.mts +46 -0
- package/dist/{production/chunk-K3SBCRK4.mjs → development/chunk-HSC5IU24.mjs} +177 -134
- package/dist/development/{chunk-K7YFBME3.js → chunk-IW6UADHO.js} +250 -187
- package/dist/development/{chunk-C37GKA54.mjs → chunk-SC4OUYO4.mjs} +232 -169
- package/dist/development/{chunk-R73PQUJU.js → chunk-Z4NNCWGU.js} +130 -130
- package/dist/development/{components-CjQijYga.d.mts → components-uUh0svuC.d.mts} +33 -21
- package/dist/{production/route-data-CqEmXQub.d.mts → development/context-DZWGFcKX.d.mts} +312 -524
- package/dist/development/dom-export.d.mts +16 -12
- package/dist/development/dom-export.d.ts +13 -8
- package/dist/development/dom-export.js +3 -3
- package/dist/development/dom-export.mjs +3 -3
- package/dist/{production/index-react-server-client-KLg-U4nr.d.mts → development/index-react-server-client-BUK-oRcG.d.mts} +327 -200
- package/dist/development/{index-react-server-client-Bi_fx8qz.d.ts → index-react-server-client-DSU6bZil.d.ts} +357 -219
- package/dist/development/index-react-server-client.d.mts +4 -3
- package/dist/development/index-react-server-client.d.ts +2 -2
- package/dist/development/index-react-server-client.js +4 -4
- package/dist/development/index-react-server-client.mjs +2 -2
- package/dist/development/index-react-server.d.mts +291 -70
- package/dist/development/index-react-server.d.ts +291 -70
- package/dist/development/index-react-server.js +174 -180
- package/dist/development/index-react-server.mjs +174 -180
- package/dist/development/index.d.mts +294 -86
- package/dist/development/index.d.ts +136 -105
- package/dist/development/index.js +258 -215
- package/dist/development/index.mjs +3 -3
- package/dist/development/lib/types/internal.d.mts +13 -2
- package/dist/development/lib/types/internal.d.ts +12 -2
- package/dist/development/lib/types/internal.js +1 -1
- package/dist/development/lib/types/internal.mjs +1 -1
- package/dist/development/route-data-UTmTa8an.d.mts +473 -0
- package/dist/{production/routeModules-BR2FO0ix.d.ts → development/routeModules-D5bppTB2.d.ts} +325 -67
- package/dist/production/browser-z32v5KVN.d.mts +46 -0
- package/dist/production/{chunk-4DGLNKXF.js → chunk-BCLZG6QW.js} +130 -130
- package/dist/{development/chunk-KIUJAIYX.mjs → production/chunk-KQ5567DT.mjs} +177 -134
- package/dist/production/{chunk-IZ57JD2V.mjs → chunk-X2NPJMV2.mjs} +232 -169
- package/dist/production/{chunk-7OQROU2D.js → chunk-YC2ENCM3.js} +250 -187
- package/dist/production/{components-CjQijYga.d.mts → components-uUh0svuC.d.mts} +33 -21
- package/dist/{development/route-data-CqEmXQub.d.mts → production/context-DZWGFcKX.d.mts} +312 -524
- package/dist/production/dom-export.d.mts +16 -12
- package/dist/production/dom-export.d.ts +13 -8
- package/dist/production/dom-export.js +3 -3
- package/dist/production/dom-export.mjs +3 -3
- package/dist/{development/index-react-server-client-KLg-U4nr.d.mts → production/index-react-server-client-BUK-oRcG.d.mts} +327 -200
- package/dist/production/{index-react-server-client-Bi_fx8qz.d.ts → index-react-server-client-DSU6bZil.d.ts} +357 -219
- package/dist/production/index-react-server-client.d.mts +4 -3
- package/dist/production/index-react-server-client.d.ts +2 -2
- package/dist/production/index-react-server-client.js +4 -4
- package/dist/production/index-react-server-client.mjs +2 -2
- package/dist/production/index-react-server.d.mts +291 -70
- package/dist/production/index-react-server.d.ts +291 -70
- package/dist/production/index-react-server.js +174 -180
- package/dist/production/index-react-server.mjs +174 -180
- package/dist/production/index.d.mts +294 -86
- package/dist/production/index.d.ts +136 -105
- package/dist/production/index.js +258 -215
- package/dist/production/index.mjs +3 -3
- package/dist/production/lib/types/internal.d.mts +13 -2
- package/dist/production/lib/types/internal.d.ts +12 -2
- package/dist/production/lib/types/internal.js +1 -1
- package/dist/production/lib/types/internal.mjs +1 -1
- package/dist/production/route-data-UTmTa8an.d.mts +473 -0
- package/dist/{development/routeModules-BR2FO0ix.d.ts → production/routeModules-D5bppTB2.d.ts} +325 -67
- package/package.json +1 -1
- package/dist/development/browser-7LYX59NK.d.mts +0 -226
- package/dist/production/browser-7LYX59NK.d.mts +0 -226
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { I as InitialEntry, T as To, i as RelativeRoutingType, w as NonIndexRouteObject,
|
|
1
|
+
import { I as InitialEntry, T as To, i as RelativeRoutingType, w as NonIndexRouteObject, af as LazyRouteFunction, q as IndexRouteObject, a as Location, A as Action, aC as Navigator, d as Router$1, Q as RouterInit, aY as FutureConfig$1, H as HydrationState, D as DataStrategyFunction, W as PatchRoutesOnNavigationFunction, p as RouteObject, aE as RouteMatch, o as Params, U as UIMatch, ae as HTMLFormMethod, ac as FormEncType, aZ as RouteManifest, a_ as ServerRouteModule, z as MiddlewareEnabled, y as unstable_RouterContextProvider, x as AppLoadContext, ag as LoaderFunctionArgs, a6 as ActionFunctionArgs, e as RouteModules, X as DataRouteObject, J as ClientLoaderFunction, $ as StaticHandlerContext, aJ as PageLinkDescriptor, a$ as History, _ as GetScrollRestorationKeyFunction, f as NavigateOptions, a0 as Fetcher, h as SerializeFrom, B as BlockerFunction, b0 as CreateStaticHandlerOptions$1, Y as StaticHandler } from './routeModules-D5bppTB2.js';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
|
|
4
4
|
declare function mapRouteProperties(route: RouteObject): Partial<RouteObject> & {
|
|
@@ -14,8 +14,11 @@ interface MemoryRouterOpts {
|
|
|
14
14
|
*/
|
|
15
15
|
basename?: string;
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
18
|
-
*
|
|
17
|
+
* A function that returns an {@link unstable_RouterContextProvider} instance
|
|
18
|
+
* which is provided as the `context` argument to client [`action`](../../start/data/route-object#action)s,
|
|
19
|
+
* [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
|
|
20
|
+
* This function is called to generate a fresh `context` instance on each
|
|
21
|
+
* navigation or fetcher call.
|
|
19
22
|
*/
|
|
20
23
|
unstable_getContext?: RouterInit["unstable_getContext"];
|
|
21
24
|
/**
|
|
@@ -32,7 +35,7 @@ interface MemoryRouterOpts {
|
|
|
32
35
|
*/
|
|
33
36
|
initialEntries?: InitialEntry[];
|
|
34
37
|
/**
|
|
35
|
-
* Index of
|
|
38
|
+
* Index of `initialEntries` the application should initialize to
|
|
36
39
|
*/
|
|
37
40
|
initialIndex?: number;
|
|
38
41
|
/**
|
|
@@ -89,7 +92,7 @@ interface RouterProviderProps {
|
|
|
89
92
|
* Render the UI for the given {@link DataRouter}. This component should
|
|
90
93
|
* typically be at the top of an app's element tree.
|
|
91
94
|
*
|
|
92
|
-
*
|
|
95
|
+
* ```tsx
|
|
93
96
|
* import { createBrowserRouter } from "react-router";
|
|
94
97
|
* import { RouterProvider } from "react-router/dom";
|
|
95
98
|
* import { createRoot } from "react-dom/client";
|
|
@@ -98,6 +101,14 @@ interface RouterProviderProps {
|
|
|
98
101
|
* createRoot(document.getElementById("root")).render(
|
|
99
102
|
* <RouterProvider router={router} />
|
|
100
103
|
* );
|
|
104
|
+
* ```
|
|
105
|
+
*
|
|
106
|
+
* <docs-info>Please note that this component is exported both from
|
|
107
|
+
* `react-router` and `react-router/dom` with the only difference being that the
|
|
108
|
+
* latter automatically wires up `react-dom`'s [`flushSync`](https://react.dev/reference/react-dom/flushSync)
|
|
109
|
+
* implementation. You _almost always_ want to use the version from
|
|
110
|
+
* `react-router/dom` unless you're running in a non-DOM environment.</docs-info>
|
|
111
|
+
*
|
|
101
112
|
*
|
|
102
113
|
* @public
|
|
103
114
|
* @category Data Routers
|
|
@@ -125,7 +136,7 @@ interface MemoryRouterProps {
|
|
|
125
136
|
*/
|
|
126
137
|
initialEntries?: InitialEntry[];
|
|
127
138
|
/**
|
|
128
|
-
* Index of
|
|
139
|
+
* Index of `initialEntries` the application should initialize to
|
|
129
140
|
*/
|
|
130
141
|
initialIndex?: number;
|
|
131
142
|
}
|
|
@@ -140,7 +151,8 @@ interface MemoryRouterProps {
|
|
|
140
151
|
* @param {MemoryRouterProps.children} props.children n/a
|
|
141
152
|
* @param {MemoryRouterProps.initialEntries} props.initialEntries n/a
|
|
142
153
|
* @param {MemoryRouterProps.initialIndex} props.initialIndex n/a
|
|
143
|
-
* @returns A declarative in
|
|
154
|
+
* @returns A declarative in-memory {@link Router | `<Router>`} for client-side
|
|
155
|
+
* routing.
|
|
144
156
|
*/
|
|
145
157
|
declare function MemoryRouter({ basename, children, initialEntries, initialIndex, }: MemoryRouterProps): React.ReactElement;
|
|
146
158
|
/**
|
|
@@ -161,7 +173,7 @@ interface NavigateProps {
|
|
|
161
173
|
*/
|
|
162
174
|
state?: any;
|
|
163
175
|
/**
|
|
164
|
-
* How to interpret relative routing in the
|
|
176
|
+
* How to interpret relative routing in the `to` prop.
|
|
165
177
|
* See {@link RelativeRoutingType}.
|
|
166
178
|
*/
|
|
167
179
|
relative?: RelativeRoutingType;
|
|
@@ -279,32 +291,32 @@ interface PathRouteProps {
|
|
|
279
291
|
children?: React.ReactNode;
|
|
280
292
|
/**
|
|
281
293
|
* The React element to render when this Route matches.
|
|
282
|
-
* Mutually exclusive with
|
|
294
|
+
* Mutually exclusive with `Component`.
|
|
283
295
|
*/
|
|
284
296
|
element?: React.ReactNode | null;
|
|
285
297
|
/**
|
|
286
298
|
* The React element to render while this router is loading data.
|
|
287
|
-
* Mutually exclusive with
|
|
299
|
+
* Mutually exclusive with `HydrateFallback`.
|
|
288
300
|
*/
|
|
289
301
|
hydrateFallbackElement?: React.ReactNode | null;
|
|
290
302
|
/**
|
|
291
303
|
* The React element to render at this route if an error occurs.
|
|
292
|
-
* Mutually exclusive with
|
|
304
|
+
* Mutually exclusive with `ErrorBoundary`.
|
|
293
305
|
*/
|
|
294
306
|
errorElement?: React.ReactNode | null;
|
|
295
307
|
/**
|
|
296
308
|
* The React Component to render when this route matches.
|
|
297
|
-
* Mutually exclusive with
|
|
309
|
+
* Mutually exclusive with `element`.
|
|
298
310
|
*/
|
|
299
311
|
Component?: React.ComponentType | null;
|
|
300
312
|
/**
|
|
301
313
|
* The React Component to render while this router is loading data.
|
|
302
|
-
* Mutually exclusive with
|
|
314
|
+
* Mutually exclusive with `hydrateFallbackElement`.
|
|
303
315
|
*/
|
|
304
316
|
HydrateFallback?: React.ComponentType | null;
|
|
305
317
|
/**
|
|
306
318
|
* The React Component to render at this route if an error occurs.
|
|
307
|
-
* Mutually exclusive with
|
|
319
|
+
* Mutually exclusive with `errorElement`.
|
|
308
320
|
*/
|
|
309
321
|
ErrorBoundary?: React.ComponentType | null;
|
|
310
322
|
}
|
|
@@ -366,32 +378,32 @@ interface IndexRouteProps {
|
|
|
366
378
|
children?: undefined;
|
|
367
379
|
/**
|
|
368
380
|
* The React element to render when this Route matches.
|
|
369
|
-
* Mutually exclusive with
|
|
381
|
+
* Mutually exclusive with `Component`.
|
|
370
382
|
*/
|
|
371
383
|
element?: React.ReactNode | null;
|
|
372
384
|
/**
|
|
373
385
|
* The React element to render while this router is loading data.
|
|
374
|
-
* Mutually exclusive with
|
|
386
|
+
* Mutually exclusive with `HydrateFallback`.
|
|
375
387
|
*/
|
|
376
388
|
hydrateFallbackElement?: React.ReactNode | null;
|
|
377
389
|
/**
|
|
378
390
|
* The React element to render at this route if an error occurs.
|
|
379
|
-
* Mutually exclusive with
|
|
391
|
+
* Mutually exclusive with `ErrorBoundary`.
|
|
380
392
|
*/
|
|
381
393
|
errorElement?: React.ReactNode | null;
|
|
382
394
|
/**
|
|
383
395
|
* The React Component to render when this route matches.
|
|
384
|
-
* Mutually exclusive with
|
|
396
|
+
* Mutually exclusive with `element`.
|
|
385
397
|
*/
|
|
386
398
|
Component?: React.ComponentType | null;
|
|
387
399
|
/**
|
|
388
400
|
* The React Component to render while this router is loading data.
|
|
389
|
-
* Mutually exclusive with
|
|
401
|
+
* Mutually exclusive with `hydrateFallbackElement`.
|
|
390
402
|
*/
|
|
391
403
|
HydrateFallback?: React.ComponentType | null;
|
|
392
404
|
/**
|
|
393
405
|
* The React Component to render at this route if an error occurs.
|
|
394
|
-
* Mutually exclusive with
|
|
406
|
+
* Mutually exclusive with `errorElement`.
|
|
395
407
|
*/
|
|
396
408
|
ErrorBoundary?: React.ComponentType | null;
|
|
397
409
|
}
|
|
@@ -471,7 +483,7 @@ interface RouterProps {
|
|
|
471
483
|
*/
|
|
472
484
|
location: Partial<Location> | string;
|
|
473
485
|
/**
|
|
474
|
-
* The type of navigation that triggered this location change.
|
|
486
|
+
* The type of navigation that triggered this `location` change.
|
|
475
487
|
* Defaults to {@link NavigationType.Pop}.
|
|
476
488
|
*/
|
|
477
489
|
navigationType?: Action;
|
|
@@ -1056,9 +1068,23 @@ type DiscoverBehavior = "render" | "none";
|
|
|
1056
1068
|
*/
|
|
1057
1069
|
type PrefetchBehavior = "intent" | "render" | "none" | "viewport";
|
|
1058
1070
|
/**
|
|
1059
|
-
*
|
|
1060
|
-
*
|
|
1061
|
-
*
|
|
1071
|
+
* Props for the {@link Links} component.
|
|
1072
|
+
*
|
|
1073
|
+
* @category Types
|
|
1074
|
+
*/
|
|
1075
|
+
interface LinksProps {
|
|
1076
|
+
/**
|
|
1077
|
+
* A [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
|
|
1078
|
+
* attribute to render on the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
|
|
1079
|
+
* element
|
|
1080
|
+
*/
|
|
1081
|
+
nonce?: string | undefined;
|
|
1082
|
+
}
|
|
1083
|
+
/**
|
|
1084
|
+
* Renders all the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
|
|
1085
|
+
* tags created by the route module's [`links`](../../start/framework/route-module#links)
|
|
1086
|
+
* export. You should render it inside the [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
|
|
1087
|
+
* of your document.
|
|
1062
1088
|
*
|
|
1063
1089
|
* @example
|
|
1064
1090
|
* import { Links } from "react-router";
|
|
@@ -1077,14 +1103,17 @@ type PrefetchBehavior = "intent" | "render" | "none" | "viewport";
|
|
|
1077
1103
|
* @public
|
|
1078
1104
|
* @category Components
|
|
1079
1105
|
* @mode framework
|
|
1080
|
-
* @
|
|
1106
|
+
* @param props Props
|
|
1107
|
+
* @param {LinksProps.nonce} props.nonce n/a
|
|
1108
|
+
* @returns A collection of React elements for [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
|
|
1109
|
+
* tags
|
|
1081
1110
|
*/
|
|
1082
|
-
declare function Links(): React.JSX.Element;
|
|
1111
|
+
declare function Links({ nonce }: LinksProps): React.JSX.Element;
|
|
1083
1112
|
/**
|
|
1084
|
-
* Renders `<link rel=prefetch|modulepreload>`
|
|
1085
|
-
* another page to enable an instant navigation to
|
|
1086
|
-
* [`<Link prefetch>`](
|
|
1087
|
-
*
|
|
1113
|
+
* Renders [`<link rel=prefetch|modulepreload>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel)
|
|
1114
|
+
* tags for modules and data of another page to enable an instant navigation to
|
|
1115
|
+
* that page. [`<Link prefetch>`](./Link#prefetch) uses this internally, but you
|
|
1116
|
+
* can render it to prefetch a page for any other reason.
|
|
1088
1117
|
*
|
|
1089
1118
|
* For example, you may render one of this as the user types into a search field
|
|
1090
1119
|
* to prefetch search results before they click through to their selection.
|
|
@@ -1098,17 +1127,21 @@ declare function Links(): React.JSX.Element;
|
|
|
1098
1127
|
* @category Components
|
|
1099
1128
|
* @mode framework
|
|
1100
1129
|
* @param props Props
|
|
1101
|
-
* @param
|
|
1102
|
-
* @param props.linkProps Additional props to spread onto the
|
|
1103
|
-
* [
|
|
1104
|
-
*
|
|
1105
|
-
*
|
|
1130
|
+
* @param {PageLinkDescriptor.page} props.page n/a
|
|
1131
|
+
* @param props.linkProps Additional props to spread onto the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
|
|
1132
|
+
* tags, such as [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/crossOrigin),
|
|
1133
|
+
* [`integrity`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/integrity),
|
|
1134
|
+
* [`rel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel),
|
|
1135
|
+
* etc.
|
|
1136
|
+
* @returns A collection of React elements for [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
|
|
1137
|
+
* tags
|
|
1106
1138
|
*/
|
|
1107
1139
|
declare function PrefetchPageLinks({ page, ...linkProps }: PageLinkDescriptor): React.JSX.Element | null;
|
|
1108
1140
|
/**
|
|
1109
|
-
* Renders all the `<meta>`
|
|
1110
|
-
* [`meta`](../../start/framework/route-module#meta)
|
|
1111
|
-
* it inside the `<head>`
|
|
1141
|
+
* Renders all the [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
|
|
1142
|
+
* tags created by the route module's [`meta`](../../start/framework/route-module#meta)
|
|
1143
|
+
* export. You should render it inside the [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
|
|
1144
|
+
* of your document.
|
|
1112
1145
|
*
|
|
1113
1146
|
* @example
|
|
1114
1147
|
* import { Meta } from "react-router";
|
|
@@ -1126,29 +1159,40 @@ declare function PrefetchPageLinks({ page, ...linkProps }: PageLinkDescriptor):
|
|
|
1126
1159
|
* @public
|
|
1127
1160
|
* @category Components
|
|
1128
1161
|
* @mode framework
|
|
1129
|
-
* @returns A collection of React elements for `<meta>`
|
|
1162
|
+
* @returns A collection of React elements for [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
|
|
1163
|
+
* tags
|
|
1130
1164
|
*/
|
|
1131
1165
|
declare function Meta(): React.JSX.Element;
|
|
1132
1166
|
/**
|
|
1133
1167
|
* A couple common attributes:
|
|
1134
1168
|
*
|
|
1135
|
-
* - `<Scripts crossOrigin>` for hosting your static assets on a different
|
|
1136
|
-
*
|
|
1169
|
+
* - `<Scripts crossOrigin>` for hosting your static assets on a different
|
|
1170
|
+
* server than your app.
|
|
1171
|
+
* - `<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)
|
|
1172
|
+
* with [nonce-sources](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources)
|
|
1173
|
+
* for your [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
|
|
1174
|
+
* tags.
|
|
1137
1175
|
*
|
|
1138
|
-
* You cannot pass through attributes such as `async
|
|
1176
|
+
* You cannot pass through attributes such as [`async`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/async),
|
|
1177
|
+
* [`defer`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/defer),
|
|
1178
|
+
* [`noModule`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/noModule),
|
|
1179
|
+
* [`src`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/src),
|
|
1180
|
+
* or [`type`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/type),
|
|
1181
|
+
* because they are managed by React Router internally.
|
|
1139
1182
|
*
|
|
1140
1183
|
* @category Types
|
|
1141
1184
|
*/
|
|
1142
|
-
type ScriptsProps = Omit<React.HTMLProps<HTMLScriptElement>, "async" | "children" | "dangerouslySetInnerHTML" | "defer" | "
|
|
1185
|
+
type ScriptsProps = Omit<React.HTMLProps<HTMLScriptElement>, "async" | "children" | "dangerouslySetInnerHTML" | "defer" | "noModule" | "src" | "suppressHydrationWarning" | "type"> & {
|
|
1143
1186
|
/**
|
|
1144
1187
|
* A [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
|
|
1145
|
-
* attribute to render on
|
|
1188
|
+
* attribute to render on the [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
|
|
1189
|
+
* element
|
|
1146
1190
|
*/
|
|
1147
1191
|
nonce?: string | undefined;
|
|
1148
1192
|
};
|
|
1149
1193
|
/**
|
|
1150
1194
|
* Renders the client runtime of your app. It should be rendered inside the
|
|
1151
|
-
* [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/
|
|
1195
|
+
* [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body)
|
|
1152
1196
|
* of the document.
|
|
1153
1197
|
*
|
|
1154
1198
|
* If server rendering, you can omit `<Scripts/>` and the app will work as a
|
|
@@ -1172,10 +1216,12 @@ type ScriptsProps = Omit<React.HTMLProps<HTMLScriptElement>, "async" | "children
|
|
|
1172
1216
|
* @public
|
|
1173
1217
|
* @category Components
|
|
1174
1218
|
* @mode framework
|
|
1175
|
-
* @param scriptProps Additional props to spread onto the
|
|
1176
|
-
* [
|
|
1177
|
-
*
|
|
1178
|
-
*
|
|
1219
|
+
* @param scriptProps Additional props to spread onto the [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
|
|
1220
|
+
* tags, such as [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/crossOrigin),
|
|
1221
|
+
* [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce),
|
|
1222
|
+
* etc.
|
|
1223
|
+
* @returns A collection of React elements for [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
|
|
1224
|
+
* tags
|
|
1179
1225
|
*/
|
|
1180
1226
|
declare function Scripts(scriptProps: ScriptsProps): React.JSX.Element | null;
|
|
1181
1227
|
|
|
@@ -1188,7 +1234,11 @@ interface DOMRouterOpts {
|
|
|
1188
1234
|
*/
|
|
1189
1235
|
basename?: string;
|
|
1190
1236
|
/**
|
|
1191
|
-
*
|
|
1237
|
+
* A function that returns an {@link unstable_RouterContextProvider} instance
|
|
1238
|
+
* which is provided as the `context` argument to client [`action`](../../start/data/route-object#action)s,
|
|
1239
|
+
* [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
|
|
1240
|
+
* This function is called to generate a fresh `context` instance on each
|
|
1241
|
+
* navigation or fetcher call.
|
|
1192
1242
|
*/
|
|
1193
1243
|
unstable_getContext?: RouterInit["unstable_getContext"];
|
|
1194
1244
|
/**
|
|
@@ -1196,10 +1246,11 @@ interface DOMRouterOpts {
|
|
|
1196
1246
|
*/
|
|
1197
1247
|
future?: Partial<FutureConfig$1>;
|
|
1198
1248
|
/**
|
|
1199
|
-
* When Server-Rendering and opting-out of automatic hydration, the
|
|
1200
|
-
* option allows you to pass in hydration data from your
|
|
1201
|
-
* almost always be a subset of data from the
|
|
1202
|
-
* get back from
|
|
1249
|
+
* When Server-Rendering and opting-out of automatic hydration, the
|
|
1250
|
+
* `hydrationData` option allows you to pass in hydration data from your
|
|
1251
|
+
* server-render. This will almost always be a subset of data from the
|
|
1252
|
+
* {@link StaticHandlerContext} value you get back from {@link StaticHandler}'s
|
|
1253
|
+
* `query` method:
|
|
1203
1254
|
*
|
|
1204
1255
|
* ```tsx
|
|
1205
1256
|
* const router = createBrowserRouter(routes, {
|
|
@@ -1216,18 +1267,23 @@ interface DOMRouterOpts {
|
|
|
1216
1267
|
*
|
|
1217
1268
|
* You will almost always include a complete set of `loaderData` to hydrate a
|
|
1218
1269
|
* server-rendered app. But in advanced use-cases (such as Framework Mode's
|
|
1219
|
-
* `clientLoader`), you may
|
|
1220
|
-
*
|
|
1221
|
-
* of the routes (such as the
|
|
1222
|
-
*
|
|
1223
|
-
*
|
|
1224
|
-
*
|
|
1225
|
-
*
|
|
1226
|
-
*
|
|
1227
|
-
*
|
|
1228
|
-
*
|
|
1229
|
-
*
|
|
1230
|
-
*
|
|
1270
|
+
* [`clientLoader`](../../start/framework/route-module#clientLoader)), you may
|
|
1271
|
+
* want to include `loaderData` for only some routes that were loaded/rendered
|
|
1272
|
+
* on the server. This allows you to hydrate _some_ of the routes (such as the
|
|
1273
|
+
* app layout/shell) while showing a `HydrateFallback` component and running
|
|
1274
|
+
* the [`loader`](../../start/data/route-object#loader)s for other routes
|
|
1275
|
+
* during hydration.
|
|
1276
|
+
*
|
|
1277
|
+
* A route [`loader`](../../start/data/route-object#loader) will run during
|
|
1278
|
+
* hydration in two scenarios:
|
|
1279
|
+
*
|
|
1280
|
+
* 1. No hydration data is provided
|
|
1281
|
+
* In these cases the `HydrateFallback` component will render on initial
|
|
1282
|
+
* hydration
|
|
1283
|
+
* 2. The `loader.hydrate` property is set to `true`
|
|
1284
|
+
* This allows you to run the [`loader`](../../start/data/route-object#loader)
|
|
1285
|
+
* even if you did not render a fallback on initial hydration (i.e., to
|
|
1286
|
+
* prime a cache with hydration data)
|
|
1231
1287
|
*
|
|
1232
1288
|
* ```tsx
|
|
1233
1289
|
* const router = createBrowserRouter(
|
|
@@ -1263,31 +1319,36 @@ interface DOMRouterOpts {
|
|
|
1263
1319
|
* See {@link DataStrategyFunction}.
|
|
1264
1320
|
*
|
|
1265
1321
|
* <docs-warning>This is a low-level API intended for advanced use-cases. This
|
|
1266
|
-
* overrides React Router's internal handling of
|
|
1267
|
-
*
|
|
1268
|
-
* and
|
|
1322
|
+
* overrides React Router's internal handling of
|
|
1323
|
+
* [`action`](../../start/data/route-object#action)/[`loader`](../../start/data/route-object#loader)
|
|
1324
|
+
* execution, and if done incorrectly will break your app code. Please use
|
|
1325
|
+
* with caution and perform the appropriate testing.</docs-warning>
|
|
1269
1326
|
*
|
|
1270
1327
|
* By default, React Router is opinionated about how your data is loaded/submitted -
|
|
1271
|
-
* and most notably, executes all of your
|
|
1272
|
-
* fetching. While we think this is the right
|
|
1273
|
-
* realize that there is no "one size fits all"
|
|
1274
|
-
* fetching for the wide landscape of
|
|
1275
|
-
*
|
|
1276
|
-
*
|
|
1277
|
-
*
|
|
1278
|
-
*
|
|
1279
|
-
*
|
|
1280
|
-
*
|
|
1281
|
-
*
|
|
1282
|
-
*
|
|
1283
|
-
*
|
|
1284
|
-
*
|
|
1285
|
-
*
|
|
1286
|
-
*
|
|
1287
|
-
*
|
|
1288
|
-
*
|
|
1289
|
-
*
|
|
1290
|
-
*
|
|
1328
|
+
* and most notably, executes all of your [`loader`](../../start/data/route-object#loader)s
|
|
1329
|
+
* in parallel for optimal data fetching. While we think this is the right
|
|
1330
|
+
* behavior for most use-cases, we realize that there is no "one size fits all"
|
|
1331
|
+
* solution when it comes to data fetching for the wide landscape of
|
|
1332
|
+
* application requirements.
|
|
1333
|
+
*
|
|
1334
|
+
* The `dataStrategy` option gives you full control over how your [`action`](../../start/data/route-object#action)s
|
|
1335
|
+
* and [`loader`](../../start/data/route-object#loader)s are executed and lays
|
|
1336
|
+
* the foundation to build in more advanced APIs such as middleware, context,
|
|
1337
|
+
* and caching layers. Over time, we expect that we'll leverage this API
|
|
1338
|
+
* internally to bring more first class APIs to React Router, but until then
|
|
1339
|
+
* (and beyond), this is your way to add more advanced functionality for your
|
|
1340
|
+
* application's data needs.
|
|
1341
|
+
*
|
|
1342
|
+
* The `dataStrategy` function should return a key/value-object of
|
|
1343
|
+
* `routeId` -> {@link DataStrategyResult} and should include entries for any
|
|
1344
|
+
* routes where a handler was executed. A `DataStrategyResult` indicates if
|
|
1345
|
+
* the handler was successful or not based on the `DataStrategyResult.type`
|
|
1346
|
+
* field. If the returned `DataStrategyResult.result` is a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response),
|
|
1347
|
+
* React Router will unwrap it for you (via [`res.json`](https://developer.mozilla.org/en-US/docs/Web/API/Response/json)
|
|
1348
|
+
* or [`res.text`](https://developer.mozilla.org/en-US/docs/Web/API/Response/text)).
|
|
1349
|
+
* If you need to do custom decoding of a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
|
|
1350
|
+
* but want to preserve the status code, you can use the `data` utility to
|
|
1351
|
+
* return your decoded data along with a `ResponseInit`.
|
|
1291
1352
|
*
|
|
1292
1353
|
* <details>
|
|
1293
1354
|
* <summary><b>Example <code>dataStrategy</code> Use Cases</b></summary>
|
|
@@ -1295,13 +1356,14 @@ interface DOMRouterOpts {
|
|
|
1295
1356
|
* **Adding logging**
|
|
1296
1357
|
*
|
|
1297
1358
|
* In the simplest case, let's look at hooking into this API to add some logging
|
|
1298
|
-
* for when our route
|
|
1359
|
+
* for when our route [`action`](../../start/data/route-object#action)s/[`loader`](../../start/data/route-object#loader)s
|
|
1360
|
+
* execute:
|
|
1299
1361
|
*
|
|
1300
|
-
* ```
|
|
1362
|
+
* ```tsx
|
|
1301
1363
|
* let router = createBrowserRouter(routes, {
|
|
1302
|
-
* async dataStrategy({
|
|
1364
|
+
* async dataStrategy({ matches, request }) {
|
|
1303
1365
|
* const matchesToLoad = matches.filter((m) => m.shouldLoad);
|
|
1304
|
-
* const results = {};
|
|
1366
|
+
* const results: Record<string, DataStrategyResult> = {};
|
|
1305
1367
|
* await Promise.all(
|
|
1306
1368
|
* matchesToLoad.map(async (match) => {
|
|
1307
1369
|
* console.log(`Processing ${match.route.id}`);
|
|
@@ -1315,9 +1377,10 @@ interface DOMRouterOpts {
|
|
|
1315
1377
|
*
|
|
1316
1378
|
* **Middleware**
|
|
1317
1379
|
*
|
|
1318
|
-
* Let's define a middleware on each route via `handle`
|
|
1319
|
-
* sequentially first, then call all
|
|
1320
|
-
*
|
|
1380
|
+
* Let's define a middleware on each route via [`handle`](../../start/data/route-object#handle)
|
|
1381
|
+
* and call middleware sequentially first, then call all
|
|
1382
|
+
* [`loader`](../../start/data/route-object#loader)s in parallel - providing
|
|
1383
|
+
* any data made available via the middleware:
|
|
1321
1384
|
*
|
|
1322
1385
|
* ```ts
|
|
1323
1386
|
* const routes = [
|
|
@@ -1350,7 +1413,7 @@ interface DOMRouterOpts {
|
|
|
1350
1413
|
* ];
|
|
1351
1414
|
*
|
|
1352
1415
|
* let router = createBrowserRouter(routes, {
|
|
1353
|
-
* async dataStrategy({
|
|
1416
|
+
* async dataStrategy({ matches, params, request }) {
|
|
1354
1417
|
* // Run middleware sequentially and let them add data to `context`
|
|
1355
1418
|
* let context = {};
|
|
1356
1419
|
* for (const match of matches) {
|
|
@@ -1386,11 +1449,11 @@ interface DOMRouterOpts {
|
|
|
1386
1449
|
*
|
|
1387
1450
|
* **Custom Handler**
|
|
1388
1451
|
*
|
|
1389
|
-
* It's also possible you don't even want to define a loader
|
|
1390
|
-
* the route level. Maybe you want to just determine the
|
|
1391
|
-
* GraphQL request for all of your data? You can do
|
|
1392
|
-
* `route.loader=true` so it qualifies as "having a
|
|
1393
|
-
* fragments on `route.handle`:
|
|
1452
|
+
* It's also possible you don't even want to define a [`loader`](../../start/data/route-object#loader)
|
|
1453
|
+
* implementation at the route level. Maybe you want to just determine the
|
|
1454
|
+
* routes and issue a single GraphQL request for all of your data? You can do
|
|
1455
|
+
* that by setting your `route.loader=true` so it qualifies as "having a
|
|
1456
|
+
* loader", and then store GQL fragments on `route.handle`:
|
|
1394
1457
|
*
|
|
1395
1458
|
* ```ts
|
|
1396
1459
|
* const routes = [
|
|
@@ -1423,7 +1486,7 @@ interface DOMRouterOpts {
|
|
|
1423
1486
|
* ];
|
|
1424
1487
|
*
|
|
1425
1488
|
* let router = createBrowserRouter(routes, {
|
|
1426
|
-
* async dataStrategy({
|
|
1489
|
+
* async dataStrategy({ matches, params, request }) {
|
|
1427
1490
|
* // Compose route fragments into a single GQL payload
|
|
1428
1491
|
* let gql = getFragmentsFromRouteHandles(matches);
|
|
1429
1492
|
* let data = await fetchGql(gql);
|
|
@@ -1445,37 +1508,39 @@ interface DOMRouterOpts {
|
|
|
1445
1508
|
* `createBrowserRouter(routes)`. This allows React Router to perform synchronous
|
|
1446
1509
|
* route matching, execute loaders, and then render route components in the most
|
|
1447
1510
|
* optimistic manner without introducing waterfalls. The tradeoff is that your
|
|
1448
|
-
* initial JS bundle is larger by definition
|
|
1511
|
+
* initial JS bundle is larger by definition — which may slow down application
|
|
1449
1512
|
* start-up times as your application grows.
|
|
1450
1513
|
*
|
|
1451
|
-
* To combat this, we introduced [`route.lazy`]
|
|
1452
|
-
*
|
|
1453
|
-
*
|
|
1454
|
-
* `
|
|
1455
|
-
*
|
|
1456
|
-
*
|
|
1514
|
+
* To combat this, we introduced [`route.lazy`](../../start/data/route-object#lazy)
|
|
1515
|
+
* in [v6.9.0](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v690)
|
|
1516
|
+
* which lets you lazily load the route _implementation_ ([`loader`](../../start/data/route-object#loader),
|
|
1517
|
+
* [`Component`](../../start/data/route-object#Component), etc.) while still
|
|
1518
|
+
* providing the route _definition_ aspects up front (`path`, `index`, etc.).
|
|
1519
|
+
* This is a good middle ground. React Router still knows about your route
|
|
1520
|
+
* definitions (the lightweight part) up front and can perform synchronous
|
|
1521
|
+
* route matching, but then delay loading any of the route implementation
|
|
1457
1522
|
* aspects (the heavier part) until the route is actually navigated to.
|
|
1458
1523
|
*
|
|
1459
|
-
* In some cases, even this doesn't go far enough. For
|
|
1524
|
+
* In some cases, even this doesn't go far enough. For huge applications,
|
|
1460
1525
|
* providing all route definitions up front can be prohibitively expensive.
|
|
1461
1526
|
* Additionally, it might not even be possible to provide all route definitions
|
|
1462
1527
|
* up front in certain Micro-Frontend or Module-Federation architectures.
|
|
1463
1528
|
*
|
|
1464
|
-
* This is where `patchRoutesOnNavigation` comes in ([RFC]
|
|
1529
|
+
* This is where `patchRoutesOnNavigation` comes in ([RFC](https://github.com/remix-run/react-router/discussions/11113)).
|
|
1465
1530
|
* This API is for advanced use-cases where you are unable to provide the full
|
|
1466
1531
|
* route tree up-front and need a way to lazily "discover" portions of the route
|
|
1467
|
-
* tree at runtime. This feature is often referred to as ["Fog of War"]
|
|
1532
|
+
* tree at runtime. This feature is often referred to as ["Fog of War"](https://en.wikipedia.org/wiki/Fog_of_war),
|
|
1468
1533
|
* because similar to how video games expand the "world" as you move around -
|
|
1469
1534
|
* the router would be expanding its routing tree as the user navigated around
|
|
1470
1535
|
* the app - but would only ever end up loading portions of the tree that the
|
|
1471
1536
|
* user visited.
|
|
1472
1537
|
*
|
|
1473
1538
|
* `patchRoutesOnNavigation` will be called anytime React Router is unable to
|
|
1474
|
-
* match a `path`. The arguments include the `path`, any partial `matches`,
|
|
1475
|
-
* a `patch` function you can call to patch new routes into the tree at a
|
|
1539
|
+
* match a `path`. The arguments include the `path`, any partial `matches`,
|
|
1540
|
+
* and a `patch` function you can call to patch new routes into the tree at a
|
|
1476
1541
|
* specific location. This method is executed during the `loading` portion of
|
|
1477
|
-
* the navigation for `GET` requests and during the `submitting` portion of
|
|
1478
|
-
* navigation for non-`GET` requests.
|
|
1542
|
+
* the navigation for `GET` requests and during the `submitting` portion of
|
|
1543
|
+
* the navigation for non-`GET` requests.
|
|
1479
1544
|
*
|
|
1480
1545
|
* <details>
|
|
1481
1546
|
* <summary><b>Example <code>patchRoutesOnNavigation</code> Use Cases</b></summary>
|
|
@@ -1492,7 +1557,7 @@ interface DOMRouterOpts {
|
|
|
1492
1557
|
* },
|
|
1493
1558
|
* ],
|
|
1494
1559
|
* {
|
|
1495
|
-
* async patchRoutesOnNavigation({
|
|
1560
|
+
* async patchRoutesOnNavigation({ patch, path }) {
|
|
1496
1561
|
* if (path === "/a") {
|
|
1497
1562
|
* // Load/patch the `a` route as a child of the route with id `root`
|
|
1498
1563
|
* let route = await getARoute();
|
|
@@ -1504,13 +1569,13 @@ interface DOMRouterOpts {
|
|
|
1504
1569
|
* );
|
|
1505
1570
|
* ```
|
|
1506
1571
|
*
|
|
1507
|
-
* In the above example, if the user clicks a link to `/a`, React Router
|
|
1508
|
-
* match any routes initially and will call `patchRoutesOnNavigation`
|
|
1509
|
-
* `path = "/a"` and a `matches` array containing the root route
|
|
1510
|
-
* `patch('root', [route])`, the new route will be added
|
|
1511
|
-
* child of the `root` route and React Router will
|
|
1512
|
-
* routes. This time it will successfully
|
|
1513
|
-
* will complete successfully.
|
|
1572
|
+
* In the above example, if the user clicks a link to `/a`, React Router
|
|
1573
|
+
* won't match any routes initially and will call `patchRoutesOnNavigation`
|
|
1574
|
+
* with a `path = "/a"` and a `matches` array containing the root route
|
|
1575
|
+
* match. By calling `patch('root', [route])`, the new route will be added
|
|
1576
|
+
* to the route tree as a child of the `root` route and React Router will
|
|
1577
|
+
* perform matching on the updated routes. This time it will successfully
|
|
1578
|
+
* match the `/a` path and the navigation will complete successfully.
|
|
1514
1579
|
*
|
|
1515
1580
|
* **Patching new root-level routes**
|
|
1516
1581
|
*
|
|
@@ -1527,7 +1592,7 @@ interface DOMRouterOpts {
|
|
|
1527
1592
|
* },
|
|
1528
1593
|
* ],
|
|
1529
1594
|
* {
|
|
1530
|
-
* async patchRoutesOnNavigation({
|
|
1595
|
+
* async patchRoutesOnNavigation({ patch, path }) {
|
|
1531
1596
|
* if (path === "/root-sibling") {
|
|
1532
1597
|
* // Load/patch the `/root-sibling` route as a sibling of the root route
|
|
1533
1598
|
* let route = await getRootSiblingRoute();
|
|
@@ -1539,12 +1604,12 @@ interface DOMRouterOpts {
|
|
|
1539
1604
|
* );
|
|
1540
1605
|
* ```
|
|
1541
1606
|
*
|
|
1542
|
-
* **Patching
|
|
1607
|
+
* **Patching subtrees asynchronously**
|
|
1543
1608
|
*
|
|
1544
1609
|
* You can also perform asynchronous matching to lazily fetch entire sections
|
|
1545
|
-
*
|
|
1610
|
+
* of your application:
|
|
1546
1611
|
*
|
|
1547
|
-
* ```
|
|
1612
|
+
* ```tsx
|
|
1548
1613
|
* let router = createBrowserRouter(
|
|
1549
1614
|
* [
|
|
1550
1615
|
* {
|
|
@@ -1553,7 +1618,7 @@ interface DOMRouterOpts {
|
|
|
1553
1618
|
* },
|
|
1554
1619
|
* ],
|
|
1555
1620
|
* {
|
|
1556
|
-
* async patchRoutesOnNavigation({
|
|
1621
|
+
* async patchRoutesOnNavigation({ patch, path }) {
|
|
1557
1622
|
* if (path.startsWith("/dashboard")) {
|
|
1558
1623
|
* let children = await import("./dashboard");
|
|
1559
1624
|
* patch(null, children);
|
|
@@ -1568,17 +1633,17 @@ interface DOMRouterOpts {
|
|
|
1568
1633
|
* ```
|
|
1569
1634
|
*
|
|
1570
1635
|
* <docs-info>If in-progress execution of `patchRoutesOnNavigation` is
|
|
1571
|
-
* interrupted by a
|
|
1572
|
-
*
|
|
1636
|
+
* interrupted by a later navigation, then any remaining `patch` calls in
|
|
1637
|
+
* the interrupted execution will not update the route tree because the
|
|
1573
1638
|
* operation was cancelled.</docs-info>
|
|
1574
1639
|
*
|
|
1575
1640
|
* **Co-locating route discovery with route definition**
|
|
1576
1641
|
*
|
|
1577
|
-
* If you don't wish to perform your own pseudo-matching, you can leverage
|
|
1578
|
-
* partial `matches` array and the `handle`
|
|
1579
|
-
* definitions co-located:
|
|
1642
|
+
* If you don't wish to perform your own pseudo-matching, you can leverage
|
|
1643
|
+
* the partial `matches` array and the [`handle`](../../start/data/route-object#handle)
|
|
1644
|
+
* field on a route to keep the children definitions co-located:
|
|
1580
1645
|
*
|
|
1581
|
-
* ```
|
|
1646
|
+
* ```tsx
|
|
1582
1647
|
* let router = createBrowserRouter(
|
|
1583
1648
|
* [
|
|
1584
1649
|
* {
|
|
@@ -1629,18 +1694,19 @@ interface DOMRouterOpts {
|
|
|
1629
1694
|
*
|
|
1630
1695
|
* **A note on routes with parameters**
|
|
1631
1696
|
*
|
|
1632
|
-
* Because React Router uses ranked routes to find the best match for a
|
|
1633
|
-
* path, there is an interesting ambiguity introduced when only a
|
|
1634
|
-
* tree is known at any given point in time. If we match a
|
|
1635
|
-
* such as `path: "/about/contact-us"` then we know we've
|
|
1636
|
-
* since it's composed entirely of static URL segments
|
|
1637
|
-
* to bother asking for any other potentially
|
|
1697
|
+
* Because React Router uses ranked routes to find the best match for a
|
|
1698
|
+
* given path, there is an interesting ambiguity introduced when only a
|
|
1699
|
+
* partial route tree is known at any given point in time. If we match a
|
|
1700
|
+
* fully static route such as `path: "/about/contact-us"` then we know we've
|
|
1701
|
+
* found the right match since it's composed entirely of static URL segments.
|
|
1702
|
+
* Thus, we do not need to bother asking for any other potentially
|
|
1703
|
+
* higher-scoring routes.
|
|
1638
1704
|
*
|
|
1639
|
-
* However, routes with parameters (dynamic or splat) can't make this
|
|
1640
|
-
* because there might be a not-yet-discovered route
|
|
1641
|
-
* a full route tree such as:
|
|
1705
|
+
* However, routes with parameters (dynamic or splat) can't make this
|
|
1706
|
+
* assumption because there might be a not-yet-discovered route that scores
|
|
1707
|
+
* higher. Consider a full route tree such as:
|
|
1642
1708
|
*
|
|
1643
|
-
* ```
|
|
1709
|
+
* ```tsx
|
|
1644
1710
|
* // Assume this is the full route tree for your app
|
|
1645
1711
|
* const routes = [
|
|
1646
1712
|
* {
|
|
@@ -1662,7 +1728,7 @@ interface DOMRouterOpts {
|
|
|
1662
1728
|
* And then assume we want to use `patchRoutesOnNavigation` to fill this in
|
|
1663
1729
|
* as the user navigates around:
|
|
1664
1730
|
*
|
|
1665
|
-
* ```
|
|
1731
|
+
* ```tsx
|
|
1666
1732
|
* // Start with only the index route
|
|
1667
1733
|
* const router = createBrowserRouter(
|
|
1668
1734
|
* [
|
|
@@ -1672,7 +1738,7 @@ interface DOMRouterOpts {
|
|
|
1672
1738
|
* },
|
|
1673
1739
|
* ],
|
|
1674
1740
|
* {
|
|
1675
|
-
* patchRoutesOnNavigation({
|
|
1741
|
+
* async patchRoutesOnNavigation({ patch, path }) {
|
|
1676
1742
|
* if (path === "/blog/new") {
|
|
1677
1743
|
* patch("blog", [
|
|
1678
1744
|
* {
|
|
@@ -1693,28 +1759,30 @@ interface DOMRouterOpts {
|
|
|
1693
1759
|
* );
|
|
1694
1760
|
* ```
|
|
1695
1761
|
*
|
|
1696
|
-
* If the user were to a blog post first (i.e., `/blog/my-post`) we would
|
|
1697
|
-
* in the `:slug` route. Then if the user navigated to `/blog/new` to
|
|
1698
|
-
* new post, we'd match `/blog/:slug` but it wouldn't be the _right_
|
|
1699
|
-
* We need to call `patchRoutesOnNavigation` just in case there
|
|
1700
|
-
* higher-scoring route we've not yet discovered, which in this
|
|
1762
|
+
* If the user were to a blog post first (i.e., `/blog/my-post`) we would
|
|
1763
|
+
* patch in the `:slug` route. Then, if the user navigated to `/blog/new` to
|
|
1764
|
+
* write a new post, we'd match `/blog/:slug` but it wouldn't be the _right_
|
|
1765
|
+
* match! We need to call `patchRoutesOnNavigation` just in case there
|
|
1766
|
+
* exists a higher-scoring route we've not yet discovered, which in this
|
|
1767
|
+
* case there is.
|
|
1701
1768
|
*
|
|
1702
1769
|
* So, anytime React Router matches a path that contains at least one param,
|
|
1703
1770
|
* it will call `patchRoutesOnNavigation` and match routes again just to
|
|
1704
1771
|
* confirm it has found the best match.
|
|
1705
1772
|
*
|
|
1706
1773
|
* If your `patchRoutesOnNavigation` implementation is expensive or making
|
|
1707
|
-
* side
|
|
1708
|
-
*
|
|
1709
|
-
*
|
|
1710
|
-
*
|
|
1774
|
+
* side effect [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch)
|
|
1775
|
+
* calls to a backend server, you may want to consider tracking previously
|
|
1776
|
+
* seen routes to avoid over-fetching in cases where you know the proper
|
|
1777
|
+
* route has already been found. This can usually be as simple as
|
|
1778
|
+
* maintaining a small cache of prior `path` values for which you've already
|
|
1711
1779
|
* patched in the right routes:
|
|
1712
1780
|
*
|
|
1713
|
-
* ```
|
|
1781
|
+
* ```tsx
|
|
1714
1782
|
* let discoveredRoutes = new Set();
|
|
1715
1783
|
*
|
|
1716
1784
|
* const router = createBrowserRouter(routes, {
|
|
1717
|
-
* patchRoutesOnNavigation({
|
|
1785
|
+
* async patchRoutesOnNavigation({ patch, path }) {
|
|
1718
1786
|
* if (discoveredRoutes.has(path)) {
|
|
1719
1787
|
* // We've seen this before so nothing to patch in and we can let the router
|
|
1720
1788
|
* // use the routes it already knows about
|
|
@@ -1732,7 +1800,7 @@ interface DOMRouterOpts {
|
|
|
1732
1800
|
patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
|
|
1733
1801
|
/**
|
|
1734
1802
|
* [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
|
|
1735
|
-
* override
|
|
1803
|
+
* override. Defaults to the global `window` instance.
|
|
1736
1804
|
*/
|
|
1737
1805
|
window?: Window;
|
|
1738
1806
|
}
|
|
@@ -1779,8 +1847,18 @@ declare function createHashRouter(routes: RouteObject[], opts?: DOMRouterOpts):
|
|
|
1779
1847
|
* @category Types
|
|
1780
1848
|
*/
|
|
1781
1849
|
interface BrowserRouterProps {
|
|
1850
|
+
/**
|
|
1851
|
+
* Application basename
|
|
1852
|
+
*/
|
|
1782
1853
|
basename?: string;
|
|
1854
|
+
/**
|
|
1855
|
+
* {@link Route | `<Route>`} components describing your route configuration
|
|
1856
|
+
*/
|
|
1783
1857
|
children?: React.ReactNode;
|
|
1858
|
+
/**
|
|
1859
|
+
* [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
|
|
1860
|
+
* override. Defaults to the global `window` instance
|
|
1861
|
+
*/
|
|
1784
1862
|
window?: Window;
|
|
1785
1863
|
}
|
|
1786
1864
|
/**
|
|
@@ -1791,10 +1869,9 @@ interface BrowserRouterProps {
|
|
|
1791
1869
|
* @category Declarative Routers
|
|
1792
1870
|
* @mode declarative
|
|
1793
1871
|
* @param props Props
|
|
1794
|
-
* @param props.basename
|
|
1795
|
-
* @param
|
|
1796
|
-
* @param props.window
|
|
1797
|
-
* object override - defaults to the global `window` instance
|
|
1872
|
+
* @param {BrowserRouterProps.basename} props.basename n/a
|
|
1873
|
+
* @param {BrowserRouterProps.children} props.children n/a
|
|
1874
|
+
* @param {BrowserRouterProps.window} props.window n/a
|
|
1798
1875
|
* @returns A declarative {@link Router | `<Router>`} using the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
|
|
1799
1876
|
* API for client-side routing.
|
|
1800
1877
|
*/
|
|
@@ -1803,8 +1880,18 @@ declare function BrowserRouter({ basename, children, window, }: BrowserRouterPro
|
|
|
1803
1880
|
* @category Types
|
|
1804
1881
|
*/
|
|
1805
1882
|
interface HashRouterProps {
|
|
1883
|
+
/**
|
|
1884
|
+
* Application basename
|
|
1885
|
+
*/
|
|
1806
1886
|
basename?: string;
|
|
1887
|
+
/**
|
|
1888
|
+
* {@link Route | `<Route>`} components describing your route configuration
|
|
1889
|
+
*/
|
|
1807
1890
|
children?: React.ReactNode;
|
|
1891
|
+
/**
|
|
1892
|
+
* [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
|
|
1893
|
+
* override. Defaults to the global `window` instance
|
|
1894
|
+
*/
|
|
1808
1895
|
window?: Window;
|
|
1809
1896
|
}
|
|
1810
1897
|
/**
|
|
@@ -1816,10 +1903,9 @@ interface HashRouterProps {
|
|
|
1816
1903
|
* @category Declarative Routers
|
|
1817
1904
|
* @mode declarative
|
|
1818
1905
|
* @param props Props
|
|
1819
|
-
* @param props.basename
|
|
1820
|
-
* @param
|
|
1821
|
-
* @param props.window
|
|
1822
|
-
* object override - defaults to the global `window` instance
|
|
1906
|
+
* @param {HashRouterProps.basename} props.basename n/a
|
|
1907
|
+
* @param {HashRouterProps.children} props.children n/a
|
|
1908
|
+
* @param {HashRouterProps.window} props.window n/a
|
|
1823
1909
|
* @returns A declarative {@link Router | `<Router>`} using the URL [`hash`](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash)
|
|
1824
1910
|
* for client-side routing.
|
|
1825
1911
|
*/
|
|
@@ -1828,8 +1914,17 @@ declare function HashRouter({ basename, children, window }: HashRouterProps): Re
|
|
|
1828
1914
|
* @category Types
|
|
1829
1915
|
*/
|
|
1830
1916
|
interface HistoryRouterProps {
|
|
1917
|
+
/**
|
|
1918
|
+
* Application basename
|
|
1919
|
+
*/
|
|
1831
1920
|
basename?: string;
|
|
1921
|
+
/**
|
|
1922
|
+
* {@link Route | `<Route>`} components describing your route configuration
|
|
1923
|
+
*/
|
|
1832
1924
|
children?: React.ReactNode;
|
|
1925
|
+
/**
|
|
1926
|
+
* A {@link History} implementation for use by the router
|
|
1927
|
+
*/
|
|
1833
1928
|
history: History;
|
|
1834
1929
|
}
|
|
1835
1930
|
/**
|
|
@@ -1844,10 +1939,11 @@ interface HistoryRouterProps {
|
|
|
1844
1939
|
* @category Declarative Routers
|
|
1845
1940
|
* @mode declarative
|
|
1846
1941
|
* @param props Props
|
|
1847
|
-
* @param props.basename
|
|
1848
|
-
* @param
|
|
1849
|
-
* @param
|
|
1850
|
-
* @returns A declarative
|
|
1942
|
+
* @param {HistoryRouterProps.basename} props.basename n/a
|
|
1943
|
+
* @param {HistoryRouterProps.children} props.children n/a
|
|
1944
|
+
* @param {HistoryRouterProps.history} props.history n/a
|
|
1945
|
+
* @returns A declarative {@link Router | `<Router>`} using the provided history
|
|
1946
|
+
* implementation for client-side routing.
|
|
1851
1947
|
*/
|
|
1852
1948
|
declare function HistoryRouter({ basename, children, history, }: HistoryRouterProps): React.JSX.Element;
|
|
1853
1949
|
declare namespace HistoryRouter {
|
|
@@ -1866,8 +1962,8 @@ interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>,
|
|
|
1866
1962
|
* <Link discover="none" />
|
|
1867
1963
|
* ```
|
|
1868
1964
|
*
|
|
1869
|
-
* - **render**
|
|
1870
|
-
* - **none**
|
|
1965
|
+
* - **render** — default, discover the route when the link renders
|
|
1966
|
+
* - **none** — don't eagerly discover, only discover if the link is clicked
|
|
1871
1967
|
*/
|
|
1872
1968
|
discover?: DiscoverBehavior;
|
|
1873
1969
|
/**
|
|
@@ -1881,10 +1977,10 @@ interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>,
|
|
|
1881
1977
|
* <Link prefetch="viewport" />
|
|
1882
1978
|
* ```
|
|
1883
1979
|
*
|
|
1884
|
-
* - **none**
|
|
1885
|
-
* - **intent**
|
|
1886
|
-
* - **render**
|
|
1887
|
-
* - **viewport**
|
|
1980
|
+
* - **none** — default, no prefetching
|
|
1981
|
+
* - **intent** — prefetches when the user hovers or focuses the link
|
|
1982
|
+
* - **render** — prefetches when the link renders
|
|
1983
|
+
* - **viewport** — prefetches when the link is in the viewport, very useful for mobile
|
|
1888
1984
|
*
|
|
1889
1985
|
* Prefetching is done with HTML [`<link rel="prefetch">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
|
|
1890
1986
|
* tags. They are inserted after the link.
|
|
@@ -1912,7 +2008,7 @@ interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>,
|
|
|
1912
2008
|
reloadDocument?: boolean;
|
|
1913
2009
|
/**
|
|
1914
2010
|
* Replaces the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
|
|
1915
|
-
* stack instead of pushing a new one
|
|
2011
|
+
* stack instead of pushing a new one onto it.
|
|
1916
2012
|
*
|
|
1917
2013
|
* ```tsx
|
|
1918
2014
|
* <Link replace />
|
|
@@ -1973,10 +2069,10 @@ interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>,
|
|
|
1973
2069
|
* Consider a route hierarchy where a parent route pattern is `"blog"` and a child
|
|
1974
2070
|
* route pattern is `"blog/:slug/edit"`.
|
|
1975
2071
|
*
|
|
1976
|
-
* - **route**
|
|
1977
|
-
* example above, a relative link of `"
|
|
2072
|
+
* - **route** — default, resolves the link relative to the route pattern. In the
|
|
2073
|
+
* example above, a relative link of `"..."` will remove both `:slug/edit` segments
|
|
1978
2074
|
* back to `"/blog"`.
|
|
1979
|
-
* - **path**
|
|
2075
|
+
* - **path** — relative to the path so `"..."` will only remove one URL segment up
|
|
1980
2076
|
* to `"/blog/:slug"`
|
|
1981
2077
|
*
|
|
1982
2078
|
* Note that index routes and layout routes do not have paths so they are not
|
|
@@ -2228,11 +2324,11 @@ declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefA
|
|
|
2228
2324
|
*/
|
|
2229
2325
|
interface SharedFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
|
|
2230
2326
|
/**
|
|
2231
|
-
* The HTTP verb to use when the form is submitted. Supports "
|
|
2232
|
-
* "
|
|
2327
|
+
* The HTTP verb to use when the form is submitted. Supports `"delete"`,
|
|
2328
|
+
* `"get"`, `"patch"`, `"post"`, and `"put"`.
|
|
2233
2329
|
*
|
|
2234
2330
|
* Native [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
|
|
2235
|
-
* only supports `get` and `post`, avoid the other verbs if you'd like to
|
|
2331
|
+
* only supports `"get"` and `"post"`, avoid the other verbs if you'd like to
|
|
2236
2332
|
* support progressive enhancement
|
|
2237
2333
|
*/
|
|
2238
2334
|
method?: HTMLFormMethod;
|
|
@@ -2291,8 +2387,8 @@ interface FormProps extends SharedFormProps {
|
|
|
2291
2387
|
* <Link discover="none" />
|
|
2292
2388
|
* ```
|
|
2293
2389
|
*
|
|
2294
|
-
* - **render**
|
|
2295
|
-
* - **none**
|
|
2390
|
+
* - **render** — default, discover the route when the link renders
|
|
2391
|
+
* - **none** — don't eagerly discover, only discover if the link is clicked
|
|
2296
2392
|
*/
|
|
2297
2393
|
discover?: DiscoverBehavior;
|
|
2298
2394
|
/**
|
|
@@ -2331,7 +2427,7 @@ interface FormProps extends SharedFormProps {
|
|
|
2331
2427
|
}
|
|
2332
2428
|
/**
|
|
2333
2429
|
* A progressively enhanced HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
|
|
2334
|
-
* that submits data to actions via [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/
|
|
2430
|
+
* that submits data to actions via [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch),
|
|
2335
2431
|
* activating pending states in {@link useNavigation} which enables advanced
|
|
2336
2432
|
* user interfaces beyond a basic HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).
|
|
2337
2433
|
* After a form's `action` completes, all data on the page is automatically
|
|
@@ -2345,7 +2441,8 @@ interface FormProps extends SharedFormProps {
|
|
|
2345
2441
|
*
|
|
2346
2442
|
* `Form` is most useful for submissions that should also change the URL or
|
|
2347
2443
|
* otherwise add an entry to the browser history stack. For forms that shouldn't
|
|
2348
|
-
* manipulate the browser
|
|
2444
|
+
* manipulate the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
|
|
2445
|
+
* stack, use {@link FetcherWithComponents.Form | `<fetcher.Form>`}.
|
|
2349
2446
|
*
|
|
2350
2447
|
* @example
|
|
2351
2448
|
* import { Form } from "react-router";
|
|
@@ -2383,8 +2480,8 @@ type ScrollRestorationProps = ScriptsProps & {
|
|
|
2383
2480
|
/**
|
|
2384
2481
|
* A function that returns a key to use for scroll restoration. This is useful
|
|
2385
2482
|
* for custom scroll restoration logic, such as using only the pathname so
|
|
2386
|
-
* that
|
|
2387
|
-
*
|
|
2483
|
+
* that later navigations to prior paths will restore the scroll. Defaults to
|
|
2484
|
+
* `location.key`. See {@link GetScrollRestorationKeyFunction}.
|
|
2388
2485
|
*
|
|
2389
2486
|
* ```tsx
|
|
2390
2487
|
* <ScrollRestoration
|
|
@@ -2437,7 +2534,7 @@ type ScrollRestorationProps = ScriptsProps & {
|
|
|
2437
2534
|
* @param {ScrollRestorationProps.getKey} props.getKey n/a
|
|
2438
2535
|
* @param {ScriptsProps.nonce} props.nonce n/a
|
|
2439
2536
|
* @param {ScrollRestorationProps.storageKey} props.storageKey n/a
|
|
2440
|
-
* @returns A [
|
|
2537
|
+
* @returns A [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
|
|
2441
2538
|
* tag that restores scroll positions on navigation.
|
|
2442
2539
|
*/
|
|
2443
2540
|
declare function ScrollRestoration({ getKey, storageKey, ...props }: ScrollRestorationProps): React.JSX.Element | null;
|
|
@@ -2492,8 +2589,8 @@ declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to:
|
|
|
2492
2589
|
* ### `setSearchParams` function
|
|
2493
2590
|
*
|
|
2494
2591
|
* The second element of the tuple is a function that can be used to update the
|
|
2495
|
-
* search params. It accepts the same types as `defaultInit` and will
|
|
2496
|
-
*
|
|
2592
|
+
* search params. It accepts the same types as `defaultInit` and will cause a
|
|
2593
|
+
* navigation to the new URL.
|
|
2497
2594
|
*
|
|
2498
2595
|
* ```tsx
|
|
2499
2596
|
* let [searchParams, setSearchParams] = useSearchParams();
|
|
@@ -2514,7 +2611,8 @@ declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to:
|
|
|
2514
2611
|
* setSearchParams(new URLSearchParams("?tab=1"));
|
|
2515
2612
|
* ```
|
|
2516
2613
|
*
|
|
2517
|
-
* It also supports a function callback like React's
|
|
2614
|
+
* It also supports a function callback like React's
|
|
2615
|
+
* [`setState`](https://react.dev/reference/react/useState#setstate):
|
|
2518
2616
|
*
|
|
2519
2617
|
* ```tsx
|
|
2520
2618
|
* setSearchParams((searchParams) => {
|
|
@@ -2523,6 +2621,12 @@ declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to:
|
|
|
2523
2621
|
* });
|
|
2524
2622
|
* ```
|
|
2525
2623
|
*
|
|
2624
|
+
* <docs-warning>The function callback version of `setSearchParams` does not support
|
|
2625
|
+
* the [queueing](https://react.dev/reference/react/useState#setstate-parameters)
|
|
2626
|
+
* logic that React's `setState` implements. Multiple calls to `setSearchParams`
|
|
2627
|
+
* in the same tick will not build on the prior value. If you need this behavior,
|
|
2628
|
+
* you can use `setState` manually.</docs-warning>
|
|
2629
|
+
*
|
|
2526
2630
|
* ### Notes
|
|
2527
2631
|
*
|
|
2528
2632
|
* Note that `searchParams` is a stable reference, so you can reliably use it
|
|
@@ -2879,6 +2983,7 @@ type FetcherWithComponents<TData> = Fetcher<TData> & {
|
|
|
2879
2983
|
* @param options Options
|
|
2880
2984
|
* @param options.key A unique key to identify the fetcher.
|
|
2881
2985
|
*
|
|
2986
|
+
*
|
|
2882
2987
|
* By default, `useFetcher` generates a unique fetcher scoped to that component.
|
|
2883
2988
|
* If you want to identify a fetcher with your own key such that you can access
|
|
2884
2989
|
* it from elsewhere in your app, you can do that with the `key` option:
|
|
@@ -3033,7 +3138,8 @@ declare function usePrompt({ when, message, }: {
|
|
|
3033
3138
|
* @param to The {@link To} location to check for an active [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API).
|
|
3034
3139
|
* @param options Options
|
|
3035
3140
|
* @param options.relative The relative routing type to use when resolving the
|
|
3036
|
-
* `to` location, defaults to `"route"`. See {@link RelativeRoutingType} for
|
|
3141
|
+
* `to` location, defaults to `"route"`. See {@link RelativeRoutingType} for
|
|
3142
|
+
* more details.
|
|
3037
3143
|
* @returns `true` if there is an active [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
|
|
3038
3144
|
* to the specified {@link Location}, otherwise `false`.
|
|
3039
3145
|
*/
|
|
@@ -3041,34 +3147,64 @@ declare function useViewTransitionState(to: To, { relative }?: {
|
|
|
3041
3147
|
relative?: RelativeRoutingType;
|
|
3042
3148
|
}): boolean;
|
|
3043
3149
|
|
|
3150
|
+
/**
|
|
3151
|
+
* @category Types
|
|
3152
|
+
*/
|
|
3044
3153
|
interface StaticRouterProps {
|
|
3154
|
+
/**
|
|
3155
|
+
* The base URL for the static router (default: `/`)
|
|
3156
|
+
*/
|
|
3045
3157
|
basename?: string;
|
|
3158
|
+
/**
|
|
3159
|
+
* The child elements to render inside the static router
|
|
3160
|
+
*/
|
|
3046
3161
|
children?: React.ReactNode;
|
|
3162
|
+
/**
|
|
3163
|
+
* The {@link Location} to render the static router at (default: `/`)
|
|
3164
|
+
*/
|
|
3047
3165
|
location: Partial<Location> | string;
|
|
3048
3166
|
}
|
|
3049
3167
|
/**
|
|
3050
|
-
* A `<Router>` that may not navigate to any other
|
|
3051
|
-
* on the server where there is no stateful UI.
|
|
3168
|
+
* A {@link Router | `<Router>`} that may not navigate to any other {@link Location}.
|
|
3169
|
+
* This is useful on the server where there is no stateful UI.
|
|
3052
3170
|
*
|
|
3053
3171
|
* @public
|
|
3054
3172
|
* @category Declarative Routers
|
|
3055
3173
|
* @mode declarative
|
|
3056
3174
|
* @param props Props
|
|
3057
|
-
* @param props.basename
|
|
3058
|
-
* @param props.children
|
|
3059
|
-
* @param
|
|
3060
|
-
* @returns A React element that renders the static
|
|
3175
|
+
* @param {StaticRouterProps.basename} props.basename n/a
|
|
3176
|
+
* @param {StaticRouterProps.children} props.children n/a
|
|
3177
|
+
* @param {StaticRouterProps.location} props.location n/a
|
|
3178
|
+
* @returns A React element that renders the static {@link Router | `<Router>`}
|
|
3061
3179
|
*/
|
|
3062
3180
|
declare function StaticRouter({ basename, children, location: locationProp, }: StaticRouterProps): React.JSX.Element;
|
|
3181
|
+
/**
|
|
3182
|
+
* @category Types
|
|
3183
|
+
*/
|
|
3063
3184
|
interface StaticRouterProviderProps {
|
|
3185
|
+
/**
|
|
3186
|
+
* The {@link StaticHandlerContext} returned from {@link StaticHandler}'s
|
|
3187
|
+
* `query`
|
|
3188
|
+
*/
|
|
3064
3189
|
context: StaticHandlerContext;
|
|
3190
|
+
/**
|
|
3191
|
+
* The static {@link DataRouter} from {@link createStaticRouter}
|
|
3192
|
+
*/
|
|
3065
3193
|
router: Router$1;
|
|
3194
|
+
/**
|
|
3195
|
+
* Whether to hydrate the router on the client (default `true`)
|
|
3196
|
+
*/
|
|
3066
3197
|
hydrate?: boolean;
|
|
3198
|
+
/**
|
|
3199
|
+
* The [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
|
|
3200
|
+
* to use for the hydration [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
|
|
3201
|
+
* tag
|
|
3202
|
+
*/
|
|
3067
3203
|
nonce?: string;
|
|
3068
3204
|
}
|
|
3069
3205
|
/**
|
|
3070
|
-
* A
|
|
3071
|
-
* on the server where there is no stateful UI.
|
|
3206
|
+
* A {@link DataRouter} that may not navigate to any other {@link Location}.
|
|
3207
|
+
* This is useful on the server where there is no stateful UI.
|
|
3072
3208
|
*
|
|
3073
3209
|
* @example
|
|
3074
3210
|
* export async function handleRequest(request: Request) {
|
|
@@ -3090,11 +3226,10 @@ interface StaticRouterProviderProps {
|
|
|
3090
3226
|
* @category Data Routers
|
|
3091
3227
|
* @mode data
|
|
3092
3228
|
* @param props Props
|
|
3093
|
-
* @param
|
|
3094
|
-
* @param props.
|
|
3095
|
-
* @param props.
|
|
3096
|
-
* @param props.
|
|
3097
|
-
* to use for the hydration `<script>` tag
|
|
3229
|
+
* @param {StaticRouterProviderProps.context} props.context n/a
|
|
3230
|
+
* @param {StaticRouterProviderProps.hydrate} props.hydrate n/a
|
|
3231
|
+
* @param {StaticRouterProviderProps.nonce} props.nonce n/a
|
|
3232
|
+
* @param {StaticRouterProviderProps.router} props.router n/a
|
|
3098
3233
|
* @returns A React element that renders the static router provider
|
|
3099
3234
|
*/
|
|
3100
3235
|
declare function StaticRouterProvider({ context, router, hydrate, nonce, }: StaticRouterProviderProps): React.JSX.Element;
|
|
@@ -3105,7 +3240,7 @@ type CreateStaticHandlerOptions = Omit<CreateStaticHandlerOptions$1, "mapRoutePr
|
|
|
3105
3240
|
* @example
|
|
3106
3241
|
* export async function handleRequest(request: Request) {
|
|
3107
3242
|
* let { query, dataRoutes } = createStaticHandler(routes);
|
|
3108
|
-
* let context = await query(request)
|
|
3243
|
+
* let context = await query(request);
|
|
3109
3244
|
*
|
|
3110
3245
|
* if (context instanceof Response) {
|
|
3111
3246
|
* return context;
|
|
@@ -3121,20 +3256,22 @@ type CreateStaticHandlerOptions = Omit<CreateStaticHandlerOptions$1, "mapRoutePr
|
|
|
3121
3256
|
* @public
|
|
3122
3257
|
* @category Data Routers
|
|
3123
3258
|
* @mode data
|
|
3124
|
-
* @param routes The route objects to create a static
|
|
3259
|
+
* @param routes The {@link RouteObject | route objects} to create a static
|
|
3260
|
+
* handler for
|
|
3125
3261
|
* @param opts Options
|
|
3126
3262
|
* @param opts.basename The base URL for the static handler (default: `/`)
|
|
3127
3263
|
* @param opts.future Future flags for the static handler
|
|
3128
|
-
* @returns A static handler that can be used to query data for the provided
|
|
3264
|
+
* @returns A static handler that can be used to query data for the provided
|
|
3265
|
+
* routes
|
|
3129
3266
|
*/
|
|
3130
3267
|
declare function createStaticHandler(routes: RouteObject[], opts?: CreateStaticHandlerOptions): StaticHandler;
|
|
3131
3268
|
/**
|
|
3132
|
-
* Create a static
|
|
3269
|
+
* Create a static {@link DataRouter} for server-side rendering
|
|
3133
3270
|
*
|
|
3134
3271
|
* @example
|
|
3135
3272
|
* export async function handleRequest(request: Request) {
|
|
3136
3273
|
* let { query, dataRoutes } = createStaticHandler(routes);
|
|
3137
|
-
* let context = await query(request)
|
|
3274
|
+
* let context = await query(request);
|
|
3138
3275
|
*
|
|
3139
3276
|
* if (context instanceof Response) {
|
|
3140
3277
|
* return context;
|
|
@@ -3150,14 +3287,15 @@ declare function createStaticHandler(routes: RouteObject[], opts?: CreateStaticH
|
|
|
3150
3287
|
* @public
|
|
3151
3288
|
* @category Data Routers
|
|
3152
3289
|
* @mode data
|
|
3153
|
-
* @param routes The route objects to create a static
|
|
3154
|
-
* @param context The
|
|
3290
|
+
* @param routes The route objects to create a static {@link DataRouter} for
|
|
3291
|
+
* @param context The {@link StaticHandlerContext} returned from {@link StaticHandler}'s
|
|
3292
|
+
* `query`
|
|
3155
3293
|
* @param opts Options
|
|
3156
|
-
* @param opts.future Future flags for the static
|
|
3157
|
-
* @returns A static
|
|
3294
|
+
* @param opts.future Future flags for the static {@link DataRouter}
|
|
3295
|
+
* @returns A static {@link DataRouter} that can be used to render the provided routes
|
|
3158
3296
|
*/
|
|
3159
3297
|
declare function createStaticRouter(routes: RouteObject[], context: StaticHandlerContext, opts?: {
|
|
3160
3298
|
future?: Partial<FutureConfig$1>;
|
|
3161
3299
|
}): Router$1;
|
|
3162
3300
|
|
|
3163
|
-
export { ScrollRestoration as $, type AssetsManifest as A, type BrowserRouterProps as B, type ScrollRestorationProps as C, type DOMRouterOpts as D, type EntryContext as E, type FutureConfig as F, type SetURLSearchParams as G, type HydrateFallbackType as H, type IndexRouteProps as I, type SubmitFunction as J, type FetcherSubmitFunction as K, type LayoutRouteProps as L, type MemoryRouterOpts as M, type NavigateProps as N, type OutletProps as O, type PathRouteProps as P, type FetcherWithComponents as Q, type RouteComponentType as R, type ServerBuild as S, createBrowserRouter as T, createHashRouter as U, BrowserRouter as V, HashRouter as W, Link as X, HistoryRouter as Y, NavLink as Z, Form as _, type ErrorBoundaryType as a, useLinkClickHandler as a0, useSearchParams as a1, useSubmit as a2, useFormAction as a3, useFetcher as a4, useFetchers as a5, useBeforeUnload as a6, usePrompt as a7, useViewTransitionState as a8, type FetcherSubmitOptions as a9,
|
|
3301
|
+
export { ScrollRestoration as $, type AssetsManifest as A, type BrowserRouterProps as B, type ScrollRestorationProps as C, type DOMRouterOpts as D, type EntryContext as E, type FutureConfig as F, type SetURLSearchParams as G, type HydrateFallbackType as H, type IndexRouteProps as I, type SubmitFunction as J, type FetcherSubmitFunction as K, type LayoutRouteProps as L, type MemoryRouterOpts as M, type NavigateProps as N, type OutletProps as O, type PathRouteProps as P, type FetcherWithComponents as Q, type RouteComponentType as R, type ServerBuild as S, createBrowserRouter as T, createHashRouter as U, BrowserRouter as V, HashRouter as W, Link as X, HistoryRouter as Y, NavLink as Z, Form as _, type ErrorBoundaryType as a, useLinkClickHandler as a0, useSearchParams as a1, useSubmit as a2, useFormAction as a3, useFetcher as a4, useFetchers as a5, useBeforeUnload as a6, usePrompt as a7, useViewTransitionState as a8, type FetcherSubmitOptions as a9, withComponentProps as aA, WithHydrateFallbackProps as aB, withHydrateFallbackProps as aC, WithErrorBoundaryProps as aD, withErrorBoundaryProps as aE, FrameworkContext as aF, createClientRoutes as aG, createClientRoutesWithHMRRevalidationOptOut as aH, shouldHydrateRouteLoader as aI, useScrollRestoration as aJ, type ParamKeyValuePair as aa, type SubmitOptions as ab, type URLSearchParamsInit as ac, type SubmitTarget as ad, createSearchParams as ae, type StaticRouterProps as af, type StaticRouterProviderProps as ag, createStaticHandler as ah, createStaticRouter as ai, StaticRouter as aj, StaticRouterProvider as ak, Meta as al, Links as am, Scripts as an, PrefetchPageLinks as ao, type LinksProps as ap, type ScriptsProps as aq, type PrefetchBehavior as ar, type DiscoverBehavior as as, type HandleDataRequestFunction as at, type HandleDocumentRequestFunction as au, type HandleErrorFunction as av, type ServerEntryModule as aw, hydrationRouteProperties as ax, mapRouteProperties as ay, WithComponentProps as az, type AwaitProps as b, type MemoryRouterProps as c, type RouteProps as d, type RouterProps as e, type RouterProviderProps as f, type RoutesProps as g, Await as h, MemoryRouter as i, Navigate as j, Outlet as k, Route$1 as l, Router as m, RouterProvider as n, Routes as o, createMemoryRouter as p, createRoutesFromChildren as q, createRoutesFromElements as r, renderMatches as s, type HashRouterProps as t, type HistoryRouterProps as u, type LinkProps as v, type NavLinkProps as w, type NavLinkRenderProps as x, type FetcherFormProps as y, type FormProps as z };
|