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.
Files changed (66) hide show
  1. package/CHANGELOG.md +81 -5
  2. package/dist/development/browser-z32v5KVN.d.mts +46 -0
  3. package/dist/{production/chunk-K3SBCRK4.mjs → development/chunk-HSC5IU24.mjs} +177 -134
  4. package/dist/development/{chunk-K7YFBME3.js → chunk-IW6UADHO.js} +250 -187
  5. package/dist/development/{chunk-C37GKA54.mjs → chunk-SC4OUYO4.mjs} +232 -169
  6. package/dist/development/{chunk-R73PQUJU.js → chunk-Z4NNCWGU.js} +130 -130
  7. package/dist/development/{components-CjQijYga.d.mts → components-uUh0svuC.d.mts} +33 -21
  8. package/dist/{production/route-data-CqEmXQub.d.mts → development/context-DZWGFcKX.d.mts} +312 -524
  9. package/dist/development/dom-export.d.mts +16 -12
  10. package/dist/development/dom-export.d.ts +13 -8
  11. package/dist/development/dom-export.js +3 -3
  12. package/dist/development/dom-export.mjs +3 -3
  13. package/dist/{production/index-react-server-client-KLg-U4nr.d.mts → development/index-react-server-client-BUK-oRcG.d.mts} +327 -200
  14. package/dist/development/{index-react-server-client-Bi_fx8qz.d.ts → index-react-server-client-DSU6bZil.d.ts} +357 -219
  15. package/dist/development/index-react-server-client.d.mts +4 -3
  16. package/dist/development/index-react-server-client.d.ts +2 -2
  17. package/dist/development/index-react-server-client.js +4 -4
  18. package/dist/development/index-react-server-client.mjs +2 -2
  19. package/dist/development/index-react-server.d.mts +291 -70
  20. package/dist/development/index-react-server.d.ts +291 -70
  21. package/dist/development/index-react-server.js +174 -180
  22. package/dist/development/index-react-server.mjs +174 -180
  23. package/dist/development/index.d.mts +294 -86
  24. package/dist/development/index.d.ts +136 -105
  25. package/dist/development/index.js +258 -215
  26. package/dist/development/index.mjs +3 -3
  27. package/dist/development/lib/types/internal.d.mts +13 -2
  28. package/dist/development/lib/types/internal.d.ts +12 -2
  29. package/dist/development/lib/types/internal.js +1 -1
  30. package/dist/development/lib/types/internal.mjs +1 -1
  31. package/dist/development/route-data-UTmTa8an.d.mts +473 -0
  32. package/dist/{production/routeModules-BR2FO0ix.d.ts → development/routeModules-D5bppTB2.d.ts} +325 -67
  33. package/dist/production/browser-z32v5KVN.d.mts +46 -0
  34. package/dist/production/{chunk-4DGLNKXF.js → chunk-BCLZG6QW.js} +130 -130
  35. package/dist/{development/chunk-KIUJAIYX.mjs → production/chunk-KQ5567DT.mjs} +177 -134
  36. package/dist/production/{chunk-IZ57JD2V.mjs → chunk-X2NPJMV2.mjs} +232 -169
  37. package/dist/production/{chunk-7OQROU2D.js → chunk-YC2ENCM3.js} +250 -187
  38. package/dist/production/{components-CjQijYga.d.mts → components-uUh0svuC.d.mts} +33 -21
  39. package/dist/{development/route-data-CqEmXQub.d.mts → production/context-DZWGFcKX.d.mts} +312 -524
  40. package/dist/production/dom-export.d.mts +16 -12
  41. package/dist/production/dom-export.d.ts +13 -8
  42. package/dist/production/dom-export.js +3 -3
  43. package/dist/production/dom-export.mjs +3 -3
  44. package/dist/{development/index-react-server-client-KLg-U4nr.d.mts → production/index-react-server-client-BUK-oRcG.d.mts} +327 -200
  45. package/dist/production/{index-react-server-client-Bi_fx8qz.d.ts → index-react-server-client-DSU6bZil.d.ts} +357 -219
  46. package/dist/production/index-react-server-client.d.mts +4 -3
  47. package/dist/production/index-react-server-client.d.ts +2 -2
  48. package/dist/production/index-react-server-client.js +4 -4
  49. package/dist/production/index-react-server-client.mjs +2 -2
  50. package/dist/production/index-react-server.d.mts +291 -70
  51. package/dist/production/index-react-server.d.ts +291 -70
  52. package/dist/production/index-react-server.js +174 -180
  53. package/dist/production/index-react-server.mjs +174 -180
  54. package/dist/production/index.d.mts +294 -86
  55. package/dist/production/index.d.ts +136 -105
  56. package/dist/production/index.js +258 -215
  57. package/dist/production/index.mjs +3 -3
  58. package/dist/production/lib/types/internal.d.mts +13 -2
  59. package/dist/production/lib/types/internal.d.ts +12 -2
  60. package/dist/production/lib/types/internal.js +1 -1
  61. package/dist/production/lib/types/internal.mjs +1 -1
  62. package/dist/production/route-data-UTmTa8an.d.mts +473 -0
  63. package/dist/{development/routeModules-BR2FO0ix.d.ts → production/routeModules-D5bppTB2.d.ts} +325 -67
  64. package/package.json +1 -1
  65. package/dist/development/browser-7LYX59NK.d.mts +0 -226
  66. package/dist/production/browser-7LYX59NK.d.mts +0 -226
package/dist/{production/index-react-server-client-KLg-U4nr.d.mts → development/index-react-server-client-BUK-oRcG.d.mts} RENAMED
@@ -1,6 +1,7 @@
1
- import './components-CjQijYga.mjs';
1
+ import './components-uUh0svuC.mjs';
2
2
  import * as React from 'react';
3
- import { a_ as RouteManifest, a$ as ServerRouteModule, Y as MiddlewareEnabled, u as unstable_RouterContextProvider, X as AppLoadContext, ak as LoaderFunctionArgs, ab as ActionFunctionArgs, y as RouteModules, a4 as StaticHandlerContext, H as HydrationState, a0 as DataRouteObject, j as ClientLoaderFunction, aj as HTMLFormMethod, ah as FormEncType, a as RelativeRoutingType, aL as PageLinkDescriptor, T as To, b0 as History, a3 as GetScrollRestorationKeyFunction, e as RouterInit, F as FutureConfig$1, D as DataStrategyFunction, P as PatchRoutesOnNavigationFunction, z as NavigateOptions, a5 as Fetcher, f as RouteObject, R as Router, J as SerializeFrom, B as BlockerFunction, c as Location, b1 as CreateStaticHandlerOptions$1, a1 as StaticHandler } from './route-data-CqEmXQub.mjs';
3
+ import { az as RouteManifest, M as MiddlewareEnabled, o as unstable_RouterContextProvider, j as LoaderFunctionArgs, i as ActionFunctionArgs, J as StaticHandlerContext, H as HydrationState, z as DataRouteObject, a2 as HTMLFormMethod, a0 as FormEncType, a as RelativeRoutingType, T as To, aA as History, E as GetScrollRestorationKeyFunction, e as RouterInit, F as FutureConfig$1, D as DataStrategyFunction, P as PatchRoutesOnNavigationFunction, q as NavigateOptions, K as Fetcher, f as RouteObject, R as Router, B as BlockerFunction, c as Location, aB as CreateStaticHandlerOptions$1, C as StaticHandler } from './context-DZWGFcKX.mjs';
4
+ import { o as ServerRouteModule, A as AppLoadContext, c as RouteModules, h as ClientLoaderFunction, m as PageLinkDescriptor, d as SerializeFrom } from './route-data-UTmTa8an.mjs';
4
5
 
5
6
  type ServerRouteManifest = RouteManifest<Omit<ServerRoute, "children">>;
6
7
  interface ServerRoute extends Route {
@@ -259,9 +260,23 @@ type DiscoverBehavior = "render" | "none";
259
260
  */
260
261
  type PrefetchBehavior = "intent" | "render" | "none" | "viewport";
261
262
  /**
262
- * Renders all of the `<link>` tags created by the route module
263
- * [`links`](../../start/framework/route-module#links) export. You should render
264
- * it inside the `<head>` of your document.
263
+ * Props for the {@link Links} component.
264
+ *
265
+ * @category Types
266
+ */
267
+ interface LinksProps {
268
+ /**
269
+ * A [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
270
+ * attribute to render on the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
271
+ * element
272
+ */
273
+ nonce?: string | undefined;
274
+ }
275
+ /**
276
+ * Renders all the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
277
+ * tags created by the route module's [`links`](../../start/framework/route-module#links)
278
+ * export. You should render it inside the [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
279
+ * of your document.
265
280
  *
266
281
  * @example
267
282
  * import { Links } from "react-router";
@@ -280,14 +295,17 @@ type PrefetchBehavior = "intent" | "render" | "none" | "viewport";
280
295
  * @public
281
296
  * @category Components
282
297
  * @mode framework
283
- * @returns A collection of React elements for `<link>` tags
298
+ * @param props Props
299
+ * @param {LinksProps.nonce} props.nonce n/a
300
+ * @returns A collection of React elements for [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
301
+ * tags
284
302
  */
285
- declare function Links(): React.JSX.Element;
303
+ declare function Links({ nonce }: LinksProps): React.JSX.Element;
286
304
  /**
287
- * Renders `<link rel=prefetch|modulepreload>` tags for modules and data of
288
- * another page to enable an instant navigation to that page.
289
- * [`<Link prefetch>`](../../components/Link#prefetch) uses this internally, but
290
- * you can render it to prefetch a page for any other reason.
305
+ * Renders [`<link rel=prefetch|modulepreload>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel)
306
+ * tags for modules and data of another page to enable an instant navigation to
307
+ * that page. [`<Link prefetch>`](./Link#prefetch) uses this internally, but you
308
+ * can render it to prefetch a page for any other reason.
291
309
  *
292
310
  * For example, you may render one of this as the user types into a search field
293
311
  * to prefetch search results before they click through to their selection.
@@ -301,17 +319,21 @@ declare function Links(): React.JSX.Element;
301
319
  * @category Components
302
320
  * @mode framework
303
321
  * @param props Props
304
- * @param props.page The absolute path of the page to prefetch, e.g. `/absolute/path`.
305
- * @param props.linkProps Additional props to spread onto the
306
- * [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link)
307
- * tags, such as `crossOrigin`, `integrity`, `rel`, etc.
308
- * @returns A collection of React elements for `<link>` tags
322
+ * @param {PageLinkDescriptor.page} props.page n/a
323
+ * @param props.linkProps Additional props to spread onto the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
324
+ * tags, such as [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/crossOrigin),
325
+ * [`integrity`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/integrity),
326
+ * [`rel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel),
327
+ * etc.
328
+ * @returns A collection of React elements for [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
329
+ * tags
309
330
  */
310
331
  declare function PrefetchPageLinks({ page, ...linkProps }: PageLinkDescriptor): React.JSX.Element | null;
311
332
  /**
312
- * Renders all the `<meta>` tags created by the route module
313
- * [`meta`](../../start/framework/route-module#meta) exports. You should render
314
- * it inside the `<head>` of your HTML.
333
+ * Renders all the [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
334
+ * tags created by the route module's [`meta`](../../start/framework/route-module#meta)
335
+ * export. You should render it inside the [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
336
+ * of your document.
315
337
  *
316
338
  * @example
317
339
  * import { Meta } from "react-router";
@@ -329,29 +351,40 @@ declare function PrefetchPageLinks({ page, ...linkProps }: PageLinkDescriptor):
329
351
  * @public
330
352
  * @category Components
331
353
  * @mode framework
332
- * @returns A collection of React elements for `<meta>` tags
354
+ * @returns A collection of React elements for [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
355
+ * tags
333
356
  */
334
357
  declare function Meta(): React.JSX.Element;
335
358
  /**
336
359
  * A couple common attributes:
337
360
  *
338
- * - `<Scripts crossOrigin>` for hosting your static assets on a different server than your app.
339
- * - `<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.
361
+ * - `<Scripts crossOrigin>` for hosting your static assets on a different
362
+ * server than your app.
363
+ * - `<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)
364
+ * with [nonce-sources](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources)
365
+ * for your [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
366
+ * tags.
340
367
  *
341
- * You cannot pass through attributes such as `async`, `defer`, `src`, `type`, `noModule` because they are managed by React Router internally.
368
+ * You cannot pass through attributes such as [`async`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/async),
369
+ * [`defer`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/defer),
370
+ * [`noModule`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/noModule),
371
+ * [`src`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/src),
372
+ * or [`type`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/type),
373
+ * because they are managed by React Router internally.
342
374
  *
343
375
  * @category Types
344
376
  */
345
- type ScriptsProps = Omit<React.HTMLProps<HTMLScriptElement>, "async" | "children" | "dangerouslySetInnerHTML" | "defer" | "src" | "type" | "noModule" | "suppressHydrationWarning"> & {
377
+ type ScriptsProps = Omit<React.HTMLProps<HTMLScriptElement>, "async" | "children" | "dangerouslySetInnerHTML" | "defer" | "noModule" | "src" | "suppressHydrationWarning" | "type"> & {
346
378
  /**
347
379
  * A [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
348
- * attribute to render on [the `<script>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script)
380
+ * attribute to render on the [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
381
+ * element
349
382
  */
350
383
  nonce?: string | undefined;
351
384
  };
352
385
  /**
353
386
  * Renders the client runtime of your app. It should be rendered inside the
354
- * [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/body)
387
+ * [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body)
355
388
  * of the document.
356
389
  *
357
390
  * If server rendering, you can omit `<Scripts/>` and the app will work as a
@@ -375,10 +408,12 @@ type ScriptsProps = Omit<React.HTMLProps<HTMLScriptElement>, "async" | "children
375
408
  * @public
376
409
  * @category Components
377
410
  * @mode framework
378
- * @param scriptProps Additional props to spread onto the
379
- * [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script)
380
- * tag, such as `crossOrigin`, `nonce`, etc.
381
- * @returns A collection of React elements for `<script>` tags
411
+ * @param scriptProps Additional props to spread onto the [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
412
+ * tags, such as [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/crossOrigin),
413
+ * [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce),
414
+ * etc.
415
+ * @returns A collection of React elements for [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
416
+ * tags
382
417
  */
383
418
  declare function Scripts(scriptProps: ScriptsProps): React.JSX.Element | null;
384
419
 
@@ -391,7 +426,11 @@ interface DOMRouterOpts {
391
426
  */
392
427
  basename?: string;
393
428
  /**
394
- * Function to provide the initial `context` values for all client side navigations/fetches
429
+ * A function that returns an {@link unstable_RouterContextProvider} instance
430
+ * which is provided as the `context` argument to client [`action`](../../start/data/route-object#action)s,
431
+ * [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
432
+ * This function is called to generate a fresh `context` instance on each
433
+ * navigation or fetcher call.
395
434
  */
396
435
  unstable_getContext?: RouterInit["unstable_getContext"];
397
436
  /**
@@ -399,10 +438,11 @@ interface DOMRouterOpts {
399
438
  */
400
439
  future?: Partial<FutureConfig$1>;
401
440
  /**
402
- * When Server-Rendering and opting-out of automatic hydration, the `hydrationData`
403
- * option allows you to pass in hydration data from your server-render. This will
404
- * almost always be a subset of data from the {@link StaticHandlerContext} value you
405
- * get back from the `{@link StaticHandler} `query()` method:
441
+ * When Server-Rendering and opting-out of automatic hydration, the
442
+ * `hydrationData` option allows you to pass in hydration data from your
443
+ * server-render. This will almost always be a subset of data from the
444
+ * {@link StaticHandlerContext} value you get back from {@link StaticHandler}'s
445
+ * `query` method:
406
446
  *
407
447
  * ```tsx
408
448
  * const router = createBrowserRouter(routes, {
@@ -419,18 +459,23 @@ interface DOMRouterOpts {
419
459
  *
420
460
  * You will almost always include a complete set of `loaderData` to hydrate a
421
461
  * server-rendered app. But in advanced use-cases (such as Framework Mode's
422
- * `clientLoader`), you may want to include `loaderData` for only some routes
423
- * that were loaded/rendered on the server. This allows you to hydrate _some_
424
- * of the routes (such as the app layout/shell) while showing a `HydrateFallback`
425
- * and running the loaders for other routes during hydration.
426
- *
427
- * A route `loader` will run during hydration in 2 scenarios:
428
- *
429
- * - No hydration data is provided
430
- * - In these cases the `HydrateFallback` component will render on initial hydration
431
- * - The `loader.hydrate` property is set to true
432
- * - This allows you to run the loader even if you did not render a fallback
433
- * on initial hydration (i.e., to prime a cache with hydration data)
462
+ * [`clientLoader`](../../start/framework/route-module#clientLoader)), you may
463
+ * want to include `loaderData` for only some routes that were loaded/rendered
464
+ * on the server. This allows you to hydrate _some_ of the routes (such as the
465
+ * app layout/shell) while showing a `HydrateFallback` component and running
466
+ * the [`loader`](../../start/data/route-object#loader)s for other routes
467
+ * during hydration.
468
+ *
469
+ * A route [`loader`](../../start/data/route-object#loader) will run during
470
+ * hydration in two scenarios:
471
+ *
472
+ * 1. No hydration data is provided
473
+ * In these cases the `HydrateFallback` component will render on initial
474
+ * hydration
475
+ * 2. The `loader.hydrate` property is set to `true`
476
+ * This allows you to run the [`loader`](../../start/data/route-object#loader)
477
+ * even if you did not render a fallback on initial hydration (i.e., to
478
+ * prime a cache with hydration data)
434
479
  *
435
480
  * ```tsx
436
481
  * const router = createBrowserRouter(
@@ -466,31 +511,36 @@ interface DOMRouterOpts {
466
511
  * See {@link DataStrategyFunction}.
467
512
  *
468
513
  * <docs-warning>This is a low-level API intended for advanced use-cases. This
469
- * overrides React Router's internal handling of `loader`/`action` execution,
470
- * and if done incorrectly will break your app code. Please use with caution
471
- * and perform the appropriate testing.</docs-warning>
514
+ * overrides React Router's internal handling of
515
+ * [`action`](../../start/data/route-object#action)/[`loader`](../../start/data/route-object#loader)
516
+ * execution, and if done incorrectly will break your app code. Please use
517
+ * with caution and perform the appropriate testing.</docs-warning>
472
518
  *
473
519
  * By default, React Router is opinionated about how your data is loaded/submitted -
474
- * and most notably, executes all of your loaders in parallel for optimal data
475
- * fetching. While we think this is the right behavior for most use-cases, we
476
- * realize that there is no "one size fits all" solution when it comes to data
477
- * fetching for the wide landscape of application requirements.
478
- *
479
- * The `dataStrategy` option gives you full control over how your loaders and
480
- * actions are executed and lays the foundation to build in more advanced APIs
481
- * such as middleware, context, and caching layers. Over time, we expect that
482
- * we'll leverage this API internally to bring more first class APIs to React
483
- * Router, but until then (and beyond), this is your way to add more advanced
484
- * functionality for your applications data needs.
485
- *
486
- * The `dataStrategy` function should return a key/value object of
487
- * `routeId` -> {@link DataStrategyResult} and should include entries for any routes
488
- * where a handler was executed. A `DataStrategyResult` indicates if the handler
489
- * was successful or not based on the `DataStrategyResult.type` field. If the
490
- * returned `DataStrategyResult["result"]` is a `Response`, React Router will
491
- * unwrap it for you (via `res.json` or `res.text`). If you need to do custom
492
- * decoding of a `Response` but want to preserve the status code, you can use
493
- * the `data` utility to return your decoded data along with a `ResponseInit`.
520
+ * and most notably, executes all of your [`loader`](../../start/data/route-object#loader)s
521
+ * in parallel for optimal data fetching. While we think this is the right
522
+ * behavior for most use-cases, we realize that there is no "one size fits all"
523
+ * solution when it comes to data fetching for the wide landscape of
524
+ * application requirements.
525
+ *
526
+ * The `dataStrategy` option gives you full control over how your [`action`](../../start/data/route-object#action)s
527
+ * and [`loader`](../../start/data/route-object#loader)s are executed and lays
528
+ * the foundation to build in more advanced APIs such as middleware, context,
529
+ * and caching layers. Over time, we expect that we'll leverage this API
530
+ * internally to bring more first class APIs to React Router, but until then
531
+ * (and beyond), this is your way to add more advanced functionality for your
532
+ * application's data needs.
533
+ *
534
+ * The `dataStrategy` function should return a key/value-object of
535
+ * `routeId` -> {@link DataStrategyResult} and should include entries for any
536
+ * routes where a handler was executed. A `DataStrategyResult` indicates if
537
+ * the handler was successful or not based on the `DataStrategyResult.type`
538
+ * field. If the returned `DataStrategyResult.result` is a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response),
539
+ * React Router will unwrap it for you (via [`res.json`](https://developer.mozilla.org/en-US/docs/Web/API/Response/json)
540
+ * or [`res.text`](https://developer.mozilla.org/en-US/docs/Web/API/Response/text)).
541
+ * If you need to do custom decoding of a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
542
+ * but want to preserve the status code, you can use the `data` utility to
543
+ * return your decoded data along with a `ResponseInit`.
494
544
  *
495
545
  * <details>
496
546
  * <summary><b>Example <code>dataStrategy</code> Use Cases</b></summary>
@@ -498,13 +548,14 @@ interface DOMRouterOpts {
498
548
  * **Adding logging**
499
549
  *
500
550
  * In the simplest case, let's look at hooking into this API to add some logging
501
- * for when our route loaders/actions execute:
551
+ * for when our route [`action`](../../start/data/route-object#action)s/[`loader`](../../start/data/route-object#loader)s
552
+ * execute:
502
553
  *
503
- * ```ts
554
+ * ```tsx
504
555
  * let router = createBrowserRouter(routes, {
505
- * async dataStrategy({ request, matches }) {
556
+ * async dataStrategy({ matches, request }) {
506
557
  * const matchesToLoad = matches.filter((m) => m.shouldLoad);
507
- * const results = {};
558
+ * const results: Record<string, DataStrategyResult> = {};
508
559
  * await Promise.all(
509
560
  * matchesToLoad.map(async (match) => {
510
561
  * console.log(`Processing ${match.route.id}`);
@@ -518,9 +569,10 @@ interface DOMRouterOpts {
518
569
  *
519
570
  * **Middleware**
520
571
  *
521
- * Let's define a middleware on each route via `handle` and call middleware
522
- * sequentially first, then call all loaders in parallel - providing any data
523
- * made available via the middleware:
572
+ * Let's define a middleware on each route via [`handle`](../../start/data/route-object#handle)
573
+ * and call middleware sequentially first, then call all
574
+ * [`loader`](../../start/data/route-object#loader)s in parallel - providing
575
+ * any data made available via the middleware:
524
576
  *
525
577
  * ```ts
526
578
  * const routes = [
@@ -553,7 +605,7 @@ interface DOMRouterOpts {
553
605
  * ];
554
606
  *
555
607
  * let router = createBrowserRouter(routes, {
556
- * async dataStrategy({ request, params, matches }) {
608
+ * async dataStrategy({ matches, params, request }) {
557
609
  * // Run middleware sequentially and let them add data to `context`
558
610
  * let context = {};
559
611
  * for (const match of matches) {
@@ -589,11 +641,11 @@ interface DOMRouterOpts {
589
641
  *
590
642
  * **Custom Handler**
591
643
  *
592
- * It's also possible you don't even want to define a loader implementation at
593
- * the route level. Maybe you want to just determine the routes and issue a single
594
- * GraphQL request for all of your data? You can do that by setting your
595
- * `route.loader=true` so it qualifies as "having a loader", and then store GQL
596
- * fragments on `route.handle`:
644
+ * It's also possible you don't even want to define a [`loader`](../../start/data/route-object#loader)
645
+ * implementation at the route level. Maybe you want to just determine the
646
+ * routes and issue a single GraphQL request for all of your data? You can do
647
+ * that by setting your `route.loader=true` so it qualifies as "having a
648
+ * loader", and then store GQL fragments on `route.handle`:
597
649
  *
598
650
  * ```ts
599
651
  * const routes = [
@@ -626,7 +678,7 @@ interface DOMRouterOpts {
626
678
  * ];
627
679
  *
628
680
  * let router = createBrowserRouter(routes, {
629
- * async dataStrategy({ request, params, matches }) {
681
+ * async dataStrategy({ matches, params, request }) {
630
682
  * // Compose route fragments into a single GQL payload
631
683
  * let gql = getFragmentsFromRouteHandles(matches);
632
684
  * let data = await fetchGql(gql);
@@ -648,37 +700,39 @@ interface DOMRouterOpts {
648
700
  * `createBrowserRouter(routes)`. This allows React Router to perform synchronous
649
701
  * route matching, execute loaders, and then render route components in the most
650
702
  * optimistic manner without introducing waterfalls. The tradeoff is that your
651
- * initial JS bundle is larger by definition - which may slow down application
703
+ * initial JS bundle is larger by definition — which may slow down application
652
704
  * start-up times as your application grows.
653
705
  *
654
- * To combat this, we introduced [`route.lazy`][route-lazy] in [v6.9.0][6-9-0]
655
- * which let's you lazily load the route _implementation_ (`loader`, `Component`,
656
- * etc.) while still providing the route _definition_ aspects up front (`path`,
657
- * `index`, etc.). This is a good middle ground because React Router still knows
658
- * about your route definitions (the lightweight part) up front and can perform
659
- * synchronous route matching, but then delay loading any of the route implementation
706
+ * To combat this, we introduced [`route.lazy`](../../start/data/route-object#lazy)
707
+ * in [v6.9.0](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v690)
708
+ * which lets you lazily load the route _implementation_ ([`loader`](../../start/data/route-object#loader),
709
+ * [`Component`](../../start/data/route-object#Component), etc.) while still
710
+ * providing the route _definition_ aspects up front (`path`, `index`, etc.).
711
+ * This is a good middle ground. React Router still knows about your route
712
+ * definitions (the lightweight part) up front and can perform synchronous
713
+ * route matching, but then delay loading any of the route implementation
660
714
  * aspects (the heavier part) until the route is actually navigated to.
661
715
  *
662
- * In some cases, even this doesn't go far enough. For very large applications,
716
+ * In some cases, even this doesn't go far enough. For huge applications,
663
717
  * providing all route definitions up front can be prohibitively expensive.
664
718
  * Additionally, it might not even be possible to provide all route definitions
665
719
  * up front in certain Micro-Frontend or Module-Federation architectures.
666
720
  *
667
- * This is where `patchRoutesOnNavigation` comes in ([RFC][fog-of-war-rfc]).
721
+ * This is where `patchRoutesOnNavigation` comes in ([RFC](https://github.com/remix-run/react-router/discussions/11113)).
668
722
  * This API is for advanced use-cases where you are unable to provide the full
669
723
  * route tree up-front and need a way to lazily "discover" portions of the route
670
- * tree at runtime. This feature is often referred to as ["Fog of War"][fog-of-war]
724
+ * tree at runtime. This feature is often referred to as ["Fog of War"](https://en.wikipedia.org/wiki/Fog_of_war),
671
725
  * because similar to how video games expand the "world" as you move around -
672
726
  * the router would be expanding its routing tree as the user navigated around
673
727
  * the app - but would only ever end up loading portions of the tree that the
674
728
  * user visited.
675
729
  *
676
730
  * `patchRoutesOnNavigation` will be called anytime React Router is unable to
677
- * match a `path`. The arguments include the `path`, any partial `matches`, and
678
- * a `patch` function you can call to patch new routes into the tree at a
731
+ * match a `path`. The arguments include the `path`, any partial `matches`,
732
+ * and a `patch` function you can call to patch new routes into the tree at a
679
733
  * specific location. This method is executed during the `loading` portion of
680
- * the navigation for `GET` requests and during the `submitting` portion of the
681
- * navigation for non-`GET` requests.
734
+ * the navigation for `GET` requests and during the `submitting` portion of
735
+ * the navigation for non-`GET` requests.
682
736
  *
683
737
  * <details>
684
738
  * <summary><b>Example <code>patchRoutesOnNavigation</code> Use Cases</b></summary>
@@ -695,7 +749,7 @@ interface DOMRouterOpts {
695
749
  * },
696
750
  * ],
697
751
  * {
698
- * async patchRoutesOnNavigation({ path, patch }) {
752
+ * async patchRoutesOnNavigation({ patch, path }) {
699
753
  * if (path === "/a") {
700
754
  * // Load/patch the `a` route as a child of the route with id `root`
701
755
  * let route = await getARoute();
@@ -707,13 +761,13 @@ interface DOMRouterOpts {
707
761
  * );
708
762
  * ```
709
763
  *
710
- * In the above example, if the user clicks a link to `/a`, React Router won't
711
- * match any routes initially and will call `patchRoutesOnNavigation` with a
712
- * `path = "/a"` and a `matches` array containing the root route match. By calling
713
- * `patch('root', [route])`, the new route will be added to the route tree as a
714
- * child of the `root` route and React Router will perform matching on the updated
715
- * routes. This time it will successfully match the `/a` path and the navigation
716
- * will complete successfully.
764
+ * In the above example, if the user clicks a link to `/a`, React Router
765
+ * won't match any routes initially and will call `patchRoutesOnNavigation`
766
+ * with a `path = "/a"` and a `matches` array containing the root route
767
+ * match. By calling `patch('root', [route])`, the new route will be added
768
+ * to the route tree as a child of the `root` route and React Router will
769
+ * perform matching on the updated routes. This time it will successfully
770
+ * match the `/a` path and the navigation will complete successfully.
717
771
  *
718
772
  * **Patching new root-level routes**
719
773
  *
@@ -730,7 +784,7 @@ interface DOMRouterOpts {
730
784
  * },
731
785
  * ],
732
786
  * {
733
- * async patchRoutesOnNavigation({ path, patch }) {
787
+ * async patchRoutesOnNavigation({ patch, path }) {
734
788
  * if (path === "/root-sibling") {
735
789
  * // Load/patch the `/root-sibling` route as a sibling of the root route
736
790
  * let route = await getRootSiblingRoute();
@@ -742,12 +796,12 @@ interface DOMRouterOpts {
742
796
  * );
743
797
  * ```
744
798
  *
745
- * **Patching sub-trees asynchronously**
799
+ * **Patching subtrees asynchronously**
746
800
  *
747
801
  * You can also perform asynchronous matching to lazily fetch entire sections
748
- * of your application:
802
+ * of your application:
749
803
  *
750
- * ```jsx
804
+ * ```tsx
751
805
  * let router = createBrowserRouter(
752
806
  * [
753
807
  * {
@@ -756,7 +810,7 @@ interface DOMRouterOpts {
756
810
  * },
757
811
  * ],
758
812
  * {
759
- * async patchRoutesOnNavigation({ path, patch }) {
813
+ * async patchRoutesOnNavigation({ patch, path }) {
760
814
  * if (path.startsWith("/dashboard")) {
761
815
  * let children = await import("./dashboard");
762
816
  * patch(null, children);
@@ -771,17 +825,17 @@ interface DOMRouterOpts {
771
825
  * ```
772
826
  *
773
827
  * <docs-info>If in-progress execution of `patchRoutesOnNavigation` is
774
- * interrupted by a subsequent navigation, then any remaining `patch` calls
775
- * in the interrupted execution will not update the route tree because the
828
+ * interrupted by a later navigation, then any remaining `patch` calls in
829
+ * the interrupted execution will not update the route tree because the
776
830
  * operation was cancelled.</docs-info>
777
831
  *
778
832
  * **Co-locating route discovery with route definition**
779
833
  *
780
- * If you don't wish to perform your own pseudo-matching, you can leverage the
781
- * partial `matches` array and the `handle` field on a route to keep the children
782
- * definitions co-located:
834
+ * If you don't wish to perform your own pseudo-matching, you can leverage
835
+ * the partial `matches` array and the [`handle`](../../start/data/route-object#handle)
836
+ * field on a route to keep the children definitions co-located:
783
837
  *
784
- * ```jsx
838
+ * ```tsx
785
839
  * let router = createBrowserRouter(
786
840
  * [
787
841
  * {
@@ -832,18 +886,19 @@ interface DOMRouterOpts {
832
886
  *
833
887
  * **A note on routes with parameters**
834
888
  *
835
- * Because React Router uses ranked routes to find the best match for a given
836
- * path, there is an interesting ambiguity introduced when only a partial route
837
- * tree is known at any given point in time. If we match a fully static route
838
- * such as `path: "/about/contact-us"` then we know we've found the right match
839
- * since it's composed entirely of static URL segments, and thus we do not need
840
- * to bother asking for any other potentially higher-scoring routes.
889
+ * Because React Router uses ranked routes to find the best match for a
890
+ * given path, there is an interesting ambiguity introduced when only a
891
+ * partial route tree is known at any given point in time. If we match a
892
+ * fully static route such as `path: "/about/contact-us"` then we know we've
893
+ * found the right match since it's composed entirely of static URL segments.
894
+ * Thus, we do not need to bother asking for any other potentially
895
+ * higher-scoring routes.
841
896
  *
842
- * However, routes with parameters (dynamic or splat) can't make this assumption
843
- * because there might be a not-yet-discovered route tht scores higher. Consider
844
- * a full route tree such as:
897
+ * However, routes with parameters (dynamic or splat) can't make this
898
+ * assumption because there might be a not-yet-discovered route that scores
899
+ * higher. Consider a full route tree such as:
845
900
  *
846
- * ```js
901
+ * ```tsx
847
902
  * // Assume this is the full route tree for your app
848
903
  * const routes = [
849
904
  * {
@@ -865,7 +920,7 @@ interface DOMRouterOpts {
865
920
  * And then assume we want to use `patchRoutesOnNavigation` to fill this in
866
921
  * as the user navigates around:
867
922
  *
868
- * ```js
923
+ * ```tsx
869
924
  * // Start with only the index route
870
925
  * const router = createBrowserRouter(
871
926
  * [
@@ -875,7 +930,7 @@ interface DOMRouterOpts {
875
930
  * },
876
931
  * ],
877
932
  * {
878
- * patchRoutesOnNavigation({ path, patch }) {
933
+ * async patchRoutesOnNavigation({ patch, path }) {
879
934
  * if (path === "/blog/new") {
880
935
  * patch("blog", [
881
936
  * {
@@ -896,28 +951,30 @@ interface DOMRouterOpts {
896
951
  * );
897
952
  * ```
898
953
  *
899
- * If the user were to a blog post first (i.e., `/blog/my-post`) we would patch
900
- * in the `:slug` route. Then if the user navigated to `/blog/new` to write a
901
- * new post, we'd match `/blog/:slug` but it wouldn't be the _right_ match!
902
- * We need to call `patchRoutesOnNavigation` just in case there exists a
903
- * higher-scoring route we've not yet discovered, which in this case there is.
954
+ * If the user were to a blog post first (i.e., `/blog/my-post`) we would
955
+ * patch in the `:slug` route. Then, if the user navigated to `/blog/new` to
956
+ * write a new post, we'd match `/blog/:slug` but it wouldn't be the _right_
957
+ * match! We need to call `patchRoutesOnNavigation` just in case there
958
+ * exists a higher-scoring route we've not yet discovered, which in this
959
+ * case there is.
904
960
  *
905
961
  * So, anytime React Router matches a path that contains at least one param,
906
962
  * it will call `patchRoutesOnNavigation` and match routes again just to
907
963
  * confirm it has found the best match.
908
964
  *
909
965
  * If your `patchRoutesOnNavigation` implementation is expensive or making
910
- * side-effect `fetch` calls to a backend server, you may want to consider
911
- * tracking previously seen routes to avoid over-fetching in cases where you
912
- * know the proper route has already been found. This can usually be as simple
913
- * as maintaining a small cache of prior `path` values for which you've already
966
+ * side effect [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch)
967
+ * calls to a backend server, you may want to consider tracking previously
968
+ * seen routes to avoid over-fetching in cases where you know the proper
969
+ * route has already been found. This can usually be as simple as
970
+ * maintaining a small cache of prior `path` values for which you've already
914
971
  * patched in the right routes:
915
972
  *
916
- * ```js
973
+ * ```tsx
917
974
  * let discoveredRoutes = new Set();
918
975
  *
919
976
  * const router = createBrowserRouter(routes, {
920
- * patchRoutesOnNavigation({ path, patch }) {
977
+ * async patchRoutesOnNavigation({ patch, path }) {
921
978
  * if (discoveredRoutes.has(path)) {
922
979
  * // We've seen this before so nothing to patch in and we can let the router
923
980
  * // use the routes it already knows about
@@ -935,7 +992,7 @@ interface DOMRouterOpts {
935
992
  patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
936
993
  /**
937
994
  * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
938
- * override - defaults to the global `window` instance.
995
+ * override. Defaults to the global `window` instance.
939
996
  */
940
997
  window?: Window;
941
998
  }
@@ -982,8 +1039,18 @@ declare function createHashRouter(routes: RouteObject[], opts?: DOMRouterOpts):
982
1039
  * @category Types
983
1040
  */
984
1041
  interface BrowserRouterProps {
1042
+ /**
1043
+ * Application basename
1044
+ */
985
1045
  basename?: string;
1046
+ /**
1047
+ * {@link Route | `<Route>`} components describing your route configuration
1048
+ */
986
1049
  children?: React.ReactNode;
1050
+ /**
1051
+ * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
1052
+ * override. Defaults to the global `window` instance
1053
+ */
987
1054
  window?: Window;
988
1055
  }
989
1056
  /**
@@ -994,10 +1061,9 @@ interface BrowserRouterProps {
994
1061
  * @category Declarative Routers
995
1062
  * @mode declarative
996
1063
  * @param props Props
997
- * @param props.basename Application basename
998
- * @param props.children {@link Route | `<Route>`} components describing your route configuration
999
- * @param props.window [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window)
1000
- * object override - defaults to the global `window` instance
1064
+ * @param {BrowserRouterProps.basename} props.basename n/a
1065
+ * @param {BrowserRouterProps.children} props.children n/a
1066
+ * @param {BrowserRouterProps.window} props.window n/a
1001
1067
  * @returns A declarative {@link Router | `<Router>`} using the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
1002
1068
  * API for client-side routing.
1003
1069
  */
@@ -1006,8 +1072,18 @@ declare function BrowserRouter({ basename, children, window, }: BrowserRouterPro
1006
1072
  * @category Types
1007
1073
  */
1008
1074
  interface HashRouterProps {
1075
+ /**
1076
+ * Application basename
1077
+ */
1009
1078
  basename?: string;
1079
+ /**
1080
+ * {@link Route | `<Route>`} components describing your route configuration
1081
+ */
1010
1082
  children?: React.ReactNode;
1083
+ /**
1084
+ * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
1085
+ * override. Defaults to the global `window` instance
1086
+ */
1011
1087
  window?: Window;
1012
1088
  }
1013
1089
  /**
@@ -1019,10 +1095,9 @@ interface HashRouterProps {
1019
1095
  * @category Declarative Routers
1020
1096
  * @mode declarative
1021
1097
  * @param props Props
1022
- * @param props.basename Application basename
1023
- * @param props.children {@link Route | `<Route>`} components describing your route configuration
1024
- * @param props.window [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window)
1025
- * object override - defaults to the global `window` instance
1098
+ * @param {HashRouterProps.basename} props.basename n/a
1099
+ * @param {HashRouterProps.children} props.children n/a
1100
+ * @param {HashRouterProps.window} props.window n/a
1026
1101
  * @returns A declarative {@link Router | `<Router>`} using the URL [`hash`](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash)
1027
1102
  * for client-side routing.
1028
1103
  */
@@ -1031,8 +1106,17 @@ declare function HashRouter({ basename, children, window }: HashRouterProps): Re
1031
1106
  * @category Types
1032
1107
  */
1033
1108
  interface HistoryRouterProps {
1109
+ /**
1110
+ * Application basename
1111
+ */
1034
1112
  basename?: string;
1113
+ /**
1114
+ * {@link Route | `<Route>`} components describing your route configuration
1115
+ */
1035
1116
  children?: React.ReactNode;
1117
+ /**
1118
+ * A {@link History} implementation for use by the router
1119
+ */
1036
1120
  history: History;
1037
1121
  }
1038
1122
  /**
@@ -1047,10 +1131,11 @@ interface HistoryRouterProps {
1047
1131
  * @category Declarative Routers
1048
1132
  * @mode declarative
1049
1133
  * @param props Props
1050
- * @param props.basename Application basename
1051
- * @param props.children {@link Route | `<Route>`} components describing your route configuration
1052
- * @param props.history A history implementation for use by the router
1053
- * @returns A declarative router using the provided history implementation for client-side routing.
1134
+ * @param {HistoryRouterProps.basename} props.basename n/a
1135
+ * @param {HistoryRouterProps.children} props.children n/a
1136
+ * @param {HistoryRouterProps.history} props.history n/a
1137
+ * @returns A declarative {@link Router | `<Router>`} using the provided history
1138
+ * implementation for client-side routing.
1054
1139
  */
1055
1140
  declare function HistoryRouter({ basename, children, history, }: HistoryRouterProps): React.JSX.Element;
1056
1141
  declare namespace HistoryRouter {
@@ -1069,8 +1154,8 @@ interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>,
1069
1154
  * <Link discover="none" />
1070
1155
  * ```
1071
1156
  *
1072
- * - **render** - default, discover the route when the link renders
1073
- * - **none** - don't eagerly discover, only discover if the link is clicked
1157
+ * - **render** — default, discover the route when the link renders
1158
+ * - **none** — don't eagerly discover, only discover if the link is clicked
1074
1159
  */
1075
1160
  discover?: DiscoverBehavior;
1076
1161
  /**
@@ -1084,10 +1169,10 @@ interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>,
1084
1169
  * <Link prefetch="viewport" />
1085
1170
  * ```
1086
1171
  *
1087
- * - **none** - default, no prefetching
1088
- * - **intent** - prefetches when the user hovers or focuses the link
1089
- * - **render** - prefetches when the link renders
1090
- * - **viewport** - prefetches when the link is in the viewport, very useful for mobile
1172
+ * - **none** — default, no prefetching
1173
+ * - **intent** — prefetches when the user hovers or focuses the link
1174
+ * - **render** — prefetches when the link renders
1175
+ * - **viewport** — prefetches when the link is in the viewport, very useful for mobile
1091
1176
  *
1092
1177
  * Prefetching is done with HTML [`<link rel="prefetch">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
1093
1178
  * tags. They are inserted after the link.
@@ -1115,7 +1200,7 @@ interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>,
1115
1200
  reloadDocument?: boolean;
1116
1201
  /**
1117
1202
  * Replaces the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
1118
- * stack instead of pushing a new one onto it.
1203
+ * stack instead of pushing a new one onto it.
1119
1204
  *
1120
1205
  * ```tsx
1121
1206
  * <Link replace />
@@ -1176,10 +1261,10 @@ interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>,
1176
1261
  * Consider a route hierarchy where a parent route pattern is `"blog"` and a child
1177
1262
  * route pattern is `"blog/:slug/edit"`.
1178
1263
  *
1179
- * - **route** - default, resolves the link relative to the route pattern. In the
1180
- * example above, a relative link of `".."` will remove both `:slug/edit` segments
1264
+ * - **route** — default, resolves the link relative to the route pattern. In the
1265
+ * example above, a relative link of `"..."` will remove both `:slug/edit` segments
1181
1266
  * back to `"/blog"`.
1182
- * - **path** - relative to the path so `".."` will only remove one URL segment up
1267
+ * - **path** — relative to the path so `"..."` will only remove one URL segment up
1183
1268
  * to `"/blog/:slug"`
1184
1269
  *
1185
1270
  * Note that index routes and layout routes do not have paths so they are not
@@ -1431,11 +1516,11 @@ declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefA
1431
1516
  */
1432
1517
  interface SharedFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
1433
1518
  /**
1434
- * The HTTP verb to use when the form is submitted. Supports "get", "post",
1435
- * "put", "delete", and "patch".
1519
+ * The HTTP verb to use when the form is submitted. Supports `"delete"`,
1520
+ * `"get"`, `"patch"`, `"post"`, and `"put"`.
1436
1521
  *
1437
1522
  * Native [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
1438
- * only supports `get` and `post`, avoid the other verbs if you'd like to
1523
+ * only supports `"get"` and `"post"`, avoid the other verbs if you'd like to
1439
1524
  * support progressive enhancement
1440
1525
  */
1441
1526
  method?: HTMLFormMethod;
@@ -1494,8 +1579,8 @@ interface FormProps extends SharedFormProps {
1494
1579
  * <Link discover="none" />
1495
1580
  * ```
1496
1581
  *
1497
- * - **render** - default, discover the route when the link renders
1498
- * - **none** - don't eagerly discover, only discover if the link is clicked
1582
+ * - **render** — default, discover the route when the link renders
1583
+ * - **none** — don't eagerly discover, only discover if the link is clicked
1499
1584
  */
1500
1585
  discover?: DiscoverBehavior;
1501
1586
  /**
@@ -1534,7 +1619,7 @@ interface FormProps extends SharedFormProps {
1534
1619
  }
1535
1620
  /**
1536
1621
  * A progressively enhanced HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
1537
- * that submits data to actions via [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API),
1622
+ * that submits data to actions via [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch),
1538
1623
  * activating pending states in {@link useNavigation} which enables advanced
1539
1624
  * user interfaces beyond a basic HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).
1540
1625
  * After a form's `action` completes, all data on the page is automatically
@@ -1548,7 +1633,8 @@ interface FormProps extends SharedFormProps {
1548
1633
  *
1549
1634
  * `Form` is most useful for submissions that should also change the URL or
1550
1635
  * otherwise add an entry to the browser history stack. For forms that shouldn't
1551
- * manipulate the browser history stack, use [`<fetcher.Form>`][fetcher_form].
1636
+ * manipulate the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
1637
+ * stack, use {@link FetcherWithComponents.Form | `<fetcher.Form>`}.
1552
1638
  *
1553
1639
  * @example
1554
1640
  * import { Form } from "react-router";
@@ -1586,8 +1672,8 @@ type ScrollRestorationProps = ScriptsProps & {
1586
1672
  /**
1587
1673
  * A function that returns a key to use for scroll restoration. This is useful
1588
1674
  * for custom scroll restoration logic, such as using only the pathname so
1589
- * that subsequent navigations to prior paths will restore the scroll. Defaults
1590
- * to `location.key`. See {@link GetScrollRestorationKeyFunction}.
1675
+ * that later navigations to prior paths will restore the scroll. Defaults to
1676
+ * `location.key`. See {@link GetScrollRestorationKeyFunction}.
1591
1677
  *
1592
1678
  * ```tsx
1593
1679
  * <ScrollRestoration
@@ -1640,7 +1726,7 @@ type ScrollRestorationProps = ScriptsProps & {
1640
1726
  * @param {ScrollRestorationProps.getKey} props.getKey n/a
1641
1727
  * @param {ScriptsProps.nonce} props.nonce n/a
1642
1728
  * @param {ScrollRestorationProps.storageKey} props.storageKey n/a
1643
- * @returns A [`script`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
1729
+ * @returns A [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
1644
1730
  * tag that restores scroll positions on navigation.
1645
1731
  */
1646
1732
  declare function ScrollRestoration({ getKey, storageKey, ...props }: ScrollRestorationProps): React.JSX.Element | null;
@@ -1695,8 +1781,8 @@ declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to:
1695
1781
  * ### `setSearchParams` function
1696
1782
  *
1697
1783
  * The second element of the tuple is a function that can be used to update the
1698
- * search params. It accepts the same types as `defaultInit` and will
1699
- * cause a navigation to the new URL.
1784
+ * search params. It accepts the same types as `defaultInit` and will cause a
1785
+ * navigation to the new URL.
1700
1786
  *
1701
1787
  * ```tsx
1702
1788
  * let [searchParams, setSearchParams] = useSearchParams();
@@ -1717,7 +1803,8 @@ declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to:
1717
1803
  * setSearchParams(new URLSearchParams("?tab=1"));
1718
1804
  * ```
1719
1805
  *
1720
- * It also supports a function callback like React's [`setState`](https://react.dev/reference/react/useState#setstate):
1806
+ * It also supports a function callback like React's
1807
+ * [`setState`](https://react.dev/reference/react/useState#setstate):
1721
1808
  *
1722
1809
  * ```tsx
1723
1810
  * setSearchParams((searchParams) => {
@@ -1726,6 +1813,12 @@ declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to:
1726
1813
  * });
1727
1814
  * ```
1728
1815
  *
1816
+ * <docs-warning>The function callback version of `setSearchParams` does not support
1817
+ * the [queueing](https://react.dev/reference/react/useState#setstate-parameters)
1818
+ * logic that React's `setState` implements. Multiple calls to `setSearchParams`
1819
+ * in the same tick will not build on the prior value. If you need this behavior,
1820
+ * you can use `setState` manually.</docs-warning>
1821
+ *
1729
1822
  * ### Notes
1730
1823
  *
1731
1824
  * Note that `searchParams` is a stable reference, so you can reliably use it
@@ -2082,6 +2175,7 @@ type FetcherWithComponents<TData> = Fetcher<TData> & {
2082
2175
  * @param options Options
2083
2176
  * @param options.key A unique key to identify the fetcher.
2084
2177
  *
2178
+ *
2085
2179
  * By default, `useFetcher` generates a unique fetcher scoped to that component.
2086
2180
  * If you want to identify a fetcher with your own key such that you can access
2087
2181
  * it from elsewhere in your app, you can do that with the `key` option:
@@ -2236,7 +2330,8 @@ declare function usePrompt({ when, message, }: {
2236
2330
  * @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).
2237
2331
  * @param options Options
2238
2332
  * @param options.relative The relative routing type to use when resolving the
2239
- * `to` location, defaults to `"route"`. See {@link RelativeRoutingType} for more details.
2333
+ * `to` location, defaults to `"route"`. See {@link RelativeRoutingType} for
2334
+ * more details.
2240
2335
  * @returns `true` if there is an active [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
2241
2336
  * to the specified {@link Location}, otherwise `false`.
2242
2337
  */
@@ -2244,34 +2339,64 @@ declare function useViewTransitionState(to: To, { relative }?: {
2244
2339
  relative?: RelativeRoutingType;
2245
2340
  }): boolean;
2246
2341
 
2342
+ /**
2343
+ * @category Types
2344
+ */
2247
2345
  interface StaticRouterProps {
2346
+ /**
2347
+ * The base URL for the static router (default: `/`)
2348
+ */
2248
2349
  basename?: string;
2350
+ /**
2351
+ * The child elements to render inside the static router
2352
+ */
2249
2353
  children?: React.ReactNode;
2354
+ /**
2355
+ * The {@link Location} to render the static router at (default: `/`)
2356
+ */
2250
2357
  location: Partial<Location> | string;
2251
2358
  }
2252
2359
  /**
2253
- * A `<Router>` that may not navigate to any other location. This is useful
2254
- * on the server where there is no stateful UI.
2360
+ * A {@link Router | `<Router>`} that may not navigate to any other {@link Location}.
2361
+ * This is useful on the server where there is no stateful UI.
2255
2362
  *
2256
2363
  * @public
2257
2364
  * @category Declarative Routers
2258
2365
  * @mode declarative
2259
2366
  * @param props Props
2260
- * @param props.basename The base URL for the static router (default: `/`)
2261
- * @param props.children The child elements to render inside the static router
2262
- * @param props.location The location to render the static router at (default: `/`)
2263
- * @returns A React element that renders the static router
2367
+ * @param {StaticRouterProps.basename} props.basename n/a
2368
+ * @param {StaticRouterProps.children} props.children n/a
2369
+ * @param {StaticRouterProps.location} props.location n/a
2370
+ * @returns A React element that renders the static {@link Router | `<Router>`}
2264
2371
  */
2265
2372
  declare function StaticRouter({ basename, children, location: locationProp, }: StaticRouterProps): React.JSX.Element;
2373
+ /**
2374
+ * @category Types
2375
+ */
2266
2376
  interface StaticRouterProviderProps {
2377
+ /**
2378
+ * The {@link StaticHandlerContext} returned from {@link StaticHandler}'s
2379
+ * `query`
2380
+ */
2267
2381
  context: StaticHandlerContext;
2382
+ /**
2383
+ * The static {@link DataRouter} from {@link createStaticRouter}
2384
+ */
2268
2385
  router: Router;
2386
+ /**
2387
+ * Whether to hydrate the router on the client (default `true`)
2388
+ */
2269
2389
  hydrate?: boolean;
2390
+ /**
2391
+ * The [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
2392
+ * to use for the hydration [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
2393
+ * tag
2394
+ */
2270
2395
  nonce?: string;
2271
2396
  }
2272
2397
  /**
2273
- * A Data Router that may not navigate to any other location. This is useful
2274
- * on the server where there is no stateful UI.
2398
+ * A {@link DataRouter} that may not navigate to any other {@link Location}.
2399
+ * This is useful on the server where there is no stateful UI.
2275
2400
  *
2276
2401
  * @example
2277
2402
  * export async function handleRequest(request: Request) {
@@ -2293,11 +2418,10 @@ interface StaticRouterProviderProps {
2293
2418
  * @category Data Routers
2294
2419
  * @mode data
2295
2420
  * @param props Props
2296
- * @param props.context The {@link StaticHandlerContext} returned from `staticHandler.query()`
2297
- * @param props.router The static data router from {@link createStaticRouter}
2298
- * @param props.hydrate Whether to hydrate the router on the client (default `true`)
2299
- * @param props.nonce The [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
2300
- * to use for the hydration `<script>` tag
2421
+ * @param {StaticRouterProviderProps.context} props.context n/a
2422
+ * @param {StaticRouterProviderProps.hydrate} props.hydrate n/a
2423
+ * @param {StaticRouterProviderProps.nonce} props.nonce n/a
2424
+ * @param {StaticRouterProviderProps.router} props.router n/a
2301
2425
  * @returns A React element that renders the static router provider
2302
2426
  */
2303
2427
  declare function StaticRouterProvider({ context, router, hydrate, nonce, }: StaticRouterProviderProps): React.JSX.Element;
@@ -2308,7 +2432,7 @@ type CreateStaticHandlerOptions = Omit<CreateStaticHandlerOptions$1, "mapRoutePr
2308
2432
  * @example
2309
2433
  * export async function handleRequest(request: Request) {
2310
2434
  * let { query, dataRoutes } = createStaticHandler(routes);
2311
- * let context = await query(request));
2435
+ * let context = await query(request);
2312
2436
  *
2313
2437
  * if (context instanceof Response) {
2314
2438
  * return context;
@@ -2324,20 +2448,22 @@ type CreateStaticHandlerOptions = Omit<CreateStaticHandlerOptions$1, "mapRoutePr
2324
2448
  * @public
2325
2449
  * @category Data Routers
2326
2450
  * @mode data
2327
- * @param routes The route objects to create a static handler for
2451
+ * @param routes The {@link RouteObject | route objects} to create a static
2452
+ * handler for
2328
2453
  * @param opts Options
2329
2454
  * @param opts.basename The base URL for the static handler (default: `/`)
2330
2455
  * @param opts.future Future flags for the static handler
2331
- * @returns A static handler that can be used to query data for the provided routes
2456
+ * @returns A static handler that can be used to query data for the provided
2457
+ * routes
2332
2458
  */
2333
2459
  declare function createStaticHandler(routes: RouteObject[], opts?: CreateStaticHandlerOptions): StaticHandler;
2334
2460
  /**
2335
- * Create a static data router for server-side rendering
2461
+ * Create a static {@link DataRouter} for server-side rendering
2336
2462
  *
2337
2463
  * @example
2338
2464
  * export async function handleRequest(request: Request) {
2339
2465
  * let { query, dataRoutes } = createStaticHandler(routes);
2340
- * let context = await query(request));
2466
+ * let context = await query(request);
2341
2467
  *
2342
2468
  * if (context instanceof Response) {
2343
2469
  * return context;
@@ -2353,14 +2479,15 @@ declare function createStaticHandler(routes: RouteObject[], opts?: CreateStaticH
2353
2479
  * @public
2354
2480
  * @category Data Routers
2355
2481
  * @mode data
2356
- * @param routes The route objects to create a static data router for
2357
- * @param context The static handler context returned from `staticHandler.query()`
2482
+ * @param routes The route objects to create a static {@link DataRouter} for
2483
+ * @param context The {@link StaticHandlerContext} returned from {@link StaticHandler}'s
2484
+ * `query`
2358
2485
  * @param opts Options
2359
- * @param opts.future Future flags for the static data router
2360
- * @returns A static data router that can be used to render the provided routes
2486
+ * @param opts.future Future flags for the static {@link DataRouter}
2487
+ * @returns A static {@link DataRouter} that can be used to render the provided routes
2361
2488
  */
2362
2489
  declare function createStaticRouter(routes: RouteObject[], context: StaticHandlerContext, opts?: {
2363
2490
  future?: Partial<FutureConfig$1>;
2364
2491
  }): Router;
2365
2492
 
2366
- export { type PrefetchBehavior as $, type AssetsManifest as A, type BrowserRouterProps as B, useViewTransitionState as C, type DOMRouterOpts as D, type EntryContext as E, type FutureConfig as F, type FetcherSubmitOptions as G, type HashRouterProps as H, type SubmitOptions as I, type SubmitTarget as J, createSearchParams as K, type LinkProps as L, type StaticRouterProps as M, type NavLinkProps as N, type StaticRouterProviderProps as O, type ParamKeyValuePair as P, createStaticHandler as Q, createStaticRouter as R, type ServerBuild as S, StaticRouter as T, type URLSearchParamsInit as U, StaticRouterProvider as V, Meta as W, Links as X, Scripts as Y, PrefetchPageLinks as Z, type ScriptsProps as _, type HistoryRouterProps as a, type DiscoverBehavior as a0, type HandleDataRequestFunction as a1, type HandleDocumentRequestFunction as a2, type HandleErrorFunction as a3, type ServerEntryModule as a4, FrameworkContext as a5, createClientRoutes as a6, createClientRoutesWithHMRRevalidationOptOut as a7, shouldHydrateRouteLoader as a8, useScrollRestoration as a9, type NavLinkRenderProps as b, type FetcherFormProps as c, type FormProps as d, type ScrollRestorationProps as e, type SetURLSearchParams as f, type SubmitFunction as g, type FetcherSubmitFunction as h, type FetcherWithComponents as i, createBrowserRouter as j, createHashRouter as k, BrowserRouter as l, HashRouter as m, Link as n, HistoryRouter as o, NavLink as p, Form as q, ScrollRestoration as r, useSearchParams as s, useSubmit as t, useLinkClickHandler as u, useFormAction as v, useFetcher as w, useFetchers as x, useBeforeUnload as y, usePrompt as z };
2493
+ export { type ScriptsProps as $, type AssetsManifest as A, type BrowserRouterProps as B, useViewTransitionState as C, type DOMRouterOpts as D, type EntryContext as E, type FutureConfig as F, type FetcherSubmitOptions as G, type HashRouterProps as H, type SubmitOptions as I, type SubmitTarget as J, createSearchParams as K, type LinkProps as L, type StaticRouterProps as M, type NavLinkProps as N, type StaticRouterProviderProps as O, type ParamKeyValuePair as P, createStaticHandler as Q, createStaticRouter as R, type ServerBuild as S, StaticRouter as T, type URLSearchParamsInit as U, StaticRouterProvider as V, Meta as W, Links as X, Scripts as Y, PrefetchPageLinks as Z, type LinksProps as _, type HistoryRouterProps as a, type PrefetchBehavior as a0, type DiscoverBehavior as a1, type HandleDataRequestFunction as a2, type HandleDocumentRequestFunction as a3, type HandleErrorFunction as a4, type ServerEntryModule as a5, FrameworkContext as a6, createClientRoutes as a7, createClientRoutesWithHMRRevalidationOptOut as a8, shouldHydrateRouteLoader as a9, useScrollRestoration as aa, type NavLinkRenderProps as b, type FetcherFormProps as c, type FormProps as d, type ScrollRestorationProps as e, type SetURLSearchParams as f, type SubmitFunction as g, type FetcherSubmitFunction as h, type FetcherWithComponents as i, createBrowserRouter as j, createHashRouter as k, BrowserRouter as l, HashRouter as m, Link as n, HistoryRouter as o, NavLink as p, Form as q, ScrollRestoration as r, useSearchParams as s, useSubmit as t, useLinkClickHandler as u, useFormAction as v, useFetcher as w, useFetchers as x, useBeforeUnload as y, usePrompt as z };