react-router 7.18.0 → 8.0.0-pre.1

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 (285) hide show
  1. package/dist/development/dom-export.d.ts +6 -172
  2. package/dist/development/dom-export.js +12 -1009
  3. package/dist/development/index-react-server-client.d.ts +7 -4
  4. package/dist/development/index-react-server-client.js +8 -52
  5. package/dist/development/index-react-server.d.ts +1650 -1641
  6. package/dist/development/index-react-server.js +2882 -3664
  7. package/dist/development/index.d.ts +42 -1476
  8. package/dist/development/index.js +36 -2553
  9. package/dist/development/lib/actions.js +50 -0
  10. package/dist/development/lib/components.d.ts +1030 -0
  11. package/dist/development/lib/components.js +841 -0
  12. package/dist/development/lib/context.d.ts +83 -0
  13. package/dist/development/lib/context.js +41 -0
  14. package/dist/development/lib/dom/dom.d.ts +119 -0
  15. package/dist/development/lib/dom/dom.js +143 -0
  16. package/dist/development/lib/dom/lib.d.ts +2053 -0
  17. package/dist/development/lib/dom/lib.js +1271 -0
  18. package/dist/development/lib/dom/server.d.ts +138 -0
  19. package/dist/development/lib/dom/server.js +301 -0
  20. package/dist/development/lib/dom/ssr/components.d.ts +198 -0
  21. package/dist/development/lib/dom/ssr/components.js +589 -0
  22. package/dist/development/lib/dom/ssr/data.js +29 -0
  23. package/dist/development/lib/dom/ssr/entry.d.ts +60 -0
  24. package/dist/development/lib/dom/ssr/errorBoundaries.d.ts +27 -0
  25. package/dist/development/lib/dom/ssr/errorBoundaries.js +87 -0
  26. package/dist/development/lib/dom/ssr/fallback.js +33 -0
  27. package/dist/development/lib/dom/ssr/fog-of-war.d.ts +12 -0
  28. package/dist/development/lib/dom/ssr/fog-of-war.js +180 -0
  29. package/dist/development/lib/dom/ssr/hydration.d.ts +32 -0
  30. package/dist/development/lib/dom/ssr/hydration.js +29 -0
  31. package/dist/development/lib/dom/ssr/invariant.js +16 -0
  32. package/dist/development/lib/dom/ssr/links.js +170 -0
  33. package/dist/development/lib/dom/ssr/markup.js +24 -0
  34. package/dist/development/lib/dom/ssr/routeModules.d.ts +206 -0
  35. package/dist/development/lib/dom/ssr/routeModules.js +31 -0
  36. package/dist/development/lib/dom/ssr/routes-test-stub.d.ts +62 -0
  37. package/dist/development/lib/dom/ssr/routes-test-stub.js +108 -0
  38. package/dist/development/lib/dom/ssr/routes.d.ts +33 -0
  39. package/dist/development/lib/dom/ssr/routes.js +303 -0
  40. package/dist/development/lib/dom/ssr/server.d.ts +48 -0
  41. package/dist/development/lib/dom/ssr/server.js +69 -0
  42. package/dist/development/lib/dom/ssr/single-fetch.d.ts +14 -0
  43. package/dist/development/lib/dom/ssr/single-fetch.js +345 -0
  44. package/dist/development/lib/dom-export/dom-router-provider.d.ts +9 -0
  45. package/dist/development/lib/dom-export/dom-router-provider.js +22 -0
  46. package/dist/development/lib/dom-export/hydrated-router.d.ts +125 -0
  47. package/dist/development/lib/dom-export/hydrated-router.js +150 -0
  48. package/dist/development/lib/errors.js +29 -0
  49. package/dist/development/lib/hooks.d.ts +947 -0
  50. package/dist/development/lib/hooks.js +1388 -0
  51. package/dist/development/lib/href.d.ts +20 -0
  52. package/dist/development/lib/href.js +50 -0
  53. package/dist/development/lib/router/history.d.ts +258 -0
  54. package/dist/development/lib/router/history.js +372 -0
  55. package/dist/development/lib/router/instrumentation.d.ts +86 -0
  56. package/dist/development/lib/router/instrumentation.js +213 -0
  57. package/dist/development/lib/router/links.d.ts +114 -0
  58. package/dist/development/lib/router/router.d.ts +663 -0
  59. package/dist/development/lib/router/router.js +2988 -0
  60. package/dist/development/lib/router/url.js +18 -0
  61. package/dist/development/lib/router/utils.d.ts +948 -0
  62. package/dist/development/lib/router/utils.js +810 -0
  63. package/dist/development/lib/rsc/browser.d.ts +137 -0
  64. package/dist/development/lib/rsc/browser.js +603 -0
  65. package/dist/development/lib/rsc/errorBoundaries.d.ts +11 -0
  66. package/dist/development/lib/rsc/errorBoundaries.js +90 -0
  67. package/dist/development/lib/rsc/html-stream/browser.d.ts +48 -0
  68. package/dist/development/lib/rsc/html-stream/browser.js +74 -0
  69. package/dist/development/lib/rsc/html-stream/server.js +78 -0
  70. package/dist/development/lib/rsc/route-modules.js +27 -0
  71. package/dist/development/lib/rsc/server.rsc.d.ts +219 -0
  72. package/dist/development/lib/rsc/server.ssr.d.ts +129 -0
  73. package/dist/development/lib/rsc/server.ssr.js +404 -0
  74. package/dist/development/lib/server-runtime/build.d.ts +66 -0
  75. package/dist/development/lib/server-runtime/cookies.d.ts +66 -0
  76. package/dist/development/lib/server-runtime/cookies.js +139 -0
  77. package/dist/development/lib/server-runtime/crypto.js +43 -0
  78. package/dist/development/lib/server-runtime/data.d.ts +13 -0
  79. package/dist/development/lib/server-runtime/data.js +25 -0
  80. package/dist/development/lib/server-runtime/dev.d.ts +9 -0
  81. package/dist/development/lib/server-runtime/dev.js +26 -0
  82. package/dist/development/lib/server-runtime/entry.js +20 -0
  83. package/dist/development/lib/server-runtime/errors.js +75 -0
  84. package/dist/development/lib/server-runtime/headers.js +73 -0
  85. package/dist/development/lib/server-runtime/invariant.js +19 -0
  86. package/dist/development/lib/server-runtime/mode.d.ts +12 -0
  87. package/dist/development/lib/server-runtime/mode.js +25 -0
  88. package/dist/development/lib/server-runtime/routeMatching.js +28 -0
  89. package/dist/development/lib/server-runtime/routes.d.ts +13 -0
  90. package/dist/development/lib/server-runtime/routes.js +74 -0
  91. package/dist/development/lib/server-runtime/server.d.ts +10 -0
  92. package/dist/development/lib/server-runtime/server.js +345 -0
  93. package/dist/development/lib/server-runtime/serverHandoff.js +17 -0
  94. package/dist/development/lib/server-runtime/sessions/cookieStorage.d.ts +25 -0
  95. package/dist/development/lib/server-runtime/sessions/cookieStorage.js +45 -0
  96. package/dist/development/lib/server-runtime/sessions/memoryStorage.d.ts +23 -0
  97. package/dist/development/lib/server-runtime/sessions/memoryStorage.js +52 -0
  98. package/dist/development/lib/server-runtime/sessions.d.ts +145 -0
  99. package/dist/development/lib/server-runtime/sessions.js +98 -0
  100. package/dist/development/lib/server-runtime/single-fetch.d.ts +7 -0
  101. package/dist/development/lib/server-runtime/single-fetch.js +215 -0
  102. package/dist/development/lib/server-runtime/urls.js +28 -0
  103. package/dist/development/lib/server-runtime/warnings.js +20 -0
  104. package/dist/development/lib/types/future.d.ts +9 -0
  105. package/dist/development/lib/types/internal.d.ts +26 -177
  106. package/dist/development/lib/types/internal.js +3 -2
  107. package/dist/development/{register-roq_0qYo.d.ts → lib/types/register.d.ts} +9 -15
  108. package/dist/development/lib/types/route-data.d.ts +113 -0
  109. package/dist/development/lib/types/route-module-annotations.d.ts +149 -0
  110. package/dist/development/lib/types/route-module.d.ts +19 -0
  111. package/dist/development/lib/types/serializes-to.d.ts +13 -0
  112. package/dist/development/lib/types/utils.d.ts +11 -0
  113. package/dist/development/vendor/turbo-stream-v2/flatten.js +159 -0
  114. package/dist/development/vendor/turbo-stream-v2/turbo-stream.js +179 -0
  115. package/dist/development/vendor/turbo-stream-v2/unflatten.js +199 -0
  116. package/dist/development/vendor/turbo-stream-v2/utils.js +39 -0
  117. package/dist/production/dom-export.d.ts +6 -172
  118. package/dist/production/dom-export.js +12 -1009
  119. package/dist/production/index-react-server-client.d.ts +7 -4
  120. package/dist/production/index-react-server-client.js +8 -52
  121. package/dist/production/index-react-server.d.ts +1650 -1641
  122. package/dist/production/index-react-server.js +2873 -3664
  123. package/dist/production/index.d.ts +42 -1476
  124. package/dist/production/index.js +36 -2553
  125. package/dist/production/lib/actions.js +50 -0
  126. package/dist/production/lib/components.d.ts +1030 -0
  127. package/dist/production/lib/components.js +841 -0
  128. package/dist/production/lib/context.d.ts +83 -0
  129. package/dist/production/lib/context.js +41 -0
  130. package/dist/production/lib/dom/dom.d.ts +119 -0
  131. package/dist/production/lib/dom/dom.js +143 -0
  132. package/dist/production/lib/dom/lib.d.ts +2053 -0
  133. package/dist/production/lib/dom/lib.js +1271 -0
  134. package/dist/production/lib/dom/server.d.ts +138 -0
  135. package/dist/production/lib/dom/server.js +301 -0
  136. package/dist/production/lib/dom/ssr/components.d.ts +198 -0
  137. package/dist/production/lib/dom/ssr/components.js +589 -0
  138. package/dist/production/lib/dom/ssr/data.js +29 -0
  139. package/dist/production/lib/dom/ssr/entry.d.ts +60 -0
  140. package/dist/production/lib/dom/ssr/errorBoundaries.d.ts +27 -0
  141. package/dist/production/lib/dom/ssr/errorBoundaries.js +87 -0
  142. package/dist/production/lib/dom/ssr/fallback.js +23 -0
  143. package/dist/production/lib/dom/ssr/fog-of-war.d.ts +12 -0
  144. package/dist/production/lib/dom/ssr/fog-of-war.js +180 -0
  145. package/dist/production/lib/dom/ssr/hydration.d.ts +32 -0
  146. package/dist/production/lib/dom/ssr/hydration.js +29 -0
  147. package/dist/production/lib/dom/ssr/invariant.js +16 -0
  148. package/dist/production/lib/dom/ssr/links.js +170 -0
  149. package/dist/production/lib/dom/ssr/markup.js +24 -0
  150. package/dist/production/lib/dom/ssr/routeModules.d.ts +206 -0
  151. package/dist/production/lib/dom/ssr/routeModules.js +31 -0
  152. package/dist/production/lib/dom/ssr/routes-test-stub.d.ts +62 -0
  153. package/dist/production/lib/dom/ssr/routes-test-stub.js +108 -0
  154. package/dist/production/lib/dom/ssr/routes.d.ts +33 -0
  155. package/dist/production/lib/dom/ssr/routes.js +303 -0
  156. package/dist/production/lib/dom/ssr/server.d.ts +48 -0
  157. package/dist/production/lib/dom/ssr/server.js +69 -0
  158. package/dist/production/lib/dom/ssr/single-fetch.d.ts +14 -0
  159. package/dist/production/lib/dom/ssr/single-fetch.js +345 -0
  160. package/dist/production/lib/dom-export/dom-router-provider.d.ts +9 -0
  161. package/dist/production/lib/dom-export/dom-router-provider.js +22 -0
  162. package/dist/production/lib/dom-export/hydrated-router.d.ts +125 -0
  163. package/dist/production/lib/dom-export/hydrated-router.js +150 -0
  164. package/dist/production/lib/errors.js +29 -0
  165. package/dist/production/lib/hooks.d.ts +947 -0
  166. package/dist/production/lib/hooks.js +1373 -0
  167. package/dist/production/lib/href.d.ts +20 -0
  168. package/dist/production/lib/href.js +50 -0
  169. package/dist/production/lib/router/history.d.ts +258 -0
  170. package/dist/production/lib/router/history.js +372 -0
  171. package/dist/production/lib/router/instrumentation.d.ts +86 -0
  172. package/dist/production/lib/router/instrumentation.js +213 -0
  173. package/dist/production/lib/router/links.d.ts +114 -0
  174. package/dist/production/lib/router/router.d.ts +663 -0
  175. package/dist/production/lib/router/router.js +2988 -0
  176. package/dist/production/lib/router/url.js +18 -0
  177. package/dist/production/lib/router/utils.d.ts +948 -0
  178. package/dist/production/lib/router/utils.js +801 -0
  179. package/dist/production/lib/rsc/browser.d.ts +137 -0
  180. package/dist/production/lib/rsc/browser.js +603 -0
  181. package/dist/production/lib/rsc/errorBoundaries.d.ts +11 -0
  182. package/dist/production/lib/rsc/errorBoundaries.js +90 -0
  183. package/dist/production/lib/rsc/html-stream/browser.d.ts +48 -0
  184. package/dist/production/lib/rsc/html-stream/browser.js +74 -0
  185. package/dist/production/lib/rsc/html-stream/server.js +78 -0
  186. package/dist/production/lib/rsc/route-modules.js +27 -0
  187. package/dist/production/lib/rsc/server.rsc.d.ts +219 -0
  188. package/dist/production/lib/rsc/server.ssr.d.ts +129 -0
  189. package/dist/production/lib/rsc/server.ssr.js +404 -0
  190. package/dist/production/lib/server-runtime/build.d.ts +66 -0
  191. package/dist/production/lib/server-runtime/cookies.d.ts +66 -0
  192. package/dist/production/lib/server-runtime/cookies.js +139 -0
  193. package/dist/production/lib/server-runtime/crypto.js +43 -0
  194. package/dist/production/lib/server-runtime/data.d.ts +13 -0
  195. package/dist/production/lib/server-runtime/data.js +25 -0
  196. package/dist/production/lib/server-runtime/dev.d.ts +9 -0
  197. package/dist/production/lib/server-runtime/dev.js +26 -0
  198. package/dist/production/lib/server-runtime/entry.js +20 -0
  199. package/dist/production/lib/server-runtime/errors.js +75 -0
  200. package/dist/production/lib/server-runtime/headers.js +73 -0
  201. package/dist/production/lib/server-runtime/invariant.js +19 -0
  202. package/dist/production/lib/server-runtime/mode.d.ts +12 -0
  203. package/dist/production/lib/server-runtime/mode.js +25 -0
  204. package/dist/production/lib/server-runtime/routeMatching.js +28 -0
  205. package/dist/production/lib/server-runtime/routes.d.ts +13 -0
  206. package/dist/production/lib/server-runtime/routes.js +74 -0
  207. package/dist/production/lib/server-runtime/server.d.ts +10 -0
  208. package/dist/production/lib/server-runtime/server.js +345 -0
  209. package/dist/production/lib/server-runtime/serverHandoff.js +17 -0
  210. package/dist/production/lib/server-runtime/sessions/cookieStorage.d.ts +25 -0
  211. package/dist/production/lib/server-runtime/sessions/cookieStorage.js +45 -0
  212. package/dist/production/lib/server-runtime/sessions/memoryStorage.d.ts +23 -0
  213. package/dist/production/lib/server-runtime/sessions/memoryStorage.js +52 -0
  214. package/dist/production/lib/server-runtime/sessions.d.ts +145 -0
  215. package/dist/production/lib/server-runtime/sessions.js +98 -0
  216. package/dist/production/lib/server-runtime/single-fetch.d.ts +7 -0
  217. package/dist/production/lib/server-runtime/single-fetch.js +215 -0
  218. package/dist/production/lib/server-runtime/urls.js +28 -0
  219. package/dist/production/lib/server-runtime/warnings.js +20 -0
  220. package/dist/production/lib/types/future.d.ts +9 -0
  221. package/dist/production/lib/types/internal.d.ts +26 -177
  222. package/dist/production/lib/types/internal.js +3 -2
  223. package/dist/production/{register-roq_0qYo.d.ts → lib/types/register.d.ts} +9 -15
  224. package/dist/production/lib/types/route-data.d.ts +113 -0
  225. package/dist/production/lib/types/route-module-annotations.d.ts +149 -0
  226. package/dist/production/lib/types/route-module.d.ts +19 -0
  227. package/dist/production/lib/types/serializes-to.d.ts +13 -0
  228. package/dist/production/lib/types/utils.d.ts +11 -0
  229. package/dist/production/vendor/turbo-stream-v2/flatten.js +159 -0
  230. package/dist/production/vendor/turbo-stream-v2/turbo-stream.js +179 -0
  231. package/dist/production/vendor/turbo-stream-v2/unflatten.js +199 -0
  232. package/dist/production/vendor/turbo-stream-v2/utils.js +39 -0
  233. package/docs/explanation/code-splitting.md +16 -0
  234. package/docs/how-to/middleware.md +6 -41
  235. package/docs/how-to/react-server-components.md +1 -1
  236. package/docs/upgrading/future.md +0 -249
  237. package/package.json +43 -87
  238. package/dist/development/browser-B2PdsXXH.d.ts +0 -318
  239. package/dist/development/browser-DBmQ1yAR.d.mts +0 -318
  240. package/dist/development/chunk-4ZMWKKQ3.mjs +0 -11606
  241. package/dist/development/chunk-E4MTK73K.mjs +0 -2517
  242. package/dist/development/chunk-U7ORXROY.js +0 -10307
  243. package/dist/development/chunk-WW7PN6QI.js +0 -188
  244. package/dist/development/chunk-YL5M26XI.js +0 -1366
  245. package/dist/development/context-CeD5LmaF.d.mts +0 -1779
  246. package/dist/development/data-CjO11-hU.d.ts +0 -1740
  247. package/dist/development/data-DEjBmEfD.d.mts +0 -1740
  248. package/dist/development/dom-export.d.mts +0 -172
  249. package/dist/development/dom-export.mjs +0 -1010
  250. package/dist/development/index-react-server-client-3ykjivgQ.d.ts +0 -3677
  251. package/dist/development/index-react-server-client-CACgcj2J.d.mts +0 -2614
  252. package/dist/development/index-react-server-client.d.mts +0 -4
  253. package/dist/development/index-react-server-client.mjs +0 -59
  254. package/dist/development/index-react-server.d.mts +0 -2711
  255. package/dist/development/index-react-server.mjs +0 -3803
  256. package/dist/development/index.d.mts +0 -1479
  257. package/dist/development/index.mjs +0 -275
  258. package/dist/development/instrumentation-Dkmpzd13.d.ts +0 -715
  259. package/dist/development/lib/types/internal.d.mts +0 -184
  260. package/dist/development/lib/types/internal.mjs +0 -10
  261. package/dist/development/register-CmkRspdl.d.mts +0 -30
  262. package/dist/production/browser-B2PdsXXH.d.ts +0 -318
  263. package/dist/production/browser-DBmQ1yAR.d.mts +0 -318
  264. package/dist/production/chunk-3Z6WS2WZ.js +0 -188
  265. package/dist/production/chunk-BIP66BKV.js +0 -1366
  266. package/dist/production/chunk-EGOTSXNH.mjs +0 -2517
  267. package/dist/production/chunk-IUPBOWYO.js +0 -10307
  268. package/dist/production/chunk-M7NGGUU6.mjs +0 -11606
  269. package/dist/production/context-CeD5LmaF.d.mts +0 -1779
  270. package/dist/production/data-CjO11-hU.d.ts +0 -1740
  271. package/dist/production/data-DEjBmEfD.d.mts +0 -1740
  272. package/dist/production/dom-export.d.mts +0 -172
  273. package/dist/production/dom-export.mjs +0 -1010
  274. package/dist/production/index-react-server-client-3ykjivgQ.d.ts +0 -3677
  275. package/dist/production/index-react-server-client-CACgcj2J.d.mts +0 -2614
  276. package/dist/production/index-react-server-client.d.mts +0 -4
  277. package/dist/production/index-react-server-client.mjs +0 -59
  278. package/dist/production/index-react-server.d.mts +0 -2711
  279. package/dist/production/index-react-server.mjs +0 -3803
  280. package/dist/production/index.d.mts +0 -1479
  281. package/dist/production/index.mjs +0 -275
  282. package/dist/production/instrumentation-Dkmpzd13.d.ts +0 -715
  283. package/dist/production/lib/types/internal.d.mts +0 -184
  284. package/dist/production/lib/types/internal.mjs +0 -10
  285. package/dist/production/register-CmkRspdl.d.mts +0 -30
@@ -1,3677 +0,0 @@
1
- import { l as ServerInstrumentation, H as HydrationState, e as StaticHandlerContext, c as RelativeRoutingType, a as Router$1, g as RouterState, R as RouterInit, t as FutureConfig$1, C as ClientInstrumentation, d as GetScrollRestorationKeyFunction, F as Fetcher, B as BlockerFunction, u as CreateStaticHandlerOptions$1, S as StaticHandler } from './instrumentation-Dkmpzd13.js';
2
- import * as React from 'react';
3
- import { p as RouteManifest, aE as ServerRouteModule, t as MiddlewareEnabled, c as RouterContextProvider, u as AppLoadContext, s as LoaderFunctionArgs, a0 as ActionFunctionArgs, O as RouteModules, n as DataRouteObject, a as ClientLoaderFunction, o as RouteBranch, aF as TrackedPromise, f as History, T as To, L as Location, i as Action, ac as RouteMatch, Y as InitialEntry, _ as NonIndexRouteObject, a7 as LazyRouteFunction, Z as IndexRouteObject, P as Params, l as DataStrategyFunction, m as PatchRoutesOnNavigationFunction, e as RouteObject, U as UIMatch, q as HTMLFormMethod, F as FormEncType, av as PageLinkDescriptor, Q as SerializeFrom } from './data-CjO11-hU.js';
4
-
5
- type ServerRouteManifest = RouteManifest<Omit<ServerRoute, "children">>;
6
- interface ServerRoute extends Route$1 {
7
- children: ServerRoute[];
8
- module: ServerRouteModule;
9
- }
10
-
11
- type OptionalCriticalCss = CriticalCss | undefined;
12
- /**
13
- * The output of the compiler for the server build.
14
- */
15
- interface ServerBuild {
16
- entry: {
17
- module: ServerEntryModule;
18
- };
19
- routes: ServerRouteManifest;
20
- assets: AssetsManifest;
21
- basename?: string;
22
- publicPath: string;
23
- assetsBuildDirectory: string;
24
- future: FutureConfig;
25
- ssr: boolean;
26
- unstable_getCriticalCss?: (args: {
27
- pathname: string;
28
- }) => OptionalCriticalCss | Promise<OptionalCriticalCss>;
29
- /**
30
- * @deprecated This is now done via a custom header during prerendering
31
- */
32
- isSpaMode: boolean;
33
- prerender: string[];
34
- routeDiscovery: {
35
- mode: "lazy" | "initial";
36
- manifestPath: string;
37
- };
38
- allowedActionOrigins?: string[] | false;
39
- }
40
- interface HandleDocumentRequestFunction {
41
- (request: Request, responseStatusCode: number, responseHeaders: Headers, context: EntryContext, loadContext: MiddlewareEnabled extends true ? RouterContextProvider : AppLoadContext): Promise<Response> | Response;
42
- }
43
- interface HandleDataRequestFunction {
44
- (response: Response, args: {
45
- request: LoaderFunctionArgs["request"] | ActionFunctionArgs["request"];
46
- context: LoaderFunctionArgs["context"] | ActionFunctionArgs["context"];
47
- params: LoaderFunctionArgs["params"] | ActionFunctionArgs["params"];
48
- }): Promise<Response> | Response;
49
- }
50
- interface HandleErrorFunction {
51
- (error: unknown, args: {
52
- request: LoaderFunctionArgs["request"] | ActionFunctionArgs["request"];
53
- context: LoaderFunctionArgs["context"] | ActionFunctionArgs["context"];
54
- params: LoaderFunctionArgs["params"] | ActionFunctionArgs["params"];
55
- }): void;
56
- }
57
- /**
58
- * A module that serves as the entry point for a Remix app during server
59
- * rendering.
60
- */
61
- interface ServerEntryModule {
62
- default: HandleDocumentRequestFunction;
63
- handleDataRequest?: HandleDataRequestFunction;
64
- handleError?: HandleErrorFunction;
65
- instrumentations?: ServerInstrumentation[];
66
- streamTimeout?: number;
67
- }
68
-
69
- interface Route$1 {
70
- index?: boolean;
71
- caseSensitive?: boolean;
72
- id: string;
73
- parentId?: string;
74
- path?: string;
75
- }
76
- interface EntryRoute extends Route$1 {
77
- hasAction: boolean;
78
- hasLoader: boolean;
79
- hasClientAction: boolean;
80
- hasClientLoader: boolean;
81
- hasClientMiddleware: boolean;
82
- hasErrorBoundary: boolean;
83
- imports?: string[];
84
- css?: string[];
85
- module: string;
86
- clientActionModule: string | undefined;
87
- clientLoaderModule: string | undefined;
88
- clientMiddlewareModule: string | undefined;
89
- hydrateFallbackModule: string | undefined;
90
- parentId?: string;
91
- }
92
- declare function createClientRoutesWithHMRRevalidationOptOut(needsRevalidation: Set<string>, manifest: RouteManifest<EntryRoute>, routeModulesCache: RouteModules, initialState: HydrationState, ssr: boolean, isSpaMode: boolean): DataRouteObject[];
93
- declare function createClientRoutes(manifest: RouteManifest<EntryRoute>, routeModulesCache: RouteModules, initialState: HydrationState | null, ssr: boolean, isSpaMode: boolean, parentId?: string, routesByParentId?: Record<string, Omit<EntryRoute, "children">[]>, needsRevalidation?: Set<string>): DataRouteObject[];
94
- declare function shouldHydrateRouteLoader(routeId: string, clientLoader: ClientLoaderFunction | undefined, hasLoader: boolean, isSpaMode: boolean): boolean;
95
-
96
- type SerializedError = {
97
- message: string;
98
- stack?: string;
99
- };
100
- interface FrameworkContextObject {
101
- manifest: AssetsManifest;
102
- routeModules: RouteModules;
103
- criticalCss?: CriticalCss;
104
- serverHandoffString?: string;
105
- future: FutureConfig;
106
- ssr: boolean;
107
- isSpaMode: boolean;
108
- routeDiscovery: ServerBuild["routeDiscovery"];
109
- nonce?: string;
110
- serializeError?(error: Error): SerializedError;
111
- renderMeta?: {
112
- didRenderScripts?: boolean;
113
- streamCache?: Record<number, Promise<void> & {
114
- result?: {
115
- done: boolean;
116
- value: string;
117
- };
118
- error?: unknown;
119
- }>;
120
- };
121
- }
122
- interface EntryContext extends FrameworkContextObject {
123
- branches: RouteBranch<DataRouteObject>[];
124
- staticHandlerContext: StaticHandlerContext;
125
- serverHandoffStream?: ReadableStream<Uint8Array>;
126
- }
127
- interface FutureConfig {
128
- v8_passThroughRequests: boolean;
129
- v8_trailingSlashAwareDataRequests: boolean;
130
- v8_middleware: boolean;
131
- }
132
- type CriticalCss = string | {
133
- rel: "stylesheet";
134
- href: string;
135
- };
136
- interface AssetsManifest {
137
- entry: {
138
- imports: string[];
139
- module: string;
140
- };
141
- routes: RouteManifest<EntryRoute>;
142
- url: string;
143
- version: string;
144
- hmr?: {
145
- timestamp?: number;
146
- runtime: string;
147
- };
148
- sri?: Record<string, string> | true;
149
- }
150
-
151
- interface DataRouterContextObject extends Omit<NavigationContextObject, "future" | "useTransitions"> {
152
- router: Router$1;
153
- staticContext?: StaticHandlerContext;
154
- onError?: ClientOnErrorFunction;
155
- }
156
- declare const DataRouterContext: React.Context<DataRouterContextObject | null>;
157
- declare const DataRouterStateContext: React.Context<RouterState | null>;
158
- type ViewTransitionContextObject = {
159
- isTransitioning: false;
160
- } | {
161
- isTransitioning: true;
162
- flushSync: boolean;
163
- currentLocation: Location;
164
- nextLocation: Location;
165
- };
166
- declare const ViewTransitionContext: React.Context<ViewTransitionContextObject>;
167
- type FetchersContextObject = Map<string, any>;
168
- declare const FetchersContext: React.Context<FetchersContextObject>;
169
- declare const AwaitContext: React.Context<TrackedPromise | null>;
170
- declare const AwaitContextProvider: (props: React.ComponentProps<typeof AwaitContext.Provider>) => React.FunctionComponentElement<React.ProviderProps<TrackedPromise | null>>;
171
- interface NavigateOptions {
172
- /** Replace the current entry in the history stack instead of pushing a new one */
173
- replace?: boolean;
174
- /** Masked URL */
175
- mask?: To;
176
- /** Adds persistent client side routing state to the next location */
177
- state?: any;
178
- /** If you are using {@link ScrollRestoration `<ScrollRestoration>`}, prevent the scroll position from being reset to the top of the window when navigating */
179
- preventScrollReset?: boolean;
180
- /** Defines the relative path behavior for the link. "route" will use the route hierarchy so ".." will remove all URL segments of the current route pattern while "path" will use the URL path so ".." will remove one URL segment. */
181
- relative?: RelativeRoutingType;
182
- /** Wraps the initial state update for this navigation in a {@link https://react.dev/reference/react-dom/flushSync ReactDOM.flushSync} call instead of the default {@link https://react.dev/reference/react/startTransition React.startTransition} */
183
- flushSync?: boolean;
184
- /** Enables a {@link https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API View Transition} for this navigation by wrapping the final state update in `document.startViewTransition()`. If you need to apply specific styles for this view transition, you will also need to leverage the {@link useViewTransitionState `useViewTransitionState()`} hook. */
185
- viewTransition?: boolean;
186
- /** Specifies the default revalidation behavior after this submission */
187
- defaultShouldRevalidate?: boolean;
188
- }
189
- /**
190
- * A Navigator is a "location changer"; it's how you get to different locations.
191
- *
192
- * Every history instance conforms to the Navigator interface, but the
193
- * distinction is useful primarily when it comes to the low-level `<Router>` API
194
- * where both the location and a navigator must be provided separately in order
195
- * to avoid "tearing" that may occur in a suspense-enabled app if the action
196
- * and/or location were to be read directly from the history instance.
197
- */
198
- interface Navigator {
199
- createHref: History["createHref"];
200
- encodeLocation?: History["encodeLocation"];
201
- go: History["go"];
202
- push(to: To, state?: any, opts?: NavigateOptions): void;
203
- replace(to: To, state?: any, opts?: NavigateOptions): void;
204
- }
205
- interface NavigationContextObject {
206
- basename: string;
207
- navigator: Navigator;
208
- static: boolean;
209
- useTransitions: boolean | undefined;
210
- future: {};
211
- }
212
- declare const NavigationContext: React.Context<NavigationContextObject>;
213
- interface LocationContextObject {
214
- location: Location;
215
- navigationType: Action;
216
- }
217
- declare const LocationContext: React.Context<LocationContextObject>;
218
- interface RouteContextObject {
219
- outlet: React.ReactElement | null;
220
- matches: RouteMatch[];
221
- isDataRoute: boolean;
222
- }
223
- declare const RouteContext: React.Context<RouteContextObject>;
224
-
225
- declare function mapRouteProperties(route: RouteObject): Partial<RouteObject> & {
226
- hasErrorBoundary: boolean;
227
- };
228
- declare const hydrationRouteProperties: (keyof RouteObject)[];
229
- /**
230
- * @category Data Routers
231
- */
232
- interface MemoryRouterOpts {
233
- /**
234
- * Basename path for the application.
235
- */
236
- basename?: string;
237
- /**
238
- * A function that returns an {@link RouterContextProvider} instance
239
- * which is provided as the `context` argument to client [`action`](../../start/data/route-object#action)s,
240
- * [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
241
- * This function is called to generate a fresh `context` instance on each
242
- * navigation or fetcher call.
243
- */
244
- getContext?: RouterInit["getContext"];
245
- /**
246
- * Future flags to enable for the router.
247
- */
248
- future?: Partial<FutureConfig$1>;
249
- /**
250
- * Hydration data to initialize the router with if you have already performed
251
- * data loading on the server.
252
- */
253
- hydrationData?: HydrationState;
254
- /**
255
- * Initial entries in the in-memory history stack
256
- */
257
- initialEntries?: InitialEntry[];
258
- /**
259
- * Index of `initialEntries` the application should initialize to
260
- */
261
- initialIndex?: number;
262
- /**
263
- * Array of instrumentation objects allowing you to instrument the router and
264
- * individual routes prior to router initialization (and on any subsequently
265
- * added routes via `route.lazy` or `patchRoutesOnNavigation`). This is
266
- * mostly useful for observability such as wrapping navigations, fetches,
267
- * as well as route loaders/actions/middlewares with logging and/or performance
268
- * tracing. See the [docs](../../how-to/instrumentation) for more information.
269
- *
270
- * ```tsx
271
- * let router = createBrowserRouter(routes, {
272
- * instrumentations: [logging]
273
- * });
274
- *
275
- *
276
- * let logging = {
277
- * router({ instrument }) {
278
- * instrument({
279
- * navigate: (impl, info) => logExecution(`navigate ${info.to}`, impl),
280
- * fetch: (impl, info) => logExecution(`fetch ${info.to}`, impl)
281
- * });
282
- * },
283
- * route({ instrument, id }) {
284
- * instrument({
285
- * middleware: (impl, info) => logExecution(
286
- * `middleware ${info.request.url} (route ${id})`,
287
- * impl
288
- * ),
289
- * loader: (impl, info) => logExecution(
290
- * `loader ${info.request.url} (route ${id})`,
291
- * impl
292
- * ),
293
- * action: (impl, info) => logExecution(
294
- * `action ${info.request.url} (route ${id})`,
295
- * impl
296
- * ),
297
- * })
298
- * }
299
- * };
300
- *
301
- * async function logExecution(label: string, impl: () => Promise<void>) {
302
- * let start = performance.now();
303
- * console.log(`start ${label}`);
304
- * await impl();
305
- * let duration = Math.round(performance.now() - start);
306
- * console.log(`end ${label} (${duration}ms)`);
307
- * }
308
- * ```
309
- */
310
- instrumentations?: ClientInstrumentation[];
311
- /**
312
- * Override the default data strategy of running loaders in parallel -
313
- * see the [docs](../../how-to/data-strategy) for more information.
314
- *
315
- * ```tsx
316
- * let router = createBrowserRouter(routes, {
317
- * async dataStrategy({
318
- * matches,
319
- * request,
320
- * runClientMiddleware,
321
- * }) {
322
- * const matchesToLoad = matches.filter((m) =>
323
- * m.shouldCallHandler(),
324
- * );
325
- *
326
- * const results: Record<string, DataStrategyResult> = {};
327
- * await runClientMiddleware(() =>
328
- * Promise.all(
329
- * matchesToLoad.map(async (match) => {
330
- * results[match.route.id] = await match.resolve();
331
- * }),
332
- * ),
333
- * );
334
- * return results;
335
- * },
336
- * });
337
- * ```
338
- */
339
- dataStrategy?: DataStrategyFunction;
340
- /**
341
- * Lazily define portions of the route tree on navigations.
342
- */
343
- patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
344
- }
345
- /**
346
- * Create a new {@link DataRouter} that manages the application path using an
347
- * in-memory [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
348
- * stack. Useful for non-browser environments without a DOM API.
349
- *
350
- * Data Routers should not be held in React state. You should create your router
351
- * once outside of the React tree and pass it to {@link RouterProvider | `<RouterProvider>`}.
352
- * You can use `patchRoutesOnNavigation` to add additional routes programmatically.
353
- *
354
- * @public
355
- * @category Data Routers
356
- * @mode data
357
- * @param routes Application routes
358
- * @param opts Options
359
- * @param {MemoryRouterOpts.basename} opts.basename n/a
360
- * @param {MemoryRouterOpts.dataStrategy} opts.dataStrategy n/a
361
- * @param {MemoryRouterOpts.future} opts.future n/a
362
- * @param {MemoryRouterOpts.getContext} opts.getContext n/a
363
- * @param {MemoryRouterOpts.hydrationData} opts.hydrationData n/a
364
- * @param {MemoryRouterOpts.initialEntries} opts.initialEntries n/a
365
- * @param {MemoryRouterOpts.initialIndex} opts.initialIndex n/a
366
- * @param {MemoryRouterOpts.instrumentations} opts.instrumentations n/a
367
- * @param {MemoryRouterOpts.patchRoutesOnNavigation} opts.patchRoutesOnNavigation n/a
368
- * @returns An initialized {@link DataRouter} to pass to {@link RouterProvider | `<RouterProvider>`}
369
- */
370
- declare function createMemoryRouter(routes: RouteObject[], opts?: MemoryRouterOpts): Router$1;
371
- /**
372
- * Function signature for client side error handling for loader/actions errors
373
- * and rendering errors via `componentDidCatch`
374
- */
375
- interface ClientOnErrorFunction {
376
- (error: unknown, info: {
377
- location: Location;
378
- params: Params;
379
- pattern: string;
380
- errorInfo?: React.ErrorInfo;
381
- }): void;
382
- }
383
- /**
384
- * @category Types
385
- */
386
- interface RouterProviderProps {
387
- /**
388
- * The {@link DataRouter} instance to use for navigation and data fetching. The
389
- * router prop should be a single router instance created outside of the React
390
- * tree. Avoid creating new routers during React renders/re-renders.
391
- */
392
- router: Router$1;
393
- /**
394
- * The [`ReactDOM.flushSync`](https://react.dev/reference/react-dom/flushSync)
395
- * implementation to use for flushing updates.
396
- *
397
- * You usually don't have to worry about this:
398
- * - The `RouterProvider` exported from `react-router/dom` handles this internally for you
399
- * - If you are rendering in a non-DOM environment, you can import
400
- * `RouterProvider` from `react-router` and ignore this prop
401
- */
402
- flushSync?: (fn: () => unknown) => undefined;
403
- /**
404
- * An error handler function that will be called for any middleware, loader, action,
405
- * or render errors that are encountered in your application. This is useful for
406
- * logging or reporting errors instead of in the {@link ErrorBoundary} because it's not
407
- * subject to re-rendering and will only run one time per error.
408
- *
409
- * The `errorInfo` parameter is passed along from
410
- * [`componentDidCatch`](https://react.dev/reference/react/Component#componentdidcatch)
411
- * and is only present for render errors.
412
- *
413
- * ```tsx
414
- * <RouterProvider onError={(error, info) => {
415
- * let { location, params, pattern, errorInfo } = info;
416
- * console.error(error, location, errorInfo);
417
- * reportToErrorService(error, location, errorInfo);
418
- * }} />
419
- * ```
420
- */
421
- onError?: ClientOnErrorFunction;
422
- /**
423
- * Control whether router state updates are internally wrapped in
424
- * [`React.startTransition`](https://react.dev/reference/react/startTransition).
425
- *
426
- * - When left `undefined`, all state updates are wrapped in
427
- * `React.startTransition`
428
- * - This can lead to buggy behaviors if you are wrapping your own
429
- * navigations/fetchers in `startTransition`.
430
- * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
431
- * in `React.startTransition` and router state changes will be wrapped in
432
- * `React.startTransition` and also sent through
433
- * [`useOptimistic`](https://react.dev/reference/react/useOptimistic) to
434
- * surface mid-navigation router state changes to the UI.
435
- * - When set to `false`, the router will not leverage `React.startTransition` or
436
- * `React.useOptimistic` on any navigations or state changes.
437
- *
438
- * For more information, please see the [docs](../../explanation/react-transitions).
439
- */
440
- useTransitions?: boolean;
441
- }
442
- /**
443
- * Render the UI for the given {@link DataRouter}. This component should
444
- * typically be at the top of an app's element tree. The router prop should
445
- * be a single router instance created outside of the React tree. Avoid
446
- * creating new routers during React renders/re-renders.
447
- *
448
- * ```tsx
449
- * import { createBrowserRouter } from "react-router";
450
- * import { RouterProvider } from "react-router/dom";
451
- * import { createRoot } from "react-dom/client";
452
- *
453
- * const router = createBrowserRouter(routes);
454
- * createRoot(document.getElementById("root")).render(
455
- * <RouterProvider router={router} />
456
- * );
457
- * ```
458
- *
459
- * <docs-info>Please note that this component is exported both from
460
- * `react-router` and `react-router/dom` with the only difference being that the
461
- * latter automatically wires up `react-dom`'s [`flushSync`](https://react.dev/reference/react-dom/flushSync)
462
- * implementation. You _almost always_ want to use the version from
463
- * `react-router/dom` unless you're running in a non-DOM environment.</docs-info>
464
- *
465
- *
466
- * @public
467
- * @category Data Routers
468
- * @mode data
469
- * @param props Props
470
- * @param {RouterProviderProps.flushSync} props.flushSync n/a
471
- * @param {RouterProviderProps.onError} props.onError n/a
472
- * @param {RouterProviderProps.router} props.router n/a
473
- * @param {RouterProviderProps.useTransitions} props.useTransitions n/a
474
- * @returns React element for the rendered router
475
- */
476
- declare function RouterProvider({ router, flushSync: reactDomFlushSyncImpl, onError, useTransitions, }: RouterProviderProps): React.ReactElement;
477
- /**
478
- * @category Types
479
- */
480
- interface MemoryRouterProps {
481
- /**
482
- * Application basename
483
- */
484
- basename?: string;
485
- /**
486
- * Nested {@link Route} elements describing the route tree
487
- */
488
- children?: React.ReactNode;
489
- /**
490
- * Initial entries in the in-memory history stack
491
- */
492
- initialEntries?: InitialEntry[];
493
- /**
494
- * Index of `initialEntries` the application should initialize to
495
- */
496
- initialIndex?: number;
497
- /**
498
- * Control whether router state updates are internally wrapped in
499
- * [`React.startTransition`](https://react.dev/reference/react/startTransition).
500
- *
501
- * - When left `undefined`, all router state updates are wrapped in
502
- * `React.startTransition`
503
- * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
504
- * in `React.startTransition` and all router state updates are wrapped in
505
- * `React.startTransition`
506
- * - When set to `false`, the router will not leverage `React.startTransition`
507
- * on any navigations or state changes.
508
- *
509
- * For more information, please see the [docs](../../explanation/react-transitions).
510
- */
511
- useTransitions?: boolean;
512
- }
513
- /**
514
- * A declarative {@link Router | `<Router>`} that stores all entries in memory.
515
- *
516
- * @public
517
- * @category Declarative Routers
518
- * @mode declarative
519
- * @param props Props
520
- * @param {MemoryRouterProps.basename} props.basename n/a
521
- * @param {MemoryRouterProps.children} props.children n/a
522
- * @param {MemoryRouterProps.initialEntries} props.initialEntries n/a
523
- * @param {MemoryRouterProps.initialIndex} props.initialIndex n/a
524
- * @param {MemoryRouterProps.useTransitions} props.useTransitions n/a
525
- * @returns A declarative in-memory {@link Router | `<Router>`} for client-side
526
- * routing.
527
- */
528
- declare function MemoryRouter({ basename, children, initialEntries, initialIndex, useTransitions, }: MemoryRouterProps): React.ReactElement;
529
- /**
530
- * @category Types
531
- */
532
- interface NavigateProps {
533
- /**
534
- * The path to navigate to. This can be a string or a {@link Path} object
535
- */
536
- to: To;
537
- /**
538
- * Whether to replace the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
539
- * stack
540
- */
541
- replace?: boolean;
542
- /**
543
- * State to pass to the new {@link Location} to store in [`history.state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state).
544
- */
545
- state?: any;
546
- /**
547
- * How to interpret relative routing in the `to` prop.
548
- * See {@link RelativeRoutingType}.
549
- */
550
- relative?: RelativeRoutingType;
551
- }
552
- /**
553
- * A component-based version of {@link useNavigate} to use in a
554
- * [`React.Component` class](https://react.dev/reference/react/Component) where
555
- * hooks cannot be used.
556
- *
557
- * It's recommended to avoid using this component in favor of {@link useNavigate}.
558
- *
559
- * @example
560
- * <Navigate to="/tasks" />
561
- *
562
- * @public
563
- * @category Components
564
- * @param props Props
565
- * @param {NavigateProps.relative} props.relative n/a
566
- * @param {NavigateProps.replace} props.replace n/a
567
- * @param {NavigateProps.state} props.state n/a
568
- * @param {NavigateProps.to} props.to n/a
569
- * @returns {void}
570
- *
571
- */
572
- declare function Navigate({ to, replace, state, relative, }: NavigateProps): null;
573
- /**
574
- * @category Types
575
- */
576
- interface OutletProps {
577
- /**
578
- * Provides a context value to the element tree below the outlet. Use when
579
- * the parent route needs to provide values to child routes.
580
- *
581
- * ```tsx
582
- * <Outlet context={myContextValue} />
583
- * ```
584
- *
585
- * Access the context with {@link useOutletContext}.
586
- */
587
- context?: unknown;
588
- }
589
- /**
590
- * Renders the matching child route of a parent route or nothing if no child
591
- * route matches.
592
- *
593
- * @example
594
- * import { Outlet } from "react-router";
595
- *
596
- * export default function SomeParent() {
597
- * return (
598
- * <div>
599
- * <h1>Parent Content</h1>
600
- * <Outlet />
601
- * </div>
602
- * );
603
- * }
604
- *
605
- * @public
606
- * @category Components
607
- * @param props Props
608
- * @param {OutletProps.context} props.context n/a
609
- * @returns React element for the rendered outlet or `null` if no child route matches.
610
- */
611
- declare function Outlet(props: OutletProps): React.ReactElement | null;
612
- /**
613
- * @category Types
614
- */
615
- interface PathRouteProps {
616
- /**
617
- * Whether the path should be case-sensitive. Defaults to `false`.
618
- */
619
- caseSensitive?: NonIndexRouteObject["caseSensitive"];
620
- /**
621
- * The path pattern to match. If unspecified or empty, then this becomes a
622
- * layout route.
623
- */
624
- path?: NonIndexRouteObject["path"];
625
- /**
626
- * The unique identifier for this route (for use with {@link DataRouter}s)
627
- */
628
- id?: NonIndexRouteObject["id"];
629
- /**
630
- * A function that returns a promise that resolves to the route object.
631
- * Used for code-splitting routes.
632
- * See [`lazy`](../../start/data/route-object#lazy).
633
- */
634
- lazy?: LazyRouteFunction<NonIndexRouteObject>;
635
- /**
636
- * The route middleware.
637
- * See [`middleware`](../../start/data/route-object#middleware).
638
- */
639
- middleware?: NonIndexRouteObject["middleware"];
640
- /**
641
- * The route loader.
642
- * See [`loader`](../../start/data/route-object#loader).
643
- */
644
- loader?: NonIndexRouteObject["loader"];
645
- /**
646
- * The route action.
647
- * See [`action`](../../start/data/route-object#action).
648
- */
649
- action?: NonIndexRouteObject["action"];
650
- hasErrorBoundary?: NonIndexRouteObject["hasErrorBoundary"];
651
- /**
652
- * The route shouldRevalidate function.
653
- * See [`shouldRevalidate`](../../start/data/route-object#shouldRevalidate).
654
- */
655
- shouldRevalidate?: NonIndexRouteObject["shouldRevalidate"];
656
- /**
657
- * The route handle.
658
- */
659
- handle?: NonIndexRouteObject["handle"];
660
- /**
661
- * Whether this is an index route.
662
- */
663
- index?: false;
664
- /**
665
- * Child Route components
666
- */
667
- children?: React.ReactNode;
668
- /**
669
- * The React element to render when this Route matches.
670
- * Mutually exclusive with `Component`.
671
- */
672
- element?: React.ReactNode | null;
673
- /**
674
- * The React element to render while this router is loading data.
675
- * Mutually exclusive with `HydrateFallback`.
676
- */
677
- hydrateFallbackElement?: React.ReactNode | null;
678
- /**
679
- * The React element to render at this route if an error occurs.
680
- * Mutually exclusive with `ErrorBoundary`.
681
- */
682
- errorElement?: React.ReactNode | null;
683
- /**
684
- * The React Component to render when this route matches.
685
- * Mutually exclusive with `element`.
686
- */
687
- Component?: React.ComponentType | null;
688
- /**
689
- * The React Component to render while this router is loading data.
690
- * Mutually exclusive with `hydrateFallbackElement`.
691
- */
692
- HydrateFallback?: React.ComponentType | null;
693
- /**
694
- * The React Component to render at this route if an error occurs.
695
- * Mutually exclusive with `errorElement`.
696
- */
697
- ErrorBoundary?: React.ComponentType | null;
698
- }
699
- /**
700
- * @category Types
701
- */
702
- interface LayoutRouteProps extends PathRouteProps {
703
- }
704
- /**
705
- * @category Types
706
- */
707
- interface IndexRouteProps {
708
- /**
709
- * Whether the path should be case-sensitive. Defaults to `false`.
710
- */
711
- caseSensitive?: IndexRouteObject["caseSensitive"];
712
- /**
713
- * The path pattern to match. If unspecified or empty, then this becomes a
714
- * layout route.
715
- */
716
- path?: IndexRouteObject["path"];
717
- /**
718
- * The unique identifier for this route (for use with {@link DataRouter}s)
719
- */
720
- id?: IndexRouteObject["id"];
721
- /**
722
- * A function that returns a promise that resolves to the route object.
723
- * Used for code-splitting routes.
724
- * See [`lazy`](../../start/data/route-object#lazy).
725
- */
726
- lazy?: LazyRouteFunction<IndexRouteObject>;
727
- /**
728
- * The route middleware.
729
- * See [`middleware`](../../start/data/route-object#middleware).
730
- */
731
- middleware?: IndexRouteObject["middleware"];
732
- /**
733
- * The route loader.
734
- * See [`loader`](../../start/data/route-object#loader).
735
- */
736
- loader?: IndexRouteObject["loader"];
737
- /**
738
- * The route action.
739
- * See [`action`](../../start/data/route-object#action).
740
- */
741
- action?: IndexRouteObject["action"];
742
- hasErrorBoundary?: IndexRouteObject["hasErrorBoundary"];
743
- /**
744
- * The route shouldRevalidate function.
745
- * See [`shouldRevalidate`](../../start/data/route-object#shouldRevalidate).
746
- */
747
- shouldRevalidate?: IndexRouteObject["shouldRevalidate"];
748
- /**
749
- * The route handle.
750
- */
751
- handle?: IndexRouteObject["handle"];
752
- /**
753
- * Whether this is an index route.
754
- */
755
- index: true;
756
- /**
757
- * Child Route components
758
- */
759
- children?: undefined;
760
- /**
761
- * The React element to render when this Route matches.
762
- * Mutually exclusive with `Component`.
763
- */
764
- element?: React.ReactNode | null;
765
- /**
766
- * The React element to render while this router is loading data.
767
- * Mutually exclusive with `HydrateFallback`.
768
- */
769
- hydrateFallbackElement?: React.ReactNode | null;
770
- /**
771
- * The React element to render at this route if an error occurs.
772
- * Mutually exclusive with `ErrorBoundary`.
773
- */
774
- errorElement?: React.ReactNode | null;
775
- /**
776
- * The React Component to render when this route matches.
777
- * Mutually exclusive with `element`.
778
- */
779
- Component?: React.ComponentType | null;
780
- /**
781
- * The React Component to render while this router is loading data.
782
- * Mutually exclusive with `hydrateFallbackElement`.
783
- */
784
- HydrateFallback?: React.ComponentType | null;
785
- /**
786
- * The React Component to render at this route if an error occurs.
787
- * Mutually exclusive with `errorElement`.
788
- */
789
- ErrorBoundary?: React.ComponentType | null;
790
- }
791
- /**
792
- * @category Types
793
- */
794
- type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;
795
- /**
796
- * Configures an element to render when a pattern matches the current location.
797
- * It must be rendered within a {@link Routes} element. Note that these routes
798
- * do not participate in data loading, actions, code splitting, or any other
799
- * route module features.
800
- *
801
- * @example
802
- * // Usually used in a declarative router
803
- * function App() {
804
- * return (
805
- * <BrowserRouter>
806
- * <Routes>
807
- * <Route index element={<StepOne />} />
808
- * <Route path="step-2" element={<StepTwo />} />
809
- * <Route path="step-3" element={<StepThree />} />
810
- * </Routes>
811
- * </BrowserRouter>
812
- * );
813
- * }
814
- *
815
- * // But can be used with a data router as well if you prefer the JSX notation
816
- * const routes = createRoutesFromElements(
817
- * <>
818
- * <Route index loader={step1Loader} Component={StepOne} />
819
- * <Route path="step-2" loader={step2Loader} Component={StepTwo} />
820
- * <Route path="step-3" loader={step3Loader} Component={StepThree} />
821
- * </>
822
- * );
823
- *
824
- * const router = createBrowserRouter(routes);
825
- *
826
- * function App() {
827
- * return <RouterProvider router={router} />;
828
- * }
829
- *
830
- * @public
831
- * @category Components
832
- * @param props Props
833
- * @param {PathRouteProps.action} props.action n/a
834
- * @param {PathRouteProps.caseSensitive} props.caseSensitive n/a
835
- * @param {PathRouteProps.Component} props.Component n/a
836
- * @param {PathRouteProps.children} props.children n/a
837
- * @param {PathRouteProps.element} props.element n/a
838
- * @param {PathRouteProps.ErrorBoundary} props.ErrorBoundary n/a
839
- * @param {PathRouteProps.errorElement} props.errorElement n/a
840
- * @param {PathRouteProps.handle} props.handle n/a
841
- * @param {PathRouteProps.HydrateFallback} props.HydrateFallback n/a
842
- * @param {PathRouteProps.hydrateFallbackElement} props.hydrateFallbackElement n/a
843
- * @param {PathRouteProps.id} props.id n/a
844
- * @param {PathRouteProps.index} props.index n/a
845
- * @param {PathRouteProps.lazy} props.lazy n/a
846
- * @param {PathRouteProps.loader} props.loader n/a
847
- * @param {PathRouteProps.path} props.path n/a
848
- * @param {PathRouteProps.shouldRevalidate} props.shouldRevalidate n/a
849
- * @returns {void}
850
- */
851
- declare function Route(props: RouteProps): React.ReactElement | null;
852
- /**
853
- * @category Types
854
- */
855
- interface RouterProps {
856
- /**
857
- * The base path for the application. This is prepended to all locations
858
- */
859
- basename?: string;
860
- /**
861
- * Nested {@link Route} elements describing the route tree
862
- */
863
- children?: React.ReactNode;
864
- /**
865
- * The location to match against. Defaults to the current location.
866
- * This can be a string or a {@link Location} object.
867
- */
868
- location: Partial<Location> | string;
869
- /**
870
- * The type of navigation that triggered this `location` change.
871
- * Defaults to {@link NavigationType.Pop}.
872
- */
873
- navigationType?: Action;
874
- /**
875
- * The navigator to use for navigation. This is usually a history object
876
- * or a custom navigator that implements the {@link Navigator} interface.
877
- */
878
- navigator: Navigator;
879
- /**
880
- * Whether this router is static or not (used for SSR). If `true`, the router
881
- * will not be reactive to location changes.
882
- */
883
- static?: boolean;
884
- /**
885
- * Control whether router state updates are internally wrapped in
886
- * [`React.startTransition`](https://react.dev/reference/react/startTransition).
887
- *
888
- * - When left `undefined`, all router state updates are wrapped in
889
- * `React.startTransition`
890
- * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
891
- * in `React.startTransition` and all router state updates are wrapped in
892
- * `React.startTransition`
893
- * - When set to `false`, the router will not leverage `React.startTransition`
894
- * on any navigations or state changes.
895
- *
896
- * For more information, please see the [docs](../../explanation/react-transitions).
897
- */
898
- useTransitions?: boolean;
899
- }
900
- /**
901
- * Provides location context for the rest of the app.
902
- *
903
- * Note: You usually won't render a `<Router>` directly. Instead, you'll render a
904
- * router that is more specific to your environment such as a {@link BrowserRouter}
905
- * in web browsers or a {@link ServerRouter} for server rendering.
906
- *
907
- * @public
908
- * @category Declarative Routers
909
- * @mode declarative
910
- * @param props Props
911
- * @param {RouterProps.basename} props.basename n/a
912
- * @param {RouterProps.children} props.children n/a
913
- * @param {RouterProps.location} props.location n/a
914
- * @param {RouterProps.navigationType} props.navigationType n/a
915
- * @param {RouterProps.navigator} props.navigator n/a
916
- * @param {RouterProps.static} props.static n/a
917
- * @param {RouterProps.useTransitions} props.useTransitions n/a
918
- * @returns React element for the rendered router or `null` if the location does
919
- * not match the {@link props.basename}
920
- */
921
- declare function Router({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp, useTransitions, }: RouterProps): React.ReactElement | null;
922
- /**
923
- * @category Types
924
- */
925
- interface RoutesProps {
926
- /**
927
- * Nested {@link Route} elements
928
- */
929
- children?: React.ReactNode;
930
- /**
931
- * The {@link Location} to match against. Defaults to the current location.
932
- */
933
- location?: Partial<Location> | string;
934
- }
935
- /**
936
- * Renders a branch of {@link Route | `<Route>`s} that best matches the current
937
- * location. Note that these routes do not participate in [data loading](../../start/framework/route-module#loader),
938
- * [`action`](../../start/framework/route-module#action), code splitting, or
939
- * any other [route module](../../start/framework/route-module) features.
940
- *
941
- * @example
942
- * import { Route, Routes } from "react-router";
943
- *
944
- * <Routes>
945
- * <Route index element={<StepOne />} />
946
- * <Route path="step-2" element={<StepTwo />} />
947
- * <Route path="step-3" element={<StepThree />} />
948
- * </Routes>
949
- *
950
- * @public
951
- * @category Components
952
- * @param props Props
953
- * @param {RoutesProps.children} props.children n/a
954
- * @param {RoutesProps.location} props.location n/a
955
- * @returns React element for the rendered routes or `null` if no route matches
956
- */
957
- declare function Routes({ children, location, }: RoutesProps): React.ReactElement | null;
958
- interface AwaitResolveRenderFunction<Resolve = any> {
959
- (data: Awaited<Resolve>): React.ReactNode;
960
- }
961
- /**
962
- * @category Types
963
- */
964
- interface AwaitProps<Resolve> {
965
- /**
966
- * When using a function, the resolved value is provided as the parameter.
967
- *
968
- * ```tsx [2]
969
- * <Await resolve={reviewsPromise}>
970
- * {(resolvedReviews) => <Reviews items={resolvedReviews} />}
971
- * </Await>
972
- * ```
973
- *
974
- * When using React elements, {@link useAsyncValue} will provide the
975
- * resolved value:
976
- *
977
- * ```tsx [2]
978
- * <Await resolve={reviewsPromise}>
979
- * <Reviews />
980
- * </Await>
981
- *
982
- * function Reviews() {
983
- * const resolvedReviews = useAsyncValue();
984
- * return <div>...</div>;
985
- * }
986
- * ```
987
- */
988
- children: React.ReactNode | AwaitResolveRenderFunction<Resolve>;
989
- /**
990
- * The error element renders instead of the `children` when the [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
991
- * rejects.
992
- *
993
- * ```tsx
994
- * <Await
995
- * errorElement={<div>Oops</div>}
996
- * resolve={reviewsPromise}
997
- * >
998
- * <Reviews />
999
- * </Await>
1000
- * ```
1001
- *
1002
- * To provide a more contextual error, you can use the {@link useAsyncError} in a
1003
- * child component
1004
- *
1005
- * ```tsx
1006
- * <Await
1007
- * errorElement={<ReviewsError />}
1008
- * resolve={reviewsPromise}
1009
- * >
1010
- * <Reviews />
1011
- * </Await>
1012
- *
1013
- * function ReviewsError() {
1014
- * const error = useAsyncError();
1015
- * return <div>Error loading reviews: {error.message}</div>;
1016
- * }
1017
- * ```
1018
- *
1019
- * If you do not provide an `errorElement`, the rejected value will bubble up
1020
- * to the nearest route-level [`ErrorBoundary`](../../start/framework/route-module#errorboundary)
1021
- * and be accessible via the {@link useRouteError} hook.
1022
- */
1023
- errorElement?: React.ReactNode;
1024
- /**
1025
- * Takes a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
1026
- * returned from a [`loader`](../../start/framework/route-module#loader) to be
1027
- * resolved and rendered.
1028
- *
1029
- * ```tsx
1030
- * import { Await, useLoaderData } from "react-router";
1031
- *
1032
- * export async function loader() {
1033
- * let reviews = getReviews(); // not awaited
1034
- * let book = await getBook();
1035
- * return {
1036
- * book,
1037
- * reviews, // this is a promise
1038
- * };
1039
- * }
1040
- *
1041
- * export default function Book() {
1042
- * const {
1043
- * book,
1044
- * reviews, // this is the same promise
1045
- * } = useLoaderData();
1046
- *
1047
- * return (
1048
- * <div>
1049
- * <h1>{book.title}</h1>
1050
- * <p>{book.description}</p>
1051
- * <React.Suspense fallback={<ReviewsSkeleton />}>
1052
- * <Await
1053
- * // and is the promise we pass to Await
1054
- * resolve={reviews}
1055
- * >
1056
- * <Reviews />
1057
- * </Await>
1058
- * </React.Suspense>
1059
- * </div>
1060
- * );
1061
- * }
1062
- * ```
1063
- */
1064
- resolve: Resolve;
1065
- }
1066
- /**
1067
- * Used to render promise values with automatic error handling.
1068
- *
1069
- * **Note:** `<Await>` expects to be rendered inside a [`<React.Suspense>`](https://react.dev/reference/react/Suspense)
1070
- *
1071
- * @example
1072
- * import { Await, useLoaderData } from "react-router";
1073
- *
1074
- * export async function loader() {
1075
- * // not awaited
1076
- * const reviews = getReviews();
1077
- * // awaited (blocks the transition)
1078
- * const book = await fetch("/api/book").then((res) => res.json());
1079
- * return { book, reviews };
1080
- * }
1081
- *
1082
- * function Book() {
1083
- * const { book, reviews } = useLoaderData();
1084
- * return (
1085
- * <div>
1086
- * <h1>{book.title}</h1>
1087
- * <p>{book.description}</p>
1088
- * <React.Suspense fallback={<ReviewsSkeleton />}>
1089
- * <Await
1090
- * resolve={reviews}
1091
- * errorElement={
1092
- * <div>Could not load reviews 😬</div>
1093
- * }
1094
- * children={(resolvedReviews) => (
1095
- * <Reviews items={resolvedReviews} />
1096
- * )}
1097
- * />
1098
- * </React.Suspense>
1099
- * </div>
1100
- * );
1101
- * }
1102
- *
1103
- * @public
1104
- * @category Components
1105
- * @mode framework
1106
- * @mode data
1107
- * @param props Props
1108
- * @param {AwaitProps.children} props.children n/a
1109
- * @param {AwaitProps.errorElement} props.errorElement n/a
1110
- * @param {AwaitProps.resolve} props.resolve n/a
1111
- * @returns React element for the rendered awaited value
1112
- */
1113
- declare function Await<Resolve>({ children, errorElement, resolve, }: AwaitProps<Resolve>): React.JSX.Element;
1114
- /**
1115
- * Creates a route config from a React "children" object, which is usually
1116
- * either a `<Route>` element or an array of them. Used internally by
1117
- * `<Routes>` to create a route config from its children.
1118
- *
1119
- * @category Utils
1120
- * @mode data
1121
- * @param children The React children to convert into a route config
1122
- * @param parentPath The path of the parent route, used to generate unique IDs.
1123
- * @returns An array of {@link RouteObject}s that can be used with a {@link DataRouter}
1124
- */
1125
- declare function createRoutesFromChildren(children: React.ReactNode, parentPath?: number[]): RouteObject[];
1126
- /**
1127
- * Create route objects from JSX elements instead of arrays of objects.
1128
- *
1129
- * @example
1130
- * const routes = createRoutesFromElements(
1131
- * <>
1132
- * <Route index loader={step1Loader} Component={StepOne} />
1133
- * <Route path="step-2" loader={step2Loader} Component={StepTwo} />
1134
- * <Route path="step-3" loader={step3Loader} Component={StepThree} />
1135
- * </>
1136
- * );
1137
- *
1138
- * const router = createBrowserRouter(routes);
1139
- *
1140
- * function App() {
1141
- * return <RouterProvider router={router} />;
1142
- * }
1143
- *
1144
- * @name createRoutesFromElements
1145
- * @public
1146
- * @category Utils
1147
- * @mode data
1148
- * @param children The React children to convert into a route config
1149
- * @param parentPath The path of the parent route, used to generate unique IDs.
1150
- * This is used for internal recursion and is not intended to be used by the
1151
- * application developer.
1152
- * @returns An array of {@link RouteObject}s that can be used with a {@link DataRouter}
1153
- */
1154
- declare const createRoutesFromElements: typeof createRoutesFromChildren;
1155
- /**
1156
- * Renders the result of {@link matchRoutes} into a React element.
1157
- *
1158
- * @public
1159
- * @category Utils
1160
- * @param matches The array of {@link RouteMatch | route matches} to render
1161
- * @returns A React element that renders the matched routes or `null` if no matches
1162
- */
1163
- declare function renderMatches(matches: RouteMatch[] | null): React.ReactElement | null;
1164
- declare function useRouteComponentProps(): {
1165
- params: Readonly<Params<string>>;
1166
- loaderData: any;
1167
- actionData: any;
1168
- matches: UIMatch<unknown, unknown>[];
1169
- };
1170
- type RouteComponentProps = ReturnType<typeof useRouteComponentProps>;
1171
- type RouteComponentType = React.ComponentType<RouteComponentProps>;
1172
- declare function WithComponentProps({ children, }: {
1173
- children: React.ReactElement;
1174
- }): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
1175
- declare function withComponentProps(Component: RouteComponentType): () => React.ReactElement<{
1176
- params: Readonly<Params<string>>;
1177
- loaderData: any;
1178
- actionData: any;
1179
- matches: UIMatch<unknown, unknown>[];
1180
- }, string | React.JSXElementConstructor<any>>;
1181
- declare function useHydrateFallbackProps(): {
1182
- params: Readonly<Params<string>>;
1183
- loaderData: any;
1184
- actionData: any;
1185
- };
1186
- type HydrateFallbackProps = ReturnType<typeof useHydrateFallbackProps>;
1187
- type HydrateFallbackType = React.ComponentType<HydrateFallbackProps>;
1188
- declare function WithHydrateFallbackProps({ children, }: {
1189
- children: React.ReactElement;
1190
- }): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
1191
- declare function withHydrateFallbackProps(HydrateFallback: HydrateFallbackType): () => React.ReactElement<{
1192
- params: Readonly<Params<string>>;
1193
- loaderData: any;
1194
- actionData: any;
1195
- }, string | React.JSXElementConstructor<any>>;
1196
- declare function useErrorBoundaryProps(): {
1197
- params: Readonly<Params<string>>;
1198
- loaderData: any;
1199
- actionData: any;
1200
- error: unknown;
1201
- };
1202
- type ErrorBoundaryProps = ReturnType<typeof useErrorBoundaryProps>;
1203
- type ErrorBoundaryType = React.ComponentType<ErrorBoundaryProps>;
1204
- declare function WithErrorBoundaryProps({ children, }: {
1205
- children: React.ReactElement;
1206
- }): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
1207
- declare function withErrorBoundaryProps(ErrorBoundary: ErrorBoundaryType): () => React.ReactElement<{
1208
- params: Readonly<Params<string>>;
1209
- loaderData: any;
1210
- actionData: any;
1211
- error: unknown;
1212
- }, string | React.JSXElementConstructor<any>>;
1213
-
1214
- type ParamKeyValuePair = [string, string];
1215
- type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams;
1216
- /**
1217
- Creates a URLSearchParams object using the given initializer.
1218
-
1219
- This is identical to `new URLSearchParams(init)` except it also
1220
- supports arrays as values in the object form of the initializer
1221
- instead of just strings. This is convenient when you need multiple
1222
- values for a given key, but don't want to use an array initializer.
1223
-
1224
- For example, instead of:
1225
-
1226
- ```tsx
1227
- let searchParams = new URLSearchParams([
1228
- ['sort', 'name'],
1229
- ['sort', 'price']
1230
- ]);
1231
- ```
1232
- you can do:
1233
-
1234
- ```
1235
- let searchParams = createSearchParams({
1236
- sort: ['name', 'price']
1237
- });
1238
- ```
1239
-
1240
- @category Utils
1241
- */
1242
- declare function createSearchParams(init?: URLSearchParamsInit): URLSearchParams;
1243
- type JsonObject = {
1244
- [Key in string]: JsonValue;
1245
- } & {
1246
- [Key in string]?: JsonValue | undefined;
1247
- };
1248
- type JsonArray = JsonValue[] | readonly JsonValue[];
1249
- type JsonPrimitive = string | number | boolean | null;
1250
- type JsonValue = JsonPrimitive | JsonObject | JsonArray;
1251
- type SubmitTarget = HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | JsonValue | null;
1252
- /**
1253
- * Submit options shared by both navigations and fetchers
1254
- */
1255
- interface SharedSubmitOptions {
1256
- /**
1257
- * The HTTP method used to submit the form. Overrides `<form method>`.
1258
- * Defaults to "GET".
1259
- */
1260
- method?: HTMLFormMethod;
1261
- /**
1262
- * The action URL path used to submit the form. Overrides `<form action>`.
1263
- * Defaults to the path of the current route.
1264
- */
1265
- action?: string;
1266
- /**
1267
- * The encoding used to submit the form. Overrides `<form encType>`.
1268
- * Defaults to "application/x-www-form-urlencoded".
1269
- */
1270
- encType?: FormEncType;
1271
- /**
1272
- * Determines whether the form action is relative to the route hierarchy or
1273
- * the pathname. Use this if you want to opt out of navigating the route
1274
- * hierarchy and want to instead route based on /-delimited URL segments
1275
- */
1276
- relative?: RelativeRoutingType;
1277
- /**
1278
- * In browser-based environments, prevent resetting scroll after this
1279
- * navigation when using the <ScrollRestoration> component
1280
- */
1281
- preventScrollReset?: boolean;
1282
- /**
1283
- * Enable flushSync for this submission's state updates
1284
- */
1285
- flushSync?: boolean;
1286
- /**
1287
- * Specify the default revalidation behavior after this submission
1288
- *
1289
- * If no `shouldRevalidate` functions are present on the active routes, then this
1290
- * value will be used directly. Otherwise it will be passed into `shouldRevalidate`
1291
- * so the route can make the final determination on revalidation. This can be
1292
- * useful when updating search params and you don't want to trigger a revalidation.
1293
- *
1294
- * By default (when not specified), loaders will revalidate according to the routers
1295
- * standard revalidation behavior.
1296
- */
1297
- defaultShouldRevalidate?: boolean;
1298
- }
1299
- /**
1300
- * Submit options available to fetchers
1301
- */
1302
- interface FetcherSubmitOptions extends SharedSubmitOptions {
1303
- }
1304
- /**
1305
- * Submit options available to navigations
1306
- */
1307
- interface SubmitOptions extends FetcherSubmitOptions {
1308
- /**
1309
- * Set `true` to replace the current entry in the browser's history stack
1310
- * instead of creating a new one (i.e. stay on "the same page"). Defaults
1311
- * to `false`.
1312
- */
1313
- replace?: boolean;
1314
- /**
1315
- * State object to add to the history stack entry for this navigation
1316
- */
1317
- state?: any;
1318
- /**
1319
- * Indicate a specific fetcherKey to use when using navigate=false
1320
- */
1321
- fetcherKey?: string;
1322
- /**
1323
- * navigate=false will use a fetcher instead of a navigation
1324
- */
1325
- navigate?: boolean;
1326
- /**
1327
- * Enable view transitions on this submission navigation
1328
- */
1329
- viewTransition?: boolean;
1330
- }
1331
-
1332
- declare const FrameworkContext: React.Context<FrameworkContextObject | undefined>;
1333
- /**
1334
- * Defines the [lazy route discovery](../../explanation/lazy-route-discovery)
1335
- * behavior of the link/form:
1336
- *
1337
- * - "render" - default, discover the route when the link renders
1338
- * - "none" - don't eagerly discover, only discover if the link is clicked
1339
- */
1340
- type DiscoverBehavior = "render" | "none";
1341
- /**
1342
- * Defines the prefetching behavior of the link:
1343
- *
1344
- * - "none": Never fetched
1345
- * - "intent": Fetched when the user focuses or hovers the link
1346
- * - "render": Fetched when the link is rendered
1347
- * - "viewport": Fetched when the link is in the viewport
1348
- */
1349
- type PrefetchBehavior = "intent" | "render" | "none" | "viewport";
1350
- /**
1351
- * Props for the {@link Links} component.
1352
- *
1353
- * @category Types
1354
- */
1355
- interface LinksProps {
1356
- /**
1357
- * A [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
1358
- * attribute to render on the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
1359
- * element. If not provided in Framework Mode, it will default to any
1360
- * {@link ServerRouter | `<ServerRouter nonce>`} prop.
1361
- */
1362
- nonce?: string | undefined;
1363
- /**
1364
- * A [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)
1365
- * attribute to render on the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
1366
- * element
1367
- */
1368
- crossOrigin?: "anonymous" | "use-credentials";
1369
- }
1370
- /**
1371
- * Renders all the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
1372
- * tags created by the route module's [`links`](../../start/framework/route-module#links)
1373
- * export. You should render it inside the [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
1374
- * of your document.
1375
- *
1376
- * @example
1377
- * import { Links } from "react-router";
1378
- *
1379
- * export default function Root() {
1380
- * return (
1381
- * <html>
1382
- * <head>
1383
- * <Links />
1384
- * </head>
1385
- * <body></body>
1386
- * </html>
1387
- * );
1388
- * }
1389
- *
1390
- * @public
1391
- * @category Components
1392
- * @mode framework
1393
- * @param props Props
1394
- * @param {LinksProps.nonce} props.nonce n/a
1395
- * @param {LinksProps.crossOrigin} props.crossOrigin n/a
1396
- * @returns A collection of React elements for [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
1397
- * tags
1398
- */
1399
- declare function Links({ nonce, crossOrigin }: LinksProps): React.JSX.Element;
1400
- /**
1401
- * Renders [`<link rel=prefetch|modulepreload>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel)
1402
- * tags for modules and data of another page to enable an instant navigation to
1403
- * that page. [`<Link prefetch>`](./Link#prefetch) uses this internally, but you
1404
- * can render it to prefetch a page for any other reason.
1405
- *
1406
- * For example, you may render one of this as the user types into a search field
1407
- * to prefetch search results before they click through to their selection.
1408
- *
1409
- * @example
1410
- * import { PrefetchPageLinks } from "react-router";
1411
- *
1412
- * <PrefetchPageLinks page="/absolute/path" />
1413
- *
1414
- * @public
1415
- * @category Components
1416
- * @mode framework
1417
- * @param props Props
1418
- * @param {PageLinkDescriptor.page} props.page n/a
1419
- * @param props.linkProps Additional props to spread onto the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
1420
- * tags, such as [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/crossOrigin),
1421
- * [`integrity`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/integrity),
1422
- * [`rel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel),
1423
- * etc.
1424
- * @returns A collection of React elements for [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
1425
- * tags
1426
- */
1427
- declare function PrefetchPageLinks({ page, ...linkProps }: PageLinkDescriptor): React.JSX.Element | null;
1428
- /**
1429
- * Renders all the [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
1430
- * tags created by the route module's [`meta`](../../start/framework/route-module#meta)
1431
- * export. You should render it inside the [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
1432
- * of your document.
1433
- *
1434
- * @example
1435
- * import { Meta } from "react-router";
1436
- *
1437
- * export default function Root() {
1438
- * return (
1439
- * <html>
1440
- * <head>
1441
- * <Meta />
1442
- * </head>
1443
- * </html>
1444
- * );
1445
- * }
1446
- *
1447
- * @public
1448
- * @category Components
1449
- * @mode framework
1450
- * @returns A collection of React elements for [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
1451
- * tags
1452
- */
1453
- declare function Meta(): React.JSX.Element;
1454
- /**
1455
- * A couple common attributes:
1456
- *
1457
- * - `<Scripts crossOrigin>` for hosting your static assets on a different
1458
- * server than your app.
1459
- * - `<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)
1460
- * with [nonce-sources](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources)
1461
- * for your [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
1462
- * tags.
1463
- *
1464
- * You cannot pass through attributes such as [`async`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/async),
1465
- * [`defer`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/defer),
1466
- * [`noModule`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/noModule),
1467
- * [`src`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/src),
1468
- * or [`type`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/type),
1469
- * because they are managed by React Router internally.
1470
- *
1471
- * @category Types
1472
- */
1473
- type ScriptsProps = Omit<React.HTMLProps<HTMLScriptElement>, "async" | "children" | "dangerouslySetInnerHTML" | "defer" | "noModule" | "src" | "suppressHydrationWarning" | "type"> & {
1474
- /**
1475
- * A [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
1476
- * attribute to render on the [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
1477
- * element. If not provided in Framework Mode, it will default to any
1478
- * {@link ServerRouter | `<ServerRouter nonce>`} prop.
1479
- */
1480
- nonce?: string | undefined;
1481
- };
1482
- /**
1483
- * Renders the client runtime of your app. It should be rendered inside the
1484
- * [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body)
1485
- * of the document.
1486
- *
1487
- * If server rendering, you can omit `<Scripts/>` and the app will work as a
1488
- * traditional web app without JavaScript, relying solely on HTML and browser
1489
- * behaviors.
1490
- *
1491
- * @example
1492
- * import { Scripts } from "react-router";
1493
- *
1494
- * export default function Root() {
1495
- * return (
1496
- * <html>
1497
- * <head />
1498
- * <body>
1499
- * <Scripts />
1500
- * </body>
1501
- * </html>
1502
- * );
1503
- * }
1504
- *
1505
- * @public
1506
- * @category Components
1507
- * @mode framework
1508
- * @param scriptProps Additional props to spread onto the [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
1509
- * tags, such as [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/crossOrigin),
1510
- * [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce),
1511
- * etc.
1512
- * @returns A collection of React elements for [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
1513
- * tags
1514
- */
1515
- declare function Scripts(scriptProps: ScriptsProps): React.JSX.Element | null;
1516
-
1517
- /**
1518
- * @category Data Routers
1519
- */
1520
- interface DOMRouterOpts {
1521
- /**
1522
- * Basename path for the application.
1523
- */
1524
- basename?: string;
1525
- /**
1526
- * A function that returns an {@link RouterContextProvider} instance
1527
- * which is provided as the `context` argument to client [`action`](../../start/data/route-object#action)s,
1528
- * [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
1529
- * This function is called to generate a fresh `context` instance on each
1530
- * navigation or fetcher call.
1531
- *
1532
- * ```tsx
1533
- * import {
1534
- * createContext,
1535
- * RouterContextProvider,
1536
- * } from "react-router";
1537
- *
1538
- * const apiClientContext = createContext<APIClient>();
1539
- *
1540
- * function createBrowserRouter(routes, {
1541
- * getContext() {
1542
- * let context = new RouterContextProvider();
1543
- * context.set(apiClientContext, getApiClient());
1544
- * return context;
1545
- * }
1546
- * })
1547
- * ```
1548
- */
1549
- getContext?: RouterInit["getContext"];
1550
- /**
1551
- * Future flags to enable for the router.
1552
- */
1553
- future?: Partial<FutureConfig$1>;
1554
- /**
1555
- * When Server-Rendering and opting-out of automatic hydration, the
1556
- * `hydrationData` option allows you to pass in hydration data from your
1557
- * server-render. This will almost always be a subset of data from the
1558
- * {@link StaticHandlerContext} value you get back from the {@link StaticHandler}'s
1559
- * `query` method:
1560
- *
1561
- * ```tsx
1562
- * const router = createBrowserRouter(routes, {
1563
- * hydrationData: {
1564
- * loaderData: {
1565
- * // [routeId]: serverLoaderData
1566
- * },
1567
- * // may also include `errors` and/or `actionData`
1568
- * },
1569
- * });
1570
- * ```
1571
- *
1572
- * **Partial Hydration Data**
1573
- *
1574
- * You will almost always include a complete set of `loaderData` to hydrate a
1575
- * server-rendered app. But in advanced use-cases (such as Framework Mode's
1576
- * [`clientLoader`](../../start/framework/route-module#clientLoader)), you may
1577
- * want to include `loaderData` for only some routes that were loaded/rendered
1578
- * on the server. This allows you to hydrate _some_ of the routes (such as the
1579
- * app layout/shell) while showing a `HydrateFallback` component and running
1580
- * the [`loader`](../../start/data/route-object#loader)s for other routes
1581
- * during hydration.
1582
- *
1583
- * A route [`loader`](../../start/data/route-object#loader) will run during
1584
- * hydration in two scenarios:
1585
- *
1586
- * 1. No hydration data is provided
1587
- * In these cases the `HydrateFallback` component will render on initial
1588
- * hydration
1589
- * 2. The `loader.hydrate` property is set to `true`
1590
- * This allows you to run the [`loader`](../../start/data/route-object#loader)
1591
- * even if you did not render a fallback on initial hydration (i.e., to
1592
- * prime a cache with hydration data)
1593
- *
1594
- * ```tsx
1595
- * const router = createBrowserRouter(
1596
- * [
1597
- * {
1598
- * id: "root",
1599
- * loader: rootLoader,
1600
- * Component: Root,
1601
- * children: [
1602
- * {
1603
- * id: "index",
1604
- * loader: indexLoader,
1605
- * HydrateFallback: IndexSkeleton,
1606
- * Component: Index,
1607
- * },
1608
- * ],
1609
- * },
1610
- * ],
1611
- * {
1612
- * hydrationData: {
1613
- * loaderData: {
1614
- * root: "ROOT DATA",
1615
- * // No index data provided
1616
- * },
1617
- * },
1618
- * }
1619
- * );
1620
- * ```
1621
- */
1622
- hydrationData?: HydrationState;
1623
- /**
1624
- * Array of instrumentation objects allowing you to instrument the router and
1625
- * individual routes prior to router initialization (and on any subsequently
1626
- * added routes via `route.lazy` or `patchRoutesOnNavigation`). This is
1627
- * mostly useful for observability such as wrapping navigations, fetches,
1628
- * as well as route loaders/actions/middlewares with logging and/or performance
1629
- * tracing. See the [docs](../../how-to/instrumentation) for more information.
1630
- *
1631
- * ```tsx
1632
- * let router = createBrowserRouter(routes, {
1633
- * instrumentations: [logging]
1634
- * });
1635
- *
1636
- *
1637
- * let logging = {
1638
- * router({ instrument }) {
1639
- * instrument({
1640
- * navigate: (impl, info) => logExecution(`navigate ${info.to}`, impl),
1641
- * fetch: (impl, info) => logExecution(`fetch ${info.to}`, impl)
1642
- * });
1643
- * },
1644
- * route({ instrument, id }) {
1645
- * instrument({
1646
- * middleware: (impl, info) => logExecution(
1647
- * `middleware ${info.request.url} (route ${id})`,
1648
- * impl
1649
- * ),
1650
- * loader: (impl, info) => logExecution(
1651
- * `loader ${info.request.url} (route ${id})`,
1652
- * impl
1653
- * ),
1654
- * action: (impl, info) => logExecution(
1655
- * `action ${info.request.url} (route ${id})`,
1656
- * impl
1657
- * ),
1658
- * })
1659
- * }
1660
- * };
1661
- *
1662
- * async function logExecution(label: string, impl: () => Promise<void>) {
1663
- * let start = performance.now();
1664
- * console.log(`start ${label}`);
1665
- * await impl();
1666
- * let duration = Math.round(performance.now() - start);
1667
- * console.log(`end ${label} (${duration}ms)`);
1668
- * }
1669
- * ```
1670
- */
1671
- instrumentations?: ClientInstrumentation[];
1672
- /**
1673
- * Override the default data strategy of running loaders in parallel -
1674
- * see the [docs](../../how-to/data-strategy) for more information.
1675
- *
1676
- * ```tsx
1677
- * let router = createBrowserRouter(routes, {
1678
- * async dataStrategy({
1679
- * matches,
1680
- * request,
1681
- * runClientMiddleware,
1682
- * }) {
1683
- * const matchesToLoad = matches.filter((m) =>
1684
- * m.shouldCallHandler(),
1685
- * );
1686
- *
1687
- * const results: Record<string, DataStrategyResult> = {};
1688
- * await runClientMiddleware(() =>
1689
- * Promise.all(
1690
- * matchesToLoad.map(async (match) => {
1691
- * results[match.route.id] = await match.resolve();
1692
- * }),
1693
- * ),
1694
- * );
1695
- * return results;
1696
- * },
1697
- * });
1698
- * ```
1699
- */
1700
- dataStrategy?: DataStrategyFunction;
1701
- /**
1702
- * Lazily define portions of the route tree on navigations.
1703
- * See {@link PatchRoutesOnNavigationFunction}.
1704
- *
1705
- * By default, React Router wants you to provide a full route tree up front via
1706
- * `createBrowserRouter(routes)`. This allows React Router to perform synchronous
1707
- * route matching, execute loaders, and then render route components in the most
1708
- * optimistic manner without introducing waterfalls. The tradeoff is that your
1709
- * initial JS bundle is larger by definition — which may slow down application
1710
- * start-up times as your application grows.
1711
- *
1712
- * To combat this, we introduced [`route.lazy`](../../start/data/route-object#lazy)
1713
- * in [v6.9.0](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v690)
1714
- * which lets you lazily load the route _implementation_ ([`loader`](../../start/data/route-object#loader),
1715
- * [`Component`](../../start/data/route-object#Component), etc.) while still
1716
- * providing the route _definition_ aspects up front (`path`, `index`, etc.).
1717
- * This is a good middle ground. React Router still knows about your route
1718
- * definitions (the lightweight part) up front and can perform synchronous
1719
- * route matching, but then delay loading any of the route implementation
1720
- * aspects (the heavier part) until the route is actually navigated to.
1721
- *
1722
- * In some cases, even this doesn't go far enough. For huge applications,
1723
- * providing all route definitions up front can be prohibitively expensive.
1724
- * Additionally, it might not even be possible to provide all route definitions
1725
- * up front in certain Micro-Frontend or Module-Federation architectures.
1726
- *
1727
- * This is where `patchRoutesOnNavigation` comes in ([RFC](https://github.com/remix-run/react-router/discussions/11113)).
1728
- * This API is for advanced use-cases where you are unable to provide the full
1729
- * route tree up-front and need a way to lazily "discover" portions of the route
1730
- * tree at runtime. This feature is often referred to as ["Fog of War"](https://en.wikipedia.org/wiki/Fog_of_war),
1731
- * because similar to how video games expand the "world" as you move around -
1732
- * the router would be expanding its routing tree as the user navigated around
1733
- * the app - but would only ever end up loading portions of the tree that the
1734
- * user visited.
1735
- *
1736
- * `patchRoutesOnNavigation` will be called anytime React Router is unable to
1737
- * match a `path`. The arguments include the `path`, any partial `matches`,
1738
- * and a `patch` function you can call to patch new routes into the tree at a
1739
- * specific location. This method is executed during the `loading` portion of
1740
- * the navigation for `GET` requests and during the `submitting` portion of
1741
- * the navigation for non-`GET` requests.
1742
- *
1743
- * <details>
1744
- * <summary><b>Example <code>patchRoutesOnNavigation</code> Use Cases</b></summary>
1745
- *
1746
- * **Patching children into an existing route**
1747
- *
1748
- * ```tsx
1749
- * const router = createBrowserRouter(
1750
- * [
1751
- * {
1752
- * id: "root",
1753
- * path: "/",
1754
- * Component: RootComponent,
1755
- * },
1756
- * ],
1757
- * {
1758
- * async patchRoutesOnNavigation({ patch, path }) {
1759
- * if (path === "/a") {
1760
- * // Load/patch the `a` route as a child of the route with id `root`
1761
- * let route = await getARoute();
1762
- * // ^ { path: 'a', Component: A }
1763
- * patch("root", [route]);
1764
- * }
1765
- * },
1766
- * }
1767
- * );
1768
- * ```
1769
- *
1770
- * In the above example, if the user clicks a link to `/a`, React Router
1771
- * won't match any routes initially and will call `patchRoutesOnNavigation`
1772
- * with a `path = "/a"` and a `matches` array containing the root route
1773
- * match. By calling `patch('root', [route])`, the new route will be added
1774
- * to the route tree as a child of the `root` route and React Router will
1775
- * perform matching on the updated routes. This time it will successfully
1776
- * match the `/a` path and the navigation will complete successfully.
1777
- *
1778
- * **Patching new root-level routes**
1779
- *
1780
- * If you need to patch a new route to the top of the tree (i.e., it doesn't
1781
- * have a parent), you can pass `null` as the `routeId`:
1782
- *
1783
- * ```tsx
1784
- * const router = createBrowserRouter(
1785
- * [
1786
- * {
1787
- * id: "root",
1788
- * path: "/",
1789
- * Component: RootComponent,
1790
- * },
1791
- * ],
1792
- * {
1793
- * async patchRoutesOnNavigation({ patch, path }) {
1794
- * if (path === "/root-sibling") {
1795
- * // Load/patch the `/root-sibling` route as a sibling of the root route
1796
- * let route = await getRootSiblingRoute();
1797
- * // ^ { path: '/root-sibling', Component: RootSibling }
1798
- * patch(null, [route]);
1799
- * }
1800
- * },
1801
- * }
1802
- * );
1803
- * ```
1804
- *
1805
- * **Patching subtrees asynchronously**
1806
- *
1807
- * You can also perform asynchronous matching to lazily fetch entire sections
1808
- * of your application:
1809
- *
1810
- * ```tsx
1811
- * let router = createBrowserRouter(
1812
- * [
1813
- * {
1814
- * path: "/",
1815
- * Component: Home,
1816
- * },
1817
- * ],
1818
- * {
1819
- * async patchRoutesOnNavigation({ patch, path }) {
1820
- * if (path.startsWith("/dashboard")) {
1821
- * let children = await import("./dashboard");
1822
- * patch(null, children);
1823
- * }
1824
- * if (path.startsWith("/account")) {
1825
- * let children = await import("./account");
1826
- * patch(null, children);
1827
- * }
1828
- * },
1829
- * }
1830
- * );
1831
- * ```
1832
- *
1833
- * <docs-info>If in-progress execution of `patchRoutesOnNavigation` is
1834
- * interrupted by a later navigation, then any remaining `patch` calls in
1835
- * the interrupted execution will not update the route tree because the
1836
- * operation was cancelled.</docs-info>
1837
- *
1838
- * **Co-locating route discovery with route definition**
1839
- *
1840
- * If you don't wish to perform your own pseudo-matching, you can leverage
1841
- * the partial `matches` array and the [`handle`](../../start/data/route-object#handle)
1842
- * field on a route to keep the children definitions co-located:
1843
- *
1844
- * ```tsx
1845
- * let router = createBrowserRouter(
1846
- * [
1847
- * {
1848
- * path: "/",
1849
- * Component: Home,
1850
- * },
1851
- * {
1852
- * path: "/dashboard",
1853
- * children: [
1854
- * {
1855
- * // If we want to include /dashboard in the critical routes, we need to
1856
- * // also include it's index route since patchRoutesOnNavigation will not be
1857
- * // called on a navigation to `/dashboard` because it will have successfully
1858
- * // matched the `/dashboard` parent route
1859
- * index: true,
1860
- * // ...
1861
- * },
1862
- * ],
1863
- * handle: {
1864
- * lazyChildren: () => import("./dashboard"),
1865
- * },
1866
- * },
1867
- * {
1868
- * path: "/account",
1869
- * children: [
1870
- * {
1871
- * index: true,
1872
- * // ...
1873
- * },
1874
- * ],
1875
- * handle: {
1876
- * lazyChildren: () => import("./account"),
1877
- * },
1878
- * },
1879
- * ],
1880
- * {
1881
- * async patchRoutesOnNavigation({ matches, patch }) {
1882
- * let leafRoute = matches[matches.length - 1]?.route;
1883
- * if (leafRoute?.handle?.lazyChildren) {
1884
- * let children =
1885
- * await leafRoute.handle.lazyChildren();
1886
- * patch(leafRoute.id, children);
1887
- * }
1888
- * },
1889
- * }
1890
- * );
1891
- * ```
1892
- *
1893
- * **A note on routes with parameters**
1894
- *
1895
- * Because React Router uses ranked routes to find the best match for a
1896
- * given path, there is an interesting ambiguity introduced when only a
1897
- * partial route tree is known at any given point in time. If we match a
1898
- * fully static route such as `path: "/about/contact-us"` then we know we've
1899
- * found the right match since it's composed entirely of static URL segments.
1900
- * Thus, we do not need to bother asking for any other potentially
1901
- * higher-scoring routes.
1902
- *
1903
- * However, routes with parameters (dynamic or splat) can't make this
1904
- * assumption because there might be a not-yet-discovered route that scores
1905
- * higher. Consider a full route tree such as:
1906
- *
1907
- * ```tsx
1908
- * // Assume this is the full route tree for your app
1909
- * const routes = [
1910
- * {
1911
- * path: "/",
1912
- * Component: Home,
1913
- * },
1914
- * {
1915
- * id: "blog",
1916
- * path: "/blog",
1917
- * Component: BlogLayout,
1918
- * children: [
1919
- * { path: "new", Component: NewPost },
1920
- * { path: ":slug", Component: BlogPost },
1921
- * ],
1922
- * },
1923
- * ];
1924
- * ```
1925
- *
1926
- * And then assume we want to use `patchRoutesOnNavigation` to fill this in
1927
- * as the user navigates around:
1928
- *
1929
- * ```tsx
1930
- * // Start with only the index route
1931
- * const router = createBrowserRouter(
1932
- * [
1933
- * {
1934
- * path: "/",
1935
- * Component: Home,
1936
- * },
1937
- * ],
1938
- * {
1939
- * async patchRoutesOnNavigation({ patch, path }) {
1940
- * if (path === "/blog/new") {
1941
- * patch("blog", [
1942
- * {
1943
- * path: "new",
1944
- * Component: NewPost,
1945
- * },
1946
- * ]);
1947
- * } else if (path.startsWith("/blog")) {
1948
- * patch("blog", [
1949
- * {
1950
- * path: ":slug",
1951
- * Component: BlogPost,
1952
- * },
1953
- * ]);
1954
- * }
1955
- * },
1956
- * }
1957
- * );
1958
- * ```
1959
- *
1960
- * If the user were to a blog post first (i.e., `/blog/my-post`) we would
1961
- * patch in the `:slug` route. Then, if the user navigated to `/blog/new` to
1962
- * write a new post, we'd match `/blog/:slug` but it wouldn't be the _right_
1963
- * match! We need to call `patchRoutesOnNavigation` just in case there
1964
- * exists a higher-scoring route we've not yet discovered, which in this
1965
- * case there is.
1966
- *
1967
- * So, anytime React Router matches a path that contains at least one param,
1968
- * it will call `patchRoutesOnNavigation` and match routes again just to
1969
- * confirm it has found the best match.
1970
- *
1971
- * If your `patchRoutesOnNavigation` implementation is expensive or making
1972
- * side effect [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch)
1973
- * calls to a backend server, you may want to consider tracking previously
1974
- * seen routes to avoid over-fetching in cases where you know the proper
1975
- * route has already been found. This can usually be as simple as
1976
- * maintaining a small cache of prior `path` values for which you've already
1977
- * patched in the right routes:
1978
- *
1979
- * ```tsx
1980
- * let discoveredRoutes = new Set();
1981
- *
1982
- * const router = createBrowserRouter(routes, {
1983
- * async patchRoutesOnNavigation({ patch, path }) {
1984
- * if (discoveredRoutes.has(path)) {
1985
- * // We've seen this before so nothing to patch in and we can let the router
1986
- * // use the routes it already knows about
1987
- * return;
1988
- * }
1989
- *
1990
- * discoveredRoutes.add(path);
1991
- *
1992
- * // ... patch routes in accordingly
1993
- * },
1994
- * });
1995
- * ```
1996
- * </details>
1997
- */
1998
- patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
1999
- /**
2000
- * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
2001
- * override. Defaults to the global `window` instance.
2002
- */
2003
- window?: Window;
2004
- }
2005
- /**
2006
- * Create a new {@link DataRouter| data router} that manages the application
2007
- * path via [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState)
2008
- * and [`history.replaceState`](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState).
2009
- *
2010
- * Data Routers should not be held in React state. You should create your router
2011
- * once outside of the React tree and pass it to {@link RouterProvider | `<RouterProvider>`}.
2012
- * You can use `patchRoutesOnNavigation` to add additional routes programmatically.
2013
- *
2014
- * @public
2015
- * @category Data Routers
2016
- * @mode data
2017
- * @param routes Application routes
2018
- * @param opts Options
2019
- * @param {DOMRouterOpts.basename} opts.basename n/a
2020
- * @param {DOMRouterOpts.dataStrategy} opts.dataStrategy n/a
2021
- * @param {DOMRouterOpts.future} opts.future n/a
2022
- * @param {DOMRouterOpts.getContext} opts.getContext n/a
2023
- * @param {DOMRouterOpts.hydrationData} opts.hydrationData n/a
2024
- * @param {DOMRouterOpts.instrumentations} opts.instrumentations n/a
2025
- * @param {DOMRouterOpts.patchRoutesOnNavigation} opts.patchRoutesOnNavigation n/a
2026
- * @param {DOMRouterOpts.window} opts.window n/a
2027
- * @returns An initialized {@link DataRouter| data router} to pass to {@link RouterProvider | `<RouterProvider>`}
2028
- */
2029
- declare function createBrowserRouter(routes: RouteObject[], opts?: DOMRouterOpts): Router$1;
2030
- /**
2031
- * Create a new {@link DataRouter| data router} that manages the application
2032
- * path via the URL [`hash`](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash).
2033
- *
2034
- * Data Routers should not be held in React state. You should create your router
2035
- * once outside of the React tree and pass it to {@link RouterProvider | `<RouterProvider>`}.
2036
- * You can use `patchRoutesOnNavigation` to add additional routes programmatically.
2037
- *
2038
- * @public
2039
- * @category Data Routers
2040
- * @mode data
2041
- * @param routes Application routes
2042
- * @param opts Options
2043
- * @param {DOMRouterOpts.basename} opts.basename n/a
2044
- * @param {DOMRouterOpts.future} opts.future n/a
2045
- * @param {DOMRouterOpts.getContext} opts.getContext n/a
2046
- * @param {DOMRouterOpts.hydrationData} opts.hydrationData n/a
2047
- * @param {DOMRouterOpts.instrumentations} opts.instrumentations n/a
2048
- * @param {DOMRouterOpts.dataStrategy} opts.dataStrategy n/a
2049
- * @param {DOMRouterOpts.patchRoutesOnNavigation} opts.patchRoutesOnNavigation n/a
2050
- * @param {DOMRouterOpts.window} opts.window n/a
2051
- * @returns An initialized {@link DataRouter| data router} to pass to {@link RouterProvider | `<RouterProvider>`}
2052
- */
2053
- declare function createHashRouter(routes: RouteObject[], opts?: DOMRouterOpts): Router$1;
2054
- /**
2055
- * @category Types
2056
- */
2057
- interface BrowserRouterProps {
2058
- /**
2059
- * Application basename
2060
- */
2061
- basename?: string;
2062
- /**
2063
- * {@link Route | `<Route>`} components describing your route configuration
2064
- */
2065
- children?: React.ReactNode;
2066
- /**
2067
- * Control whether router state updates are internally wrapped in
2068
- * [`React.startTransition`](https://react.dev/reference/react/startTransition).
2069
- *
2070
- * - When left `undefined`, all router state updates are wrapped in
2071
- * `React.startTransition`
2072
- * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
2073
- * in `React.startTransition` and all router state updates are wrapped in
2074
- * `React.startTransition`
2075
- * - When set to `false`, the router will not leverage `React.startTransition`
2076
- * on any navigations or state changes.
2077
- *
2078
- * For more information, please see the [docs](../../explanation/react-transitions).
2079
- */
2080
- useTransitions?: boolean;
2081
- /**
2082
- * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
2083
- * override. Defaults to the global `window` instance
2084
- */
2085
- window?: Window;
2086
- }
2087
- /**
2088
- * A declarative {@link Router | `<Router>`} using the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
2089
- * API for client-side routing.
2090
- *
2091
- * @public
2092
- * @category Declarative Routers
2093
- * @mode declarative
2094
- * @param props Props
2095
- * @param {BrowserRouterProps.basename} props.basename n/a
2096
- * @param {BrowserRouterProps.children} props.children n/a
2097
- * @param {BrowserRouterProps.useTransitions} props.useTransitions n/a
2098
- * @param {BrowserRouterProps.window} props.window n/a
2099
- * @returns A declarative {@link Router | `<Router>`} using the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
2100
- * API for client-side routing.
2101
- */
2102
- declare function BrowserRouter({ basename, children, useTransitions, window, }: BrowserRouterProps): React.JSX.Element;
2103
- /**
2104
- * @category Types
2105
- */
2106
- interface HashRouterProps {
2107
- /**
2108
- * Application basename
2109
- */
2110
- basename?: string;
2111
- /**
2112
- * {@link Route | `<Route>`} components describing your route configuration
2113
- */
2114
- children?: React.ReactNode;
2115
- /**
2116
- * Control whether router state updates are internally wrapped in
2117
- * [`React.startTransition`](https://react.dev/reference/react/startTransition).
2118
- *
2119
- * - When left `undefined`, all router state updates are wrapped in
2120
- * `React.startTransition`
2121
- * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
2122
- * in `React.startTransition` and all router state updates are wrapped in
2123
- * `React.startTransition`
2124
- * - When set to `false`, the router will not leverage `React.startTransition`
2125
- * on any navigations or state changes.
2126
- *
2127
- * For more information, please see the [docs](../../explanation/react-transitions).
2128
- */
2129
- useTransitions?: boolean;
2130
- /**
2131
- * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
2132
- * override. Defaults to the global `window` instance
2133
- */
2134
- window?: Window;
2135
- }
2136
- /**
2137
- * A declarative {@link Router | `<Router>`} that stores the location in the
2138
- * [`hash`](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash) portion
2139
- * of the URL so it is not sent to the server.
2140
- *
2141
- * @public
2142
- * @category Declarative Routers
2143
- * @mode declarative
2144
- * @param props Props
2145
- * @param {HashRouterProps.basename} props.basename n/a
2146
- * @param {HashRouterProps.children} props.children n/a
2147
- * @param {HashRouterProps.useTransitions} props.useTransitions n/a
2148
- * @param {HashRouterProps.window} props.window n/a
2149
- * @returns A declarative {@link Router | `<Router>`} using the URL [`hash`](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash)
2150
- * for client-side routing.
2151
- */
2152
- declare function HashRouter({ basename, children, useTransitions, window, }: HashRouterProps): React.JSX.Element;
2153
- /**
2154
- * @category Types
2155
- */
2156
- interface HistoryRouterProps {
2157
- /**
2158
- * Application basename
2159
- */
2160
- basename?: string;
2161
- /**
2162
- * {@link Route | `<Route>`} components describing your route configuration
2163
- */
2164
- children?: React.ReactNode;
2165
- /**
2166
- * A {@link History} implementation for use by the router
2167
- */
2168
- history: History;
2169
- /**
2170
- * Control whether router state updates are internally wrapped in
2171
- * [`React.startTransition`](https://react.dev/reference/react/startTransition).
2172
- *
2173
- * - When left `undefined`, all router state updates are wrapped in
2174
- * `React.startTransition`
2175
- * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
2176
- * in `React.startTransition` and all router state updates are wrapped in
2177
- * `React.startTransition`
2178
- * - When set to `false`, the router will not leverage `React.startTransition`
2179
- * on any navigations or state changes.
2180
- *
2181
- * For more information, please see the [docs](../../explanation/react-transitions).
2182
- */
2183
- useTransitions?: boolean;
2184
- }
2185
- /**
2186
- * A declarative {@link Router | `<Router>`} that accepts a pre-instantiated
2187
- * `history` object.
2188
- * It's important to note that using your own `history` object is highly discouraged
2189
- * and may add two versions of the `history` library to your bundles unless you use
2190
- * the same version of the `history` library that React Router uses internally.
2191
- *
2192
- * @name unstable_HistoryRouter
2193
- * @public
2194
- * @category Declarative Routers
2195
- * @mode declarative
2196
- * @param props Props
2197
- * @param {HistoryRouterProps.basename} props.basename n/a
2198
- * @param {HistoryRouterProps.children} props.children n/a
2199
- * @param {HistoryRouterProps.history} props.history n/a
2200
- * @param {HistoryRouterProps.useTransitions} props.useTransitions n/a
2201
- * @returns A declarative {@link Router | `<Router>`} using the provided history
2202
- * implementation for client-side routing.
2203
- */
2204
- declare function HistoryRouter({ basename, children, history, useTransitions, }: HistoryRouterProps): React.JSX.Element;
2205
- declare namespace HistoryRouter {
2206
- var displayName: string;
2207
- }
2208
- /**
2209
- * @category Types
2210
- */
2211
- interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
2212
- /**
2213
- * Defines the link [lazy route discovery](../../explanation/lazy-route-discovery) behavior.
2214
- *
2215
- * - **render** — default, discover the route when the link renders
2216
- * - **none** — don't eagerly discover, only discover if the link is clicked
2217
- *
2218
- * ```tsx
2219
- * <Link /> // default ("render")
2220
- * <Link discover="render" />
2221
- * <Link discover="none" />
2222
- * ```
2223
- */
2224
- discover?: DiscoverBehavior;
2225
- /**
2226
- * Defines the data and module prefetching behavior for the link.
2227
- *
2228
- * ```tsx
2229
- * <Link /> // default
2230
- * <Link prefetch="none" />
2231
- * <Link prefetch="intent" />
2232
- * <Link prefetch="render" />
2233
- * <Link prefetch="viewport" />
2234
- * ```
2235
- *
2236
- * - **none** — default, no prefetching
2237
- * - **intent** — prefetches when the user hovers or focuses the link
2238
- * - **render** — prefetches when the link renders
2239
- * - **viewport** — prefetches when the link is in the viewport, very useful for mobile
2240
- *
2241
- * Prefetching is done with HTML [`<link rel="prefetch">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
2242
- * tags. They are inserted after the link.
2243
- *
2244
- * ```tsx
2245
- * <a href="..." />
2246
- * <a href="..." />
2247
- * <link rel="prefetch" /> // might conditionally render
2248
- * ```
2249
- *
2250
- * Because of this, if you are using `nav :last-child` you will need to use
2251
- * `nav :last-of-type` so the styles don't conditionally fall off your last link
2252
- * (and any other similar selectors).
2253
- */
2254
- prefetch?: PrefetchBehavior;
2255
- /**
2256
- * Will use document navigation instead of client side routing when the link is
2257
- * clicked: the browser will handle the transition normally (as if it were an
2258
- * [`<a href>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)).
2259
- *
2260
- * ```tsx
2261
- * <Link to="/logout" reloadDocument />
2262
- * ```
2263
- */
2264
- reloadDocument?: boolean;
2265
- /**
2266
- * Replaces the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
2267
- * stack instead of pushing a new one onto it.
2268
- *
2269
- * ```tsx
2270
- * <Link replace />
2271
- * ```
2272
- *
2273
- * ```
2274
- * # with a history stack like this
2275
- * A -> B
2276
- *
2277
- * # normal link click pushes a new entry
2278
- * A -> B -> C
2279
- *
2280
- * # but with `replace`, B is replaced by C
2281
- * A -> C
2282
- * ```
2283
- */
2284
- replace?: boolean;
2285
- /**
2286
- * Adds persistent client side routing state to the next location.
2287
- *
2288
- * ```tsx
2289
- * <Link to="/somewhere/else" state={{ some: "value" }} />
2290
- * ```
2291
- *
2292
- * The location state is accessed from the `location`.
2293
- *
2294
- * ```tsx
2295
- * function SomeComp() {
2296
- * const location = useLocation();
2297
- * location.state; // { some: "value" }
2298
- * }
2299
- * ```
2300
- *
2301
- * This state is inaccessible on the server as it is implemented on top of
2302
- * [`history.state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state)
2303
- */
2304
- state?: any;
2305
- /**
2306
- * Prevents the scroll position from being reset to the top of the window when
2307
- * the link is clicked and the app is using {@link ScrollRestoration}. This only
2308
- * prevents new locations resetting scroll to the top, scroll position will be
2309
- * restored for back/forward button navigation.
2310
- *
2311
- * ```tsx
2312
- * <Link to="?tab=one" preventScrollReset />
2313
- * ```
2314
- */
2315
- preventScrollReset?: boolean;
2316
- /**
2317
- * Defines the relative path behavior for the link.
2318
- *
2319
- * ```tsx
2320
- * <Link to=".." /> // default: "route"
2321
- * <Link relative="route" />
2322
- * <Link relative="path" />
2323
- * ```
2324
- *
2325
- * Consider a route hierarchy where a parent route pattern is `"blog"` and a child
2326
- * route pattern is `"blog/:slug/edit"`.
2327
- *
2328
- * - **route** — default, resolves the link relative to the route pattern. In the
2329
- * example above, a relative link of `"..."` will remove both `:slug/edit` segments
2330
- * back to `"/blog"`.
2331
- * - **path** — relative to the path so `"..."` will only remove one URL segment up
2332
- * to `"/blog/:slug"`
2333
- *
2334
- * Note that index routes and layout routes do not have paths so they are not
2335
- * included in the relative path calculation.
2336
- */
2337
- relative?: RelativeRoutingType;
2338
- /**
2339
- * Can be a string or a partial {@link Path}:
2340
- *
2341
- * ```tsx
2342
- * <Link to="/some/path" />
2343
- *
2344
- * <Link
2345
- * to={{
2346
- * pathname: "/some/path",
2347
- * search: "?query=string",
2348
- * hash: "#hash",
2349
- * }}
2350
- * />
2351
- * ```
2352
- */
2353
- to: To;
2354
- /**
2355
- * Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
2356
- * for this navigation.
2357
- *
2358
- * ```jsx
2359
- * <Link to={to} viewTransition>
2360
- * Click me
2361
- * </Link>
2362
- * ```
2363
- *
2364
- * To apply specific styles for the transition, see {@link useViewTransitionState}
2365
- */
2366
- viewTransition?: boolean;
2367
- /**
2368
- * Specify the default revalidation behavior for the navigation.
2369
- *
2370
- * ```tsx
2371
- * <Link to="/some/path" defaultShouldRevalidate={false} />
2372
- * ```
2373
- *
2374
- * If no `shouldRevalidate` functions are present on the active routes, then this
2375
- * value will be used directly. Otherwise it will be passed into `shouldRevalidate`
2376
- * so the route can make the final determination on revalidation. This can be
2377
- * useful when updating search params and you don't want to trigger a revalidation.
2378
- *
2379
- * By default (when not specified), loaders will revalidate according to the routers
2380
- * standard revalidation behavior.
2381
- */
2382
- defaultShouldRevalidate?: boolean;
2383
- /**
2384
- * Masked path for this navigation, when you want to navigate the router to
2385
- * one location but display a separate location in the URL bar.
2386
- *
2387
- * This is useful for contextual navigations such as opening an image in a modal
2388
- * on top of a gallery while keeping the underlying gallery active. If a user
2389
- * shares the masked URL, or opens the link in a new tab, they will only load
2390
- * the masked location without the underlying contextual location.
2391
- *
2392
- * This feature relies on `history.state` and is thus only intended for SPA uses
2393
- * and SSR renders will not respect the masking.
2394
- *
2395
- * ```tsx
2396
- * // routes/gallery.tsx
2397
- * export function clientLoader({ request }: Route.LoaderArgs) {
2398
- * let sp = new URL(request.url).searchParams;
2399
- * return {
2400
- * images: getImages(),
2401
- * modalImage: sp.has("image") ? getImage(sp.get("image")!) : null,
2402
- * };
2403
- * }
2404
- *
2405
- * export default function Gallery({ loaderData }: Route.ComponentProps) {
2406
- * return (
2407
- * <>
2408
- * <GalleryGrid>
2409
- * {loaderData.images.map((image) => (
2410
- * <Link
2411
- * key={image.id}
2412
- * to={`/gallery?image=${image.id}`}
2413
- * mask={`/images/${image.id}`}
2414
- * >
2415
- * <img src={image.url} alt={image.alt} />
2416
- * </Link>
2417
- * ))}
2418
- * </GalleryGrid>
2419
- *
2420
- * {data.modalImage ? (
2421
- * <dialog open>
2422
- * <img src={data.modalImage.url} alt={data.modalImage.alt} />
2423
- * </dialog>
2424
- * ) : null}
2425
- * </>
2426
- * );
2427
- * }
2428
- * ```
2429
- */
2430
- mask?: To;
2431
- }
2432
- /**
2433
- * A progressively enhanced [`<a href>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
2434
- * wrapper to enable navigation with client-side routing.
2435
- *
2436
- * @example
2437
- * import { Link } from "react-router";
2438
- *
2439
- * <Link to="/dashboard">Dashboard</Link>;
2440
- *
2441
- * <Link
2442
- * to={{
2443
- * pathname: "/some/path",
2444
- * search: "?query=string",
2445
- * hash: "#hash",
2446
- * }}
2447
- * />;
2448
- *
2449
- * @public
2450
- * @category Components
2451
- * @param {LinkProps.discover} props.discover [modes: framework] n/a
2452
- * @param {LinkProps.prefetch} props.prefetch [modes: framework] n/a
2453
- * @param {LinkProps.preventScrollReset} props.preventScrollReset [modes: framework, data] n/a
2454
- * @param {LinkProps.relative} props.relative n/a
2455
- * @param {LinkProps.reloadDocument} props.reloadDocument n/a
2456
- * @param {LinkProps.replace} props.replace n/a
2457
- * @param {LinkProps.state} props.state n/a
2458
- * @param {LinkProps.to} props.to n/a
2459
- * @param {LinkProps.viewTransition} props.viewTransition [modes: framework, data] n/a
2460
- * @param {LinkProps.defaultShouldRevalidate} props.defaultShouldRevalidate n/a
2461
- * @param {LinkProps.mask} props.mask [modes: framework, data] n/a
2462
- */
2463
- declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
2464
- /**
2465
- * The object passed to {@link NavLink} `children`, `className`, and `style` prop
2466
- * callbacks to render and style the link based on its state.
2467
- *
2468
- * ```
2469
- * // className
2470
- * <NavLink
2471
- * to="/messages"
2472
- * className={({ isActive, isPending }) =>
2473
- * isPending ? "pending" : isActive ? "active" : ""
2474
- * }
2475
- * >
2476
- * Messages
2477
- * </NavLink>
2478
- *
2479
- * // style
2480
- * <NavLink
2481
- * to="/messages"
2482
- * style={({ isActive, isPending }) => {
2483
- * return {
2484
- * fontWeight: isActive ? "bold" : "",
2485
- * color: isPending ? "red" : "black",
2486
- * }
2487
- * )}
2488
- * />
2489
- *
2490
- * // children
2491
- * <NavLink to="/tasks">
2492
- * {({ isActive, isPending }) => (
2493
- * <span className={isActive ? "active" : ""}>Tasks</span>
2494
- * )}
2495
- * </NavLink>
2496
- * ```
2497
- *
2498
- */
2499
- type NavLinkRenderProps = {
2500
- /**
2501
- * Indicates if the link's URL matches the current {@link Location}.
2502
- */
2503
- isActive: boolean;
2504
- /**
2505
- * Indicates if the pending {@link Location} matches the link's URL. Only
2506
- * available in Framework/Data modes.
2507
- */
2508
- isPending: boolean;
2509
- /**
2510
- * Indicates if a view transition to the link's URL is in progress.
2511
- * See {@link useViewTransitionState}
2512
- */
2513
- isTransitioning: boolean;
2514
- };
2515
- /**
2516
- * @category Types
2517
- */
2518
- interface NavLinkProps extends Omit<LinkProps, "className" | "style" | "children"> {
2519
- /**
2520
- * Can be regular React children or a function that receives an object with the
2521
- * `active` and `pending` states of the link.
2522
- *
2523
- * ```tsx
2524
- * <NavLink to="/tasks">
2525
- * {({ isActive }) => (
2526
- * <span className={isActive ? "active" : ""}>Tasks</span>
2527
- * )}
2528
- * </NavLink>
2529
- * ```
2530
- */
2531
- children?: React.ReactNode | ((props: NavLinkRenderProps) => React.ReactNode);
2532
- /**
2533
- * Changes the matching logic to make it case-sensitive:
2534
- *
2535
- * | Link | URL | isActive |
2536
- * | -------------------------------------------- | ------------- | -------- |
2537
- * | `<NavLink to="/SpOnGe-bOB" />` | `/sponge-bob` | true |
2538
- * | `<NavLink to="/SpOnGe-bOB" caseSensitive />` | `/sponge-bob` | false |
2539
- */
2540
- caseSensitive?: boolean;
2541
- /**
2542
- * Classes are automatically applied to `NavLink` that correspond to the state.
2543
- *
2544
- * ```css
2545
- * a.active {
2546
- * color: red;
2547
- * }
2548
- * a.pending {
2549
- * color: blue;
2550
- * }
2551
- * a.transitioning {
2552
- * view-transition-name: my-transition;
2553
- * }
2554
- * ```
2555
- *
2556
- * Or you can specify a function that receives {@link NavLinkRenderProps} and
2557
- * returns the `className`:
2558
- *
2559
- * ```tsx
2560
- * <NavLink className={({ isActive, isPending }) => (
2561
- * isActive ? "my-active-class" :
2562
- * isPending ? "my-pending-class" :
2563
- * ""
2564
- * )} />
2565
- * ```
2566
- */
2567
- className?: string | ((props: NavLinkRenderProps) => string | undefined);
2568
- /**
2569
- * Changes the matching logic for the `active` and `pending` states to only match
2570
- * to the "end" of the {@link NavLinkProps.to}. If the URL is longer, it will no
2571
- * longer be considered active.
2572
- *
2573
- * | Link | URL | isActive |
2574
- * | ----------------------------- | ------------ | -------- |
2575
- * | `<NavLink to="/tasks" />` | `/tasks` | true |
2576
- * | `<NavLink to="/tasks" />` | `/tasks/123` | true |
2577
- * | `<NavLink to="/tasks" end />` | `/tasks` | true |
2578
- * | `<NavLink to="/tasks" end />` | `/tasks/123` | false |
2579
- *
2580
- * `<NavLink to="/">` is an exceptional case because _every_ URL matches `/`.
2581
- * To avoid this matching every single route by default, it effectively ignores
2582
- * the `end` prop and only matches when you're at the root route.
2583
- */
2584
- end?: boolean;
2585
- /**
2586
- * Styles can also be applied dynamically via a function that receives
2587
- * {@link NavLinkRenderProps} and returns the styles:
2588
- *
2589
- * ```tsx
2590
- * <NavLink to="/tasks" style={{ color: "red" }} />
2591
- * <NavLink to="/tasks" style={({ isActive, isPending }) => ({
2592
- * color:
2593
- * isActive ? "red" :
2594
- * isPending ? "blue" : "black"
2595
- * })} />
2596
- * ```
2597
- */
2598
- style?: React.CSSProperties | ((props: NavLinkRenderProps) => React.CSSProperties | undefined);
2599
- }
2600
- /**
2601
- * Wraps {@link Link | `<Link>`} with additional props for styling active and
2602
- * pending states.
2603
- *
2604
- * - Automatically applies classes to the link based on its `active` and `pending`
2605
- * states, see {@link NavLinkProps.className}
2606
- * - Note that `pending` is only available with Framework and Data modes.
2607
- * - Automatically applies `aria-current="page"` to the link when the link is active.
2608
- * See [`aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
2609
- * on MDN.
2610
- * - States are additionally available through the className, style, and children
2611
- * render props. See {@link NavLinkRenderProps}.
2612
- *
2613
- * @example
2614
- * <NavLink to="/message">Messages</NavLink>
2615
- *
2616
- * // Using render props
2617
- * <NavLink
2618
- * to="/messages"
2619
- * className={({ isActive, isPending }) =>
2620
- * isPending ? "pending" : isActive ? "active" : ""
2621
- * }
2622
- * >
2623
- * Messages
2624
- * </NavLink>
2625
- *
2626
- * @public
2627
- * @category Components
2628
- * @param {NavLinkProps.caseSensitive} props.caseSensitive n/a
2629
- * @param {NavLinkProps.children} props.children n/a
2630
- * @param {NavLinkProps.className} props.className n/a
2631
- * @param {NavLinkProps.discover} props.discover [modes: framework] n/a
2632
- * @param {NavLinkProps.end} props.end n/a
2633
- * @param {NavLinkProps.prefetch} props.prefetch [modes: framework] n/a
2634
- * @param {NavLinkProps.preventScrollReset} props.preventScrollReset [modes: framework, data] n/a
2635
- * @param {NavLinkProps.relative} props.relative n/a
2636
- * @param {NavLinkProps.reloadDocument} props.reloadDocument n/a
2637
- * @param {NavLinkProps.replace} props.replace n/a
2638
- * @param {NavLinkProps.state} props.state n/a
2639
- * @param {NavLinkProps.style} props.style n/a
2640
- * @param {NavLinkProps.to} props.to n/a
2641
- * @param {NavLinkProps.viewTransition} props.viewTransition [modes: framework, data] n/a
2642
- */
2643
- declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
2644
- /**
2645
- * Form props shared by navigations and fetchers
2646
- */
2647
- interface SharedFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
2648
- /**
2649
- * The HTTP verb to use when the form is submitted. Supports `"delete"`,
2650
- * `"get"`, `"patch"`, `"post"`, and `"put"`.
2651
- *
2652
- * Native [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
2653
- * only supports `"get"` and `"post"`, avoid the other verbs if you'd like to
2654
- * support progressive enhancement
2655
- */
2656
- method?: HTMLFormMethod;
2657
- /**
2658
- * The encoding type to use for the form submission.
2659
- *
2660
- * ```tsx
2661
- * <Form encType="application/x-www-form-urlencoded"/> // Default
2662
- * <Form encType="multipart/form-data"/>
2663
- * <Form encType="text/plain"/>
2664
- * ```
2665
- */
2666
- encType?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
2667
- /**
2668
- * The URL to submit the form data to. If `undefined`, this defaults to the
2669
- * closest route in context.
2670
- */
2671
- action?: string;
2672
- /**
2673
- * Determines whether the form action is relative to the route hierarchy or
2674
- * the pathname. Use this if you want to opt out of navigating the route
2675
- * hierarchy and want to instead route based on slash-delimited URL segments.
2676
- * See {@link RelativeRoutingType}.
2677
- */
2678
- relative?: RelativeRoutingType;
2679
- /**
2680
- * Prevent the scroll position from resetting to the top of the viewport on
2681
- * completion of the navigation when using the
2682
- * {@link ScrollRestoration | `<ScrollRestoration>`} component
2683
- */
2684
- preventScrollReset?: boolean;
2685
- /**
2686
- * A function to call when the form is submitted. If you call
2687
- * [`event.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
2688
- * then this form will not do anything.
2689
- */
2690
- onSubmit?: React.FormEventHandler<HTMLFormElement>;
2691
- /**
2692
- * Specify the default revalidation behavior after this submission
2693
- *
2694
- * If no `shouldRevalidate` functions are present on the active routes, then this
2695
- * value will be used directly. Otherwise it will be passed into `shouldRevalidate`
2696
- * so the route can make the final determination on revalidation. This can be
2697
- * useful when updating search params and you don't want to trigger a revalidation.
2698
- *
2699
- * By default (when not specified), loaders will revalidate according to the routers
2700
- * standard revalidation behavior.
2701
- */
2702
- defaultShouldRevalidate?: boolean;
2703
- }
2704
- /**
2705
- * Form props available to fetchers
2706
- * @category Types
2707
- */
2708
- interface FetcherFormProps extends SharedFormProps {
2709
- }
2710
- /**
2711
- * Form props available to navigations
2712
- * @category Types
2713
- */
2714
- interface FormProps extends SharedFormProps {
2715
- /**
2716
- * Defines the form [lazy route discovery](../../explanation/lazy-route-discovery) behavior.
2717
- *
2718
- * - **render** — default, discover the route when the form renders
2719
- * - **none** — don't eagerly discover, only discover if the form is submitted
2720
- *
2721
- * ```tsx
2722
- * <Form /> // default ("render")
2723
- * <Form discover="render" />
2724
- * <Form discover="none" />
2725
- * ```
2726
- */
2727
- discover?: DiscoverBehavior;
2728
- /**
2729
- * Indicates a specific fetcherKey to use when using `navigate={false}` so you
2730
- * can pick up the fetcher's state in a different component in a {@link useFetcher}.
2731
- */
2732
- fetcherKey?: string;
2733
- /**
2734
- * When `false`, skips the navigation and submits via a fetcher internally.
2735
- * This is essentially a shorthand for {@link useFetcher} + `<fetcher.Form>` where
2736
- * you don't care about the resulting data in this component.
2737
- */
2738
- navigate?: boolean;
2739
- /**
2740
- * Forces a full document navigation instead of client side routing and data
2741
- * fetch.
2742
- */
2743
- reloadDocument?: boolean;
2744
- /**
2745
- * Replaces the current entry in the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
2746
- * stack when the form navigates. Use this if you don't want the user to be
2747
- * able to click "back" to the page with the form on it.
2748
- */
2749
- replace?: boolean;
2750
- /**
2751
- * State object to add to the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
2752
- * stack entry for this navigation
2753
- */
2754
- state?: any;
2755
- /**
2756
- * Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
2757
- * for this navigation. To apply specific styles during the transition, see
2758
- * {@link useViewTransitionState}.
2759
- */
2760
- viewTransition?: boolean;
2761
- }
2762
- /**
2763
- * A progressively enhanced HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
2764
- * that submits data to actions via [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch),
2765
- * activating pending states in {@link useNavigation} which enables advanced
2766
- * user interfaces beyond a basic HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).
2767
- * After a form's `action` completes, all data on the page is automatically
2768
- * revalidated to keep the UI in sync with the data.
2769
- *
2770
- * Because it uses the HTML form API, server rendered pages are interactive at a
2771
- * basic level before JavaScript loads. Instead of React Router managing the
2772
- * submission, the browser manages the submission as well as the pending states
2773
- * (like the spinning favicon). After JavaScript loads, React Router takes over
2774
- * enabling web application user experiences.
2775
- *
2776
- * `Form` is most useful for submissions that should also change the URL or
2777
- * otherwise add an entry to the browser history stack. For forms that shouldn't
2778
- * manipulate the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
2779
- * stack, use {@link FetcherWithComponents.Form | `<fetcher.Form>`}.
2780
- *
2781
- * @example
2782
- * import { Form } from "react-router";
2783
- *
2784
- * function NewEvent() {
2785
- * return (
2786
- * <Form action="/events" method="post">
2787
- * <input name="title" type="text" />
2788
- * <input name="description" type="text" />
2789
- * </Form>
2790
- * );
2791
- * }
2792
- *
2793
- * @public
2794
- * @category Components
2795
- * @mode framework
2796
- * @mode data
2797
- * @param {FormProps.action} action n/a
2798
- * @param {FormProps.discover} discover n/a
2799
- * @param {FormProps.encType} encType n/a
2800
- * @param {FormProps.fetcherKey} fetcherKey n/a
2801
- * @param {FormProps.method} method n/a
2802
- * @param {FormProps.navigate} navigate n/a
2803
- * @param {FormProps.onSubmit} onSubmit n/a
2804
- * @param {FormProps.preventScrollReset} preventScrollReset n/a
2805
- * @param {FormProps.relative} relative n/a
2806
- * @param {FormProps.reloadDocument} reloadDocument n/a
2807
- * @param {FormProps.replace} replace n/a
2808
- * @param {FormProps.state} state n/a
2809
- * @param {FormProps.viewTransition} viewTransition n/a
2810
- * @param {FormProps.defaultShouldRevalidate} defaultShouldRevalidate n/a
2811
- * @returns A progressively enhanced [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) component
2812
- */
2813
- declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
2814
- type ScrollRestorationProps = ScriptsProps & {
2815
- /**
2816
- * A function that returns a key to use for scroll restoration. This is useful
2817
- * for custom scroll restoration logic, such as using only the pathname so
2818
- * that later navigations to prior paths will restore the scroll. Defaults to
2819
- * `location.key`. See {@link GetScrollRestorationKeyFunction}.
2820
- *
2821
- * ```tsx
2822
- * <ScrollRestoration
2823
- * getKey={(location, matches) => {
2824
- * // Restore based on a unique location key (default behavior)
2825
- * return location.key
2826
- *
2827
- * // Restore based on pathname
2828
- * return location.pathname
2829
- * }}
2830
- * />
2831
- * ```
2832
- */
2833
- getKey?: GetScrollRestorationKeyFunction;
2834
- /**
2835
- * The key to use for storing scroll positions in [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage).
2836
- * Defaults to `"react-router-scroll-positions"`.
2837
- */
2838
- storageKey?: string;
2839
- };
2840
- /**
2841
- * Emulates the browser's scroll restoration on location changes. Apps should only render one of these, right before the {@link Scripts} component.
2842
- *
2843
- * ```tsx
2844
- * import { ScrollRestoration } from "react-router";
2845
- *
2846
- * export default function Root() {
2847
- * return (
2848
- * <html>
2849
- * <body>
2850
- * <ScrollRestoration />
2851
- * <Scripts />
2852
- * </body>
2853
- * </html>
2854
- * );
2855
- * }
2856
- * ```
2857
- *
2858
- * This component renders an inline `<script>` to prevent scroll flashing. The
2859
- * `nonce` prop will be passed down to the script tag to allow CSP nonce usage.
2860
- * If not provided in Framework Mode, it will default to any
2861
- * {@link ServerRouter | `<ServerRouter nonce>`} prop.
2862
- *
2863
- * ```tsx
2864
- * <ScrollRestoration nonce={cspNonce} />
2865
- * ```
2866
- *
2867
- * @public
2868
- * @category Components
2869
- * @mode framework
2870
- * @mode data
2871
- * @param props Props
2872
- * @param {ScrollRestorationProps.getKey} props.getKey n/a
2873
- * @param {ScriptsProps.nonce} props.nonce n/a
2874
- * @param {ScrollRestorationProps.storageKey} props.storageKey n/a
2875
- * @returns A [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
2876
- * tag that restores scroll positions on navigation.
2877
- */
2878
- declare function ScrollRestoration({ getKey, storageKey, ...props }: ScrollRestorationProps): React.JSX.Element | null;
2879
- declare namespace ScrollRestoration {
2880
- var displayName: string;
2881
- }
2882
- /**
2883
- * Handles the click behavior for router {@link Link | `<Link>`} components.This
2884
- * is useful if you need to create custom {@link Link | `<Link>`} components with
2885
- * the same click behavior we use in our exported {@link Link | `<Link>`}.
2886
- *
2887
- * @public
2888
- * @category Hooks
2889
- * @param to The URL to navigate to, can be a string or a partial {@link Path}.
2890
- * @param options Options
2891
- * @param options.preventScrollReset Whether to prevent the scroll position from
2892
- * being reset to the top of the viewport on completion of the navigation when
2893
- * using the {@link ScrollRestoration} component. Defaults to `false`.
2894
- * @param options.relative The {@link RelativeRoutingType | relative routing type}
2895
- * to use for the link. Defaults to `"route"`.
2896
- * @param options.replace Whether to replace the current [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
2897
- * entry instead of pushing a new one. Defaults to `false`.
2898
- * @param options.state The state to add to the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
2899
- * entry for this navigation. Defaults to `undefined`.
2900
- * @param options.target The target attribute for the link. Defaults to `undefined`.
2901
- * @param options.viewTransition Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
2902
- * for this navigation. To apply specific styles during the transition, see
2903
- * {@link useViewTransitionState}. Defaults to `false`.
2904
- * @param options.defaultShouldRevalidate Specify the default revalidation
2905
- * behavior for the navigation. Defaults to `true`.
2906
- * @param options.mask Masked location to display in the browser instead
2907
- * of the router location. Defaults to `undefined`.
2908
- * @param options.useTransitions Wraps the navigation in
2909
- * [`React.startTransition`](https://react.dev/reference/react/startTransition)
2910
- * for concurrent rendering. Defaults to `false`.
2911
- * @returns A click handler function that can be used in a custom {@link Link} component.
2912
- */
2913
- declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, mask, state, preventScrollReset, relative, viewTransition, defaultShouldRevalidate, useTransitions, }?: {
2914
- target?: React.HTMLAttributeAnchorTarget;
2915
- replace?: boolean;
2916
- mask?: To;
2917
- state?: any;
2918
- preventScrollReset?: boolean;
2919
- relative?: RelativeRoutingType;
2920
- viewTransition?: boolean;
2921
- defaultShouldRevalidate?: boolean;
2922
- useTransitions?: boolean;
2923
- }): (event: React.MouseEvent<E, MouseEvent>) => void;
2924
- /**
2925
- * Returns a tuple of the current URL's [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
2926
- * and a function to update them. Setting the search params causes a navigation.
2927
- *
2928
- * ```tsx
2929
- * import { useSearchParams } from "react-router";
2930
- *
2931
- * export function SomeComponent() {
2932
- * const [searchParams, setSearchParams] = useSearchParams();
2933
- * // ...
2934
- * }
2935
- * ```
2936
- *
2937
- * ### `setSearchParams` function
2938
- *
2939
- * The second element of the tuple is a function that can be used to update the
2940
- * search params. It accepts the same types as `defaultInit` and will cause a
2941
- * navigation to the new URL.
2942
- *
2943
- * ```tsx
2944
- * let [searchParams, setSearchParams] = useSearchParams();
2945
- *
2946
- * // a search param string
2947
- * setSearchParams("?tab=1");
2948
- *
2949
- * // a shorthand object
2950
- * setSearchParams({ tab: "1" });
2951
- *
2952
- * // object keys can be arrays for multiple values on the key
2953
- * setSearchParams({ brand: ["nike", "reebok"] });
2954
- *
2955
- * // an array of tuples
2956
- * setSearchParams([["tab", "1"]]);
2957
- *
2958
- * // a `URLSearchParams` object
2959
- * setSearchParams(new URLSearchParams("?tab=1"));
2960
- * ```
2961
- *
2962
- * It also supports a function callback like React's
2963
- * [`setState`](https://react.dev/reference/react/useState#setstate):
2964
- *
2965
- * ```tsx
2966
- * setSearchParams((searchParams) => {
2967
- * searchParams.set("tab", "2");
2968
- * return searchParams;
2969
- * });
2970
- * ```
2971
- *
2972
- * <docs-warning>The function callback version of `setSearchParams` does not support
2973
- * the [queueing](https://react.dev/reference/react/useState#setstate-parameters)
2974
- * logic that React's `setState` implements. Multiple calls to `setSearchParams`
2975
- * in the same tick will not build on the prior value. If you need this behavior,
2976
- * you can use `setState` manually.</docs-warning>
2977
- *
2978
- * ### Notes
2979
- *
2980
- * Note that `searchParams` is a stable reference, so you can reliably use it
2981
- * as a dependency in React's [`useEffect`](https://react.dev/reference/react/useEffect)
2982
- * hooks.
2983
- *
2984
- * ```tsx
2985
- * useEffect(() => {
2986
- * console.log(searchParams.get("tab"));
2987
- * }, [searchParams]);
2988
- * ```
2989
- *
2990
- * However, this also means it's mutable. If you change the object without
2991
- * calling `setSearchParams`, its values will change between renders if some
2992
- * other state causes the component to re-render and URL will not reflect the
2993
- * values.
2994
- *
2995
- * @public
2996
- * @category Hooks
2997
- * @param defaultInit
2998
- * You can initialize the search params with a default value, though it **will
2999
- * not** change the URL on the first render.
3000
- *
3001
- * ```tsx
3002
- * // a search param string
3003
- * useSearchParams("?tab=1");
3004
- *
3005
- * // a shorthand object
3006
- * useSearchParams({ tab: "1" });
3007
- *
3008
- * // object keys can be arrays for multiple values on the key
3009
- * useSearchParams({ brand: ["nike", "reebok"] });
3010
- *
3011
- * // an array of tuples
3012
- * useSearchParams([["tab", "1"]]);
3013
- *
3014
- * // a `URLSearchParams` object
3015
- * useSearchParams(new URLSearchParams("?tab=1"));
3016
- * ```
3017
- * @returns A tuple of the current [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
3018
- * and a function to update them.
3019
- */
3020
- declare function useSearchParams(defaultInit?: URLSearchParamsInit): [URLSearchParams, SetURLSearchParams];
3021
- /**
3022
- * Sets new search params and causes a navigation when called.
3023
- *
3024
- * ```tsx
3025
- * <button
3026
- * onClick={() => {
3027
- * const params = new URLSearchParams();
3028
- * params.set("someKey", "someValue");
3029
- * setSearchParams(params, {
3030
- * preventScrollReset: true,
3031
- * });
3032
- * }}
3033
- * />
3034
- * ```
3035
- *
3036
- * It also supports a function for setting new search params.
3037
- *
3038
- * ```tsx
3039
- * <button
3040
- * onClick={() => {
3041
- * setSearchParams((prev) => {
3042
- * prev.set("someKey", "someValue");
3043
- * return prev;
3044
- * });
3045
- * }}
3046
- * />
3047
- * ```
3048
- */
3049
- type SetURLSearchParams = (nextInit?: URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions) => void;
3050
- /**
3051
- * Submits a HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
3052
- * to the server without reloading the page.
3053
- */
3054
- interface SubmitFunction {
3055
- (
3056
- /**
3057
- * Can be multiple types of elements and objects
3058
- *
3059
- * **[`HTMLFormElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)**
3060
- *
3061
- * ```tsx
3062
- * <Form
3063
- * onSubmit={(event) => {
3064
- * submit(event.currentTarget);
3065
- * }}
3066
- * />
3067
- * ```
3068
- *
3069
- * **[`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)**
3070
- *
3071
- * ```tsx
3072
- * const formData = new FormData();
3073
- * formData.append("myKey", "myValue");
3074
- * submit(formData, { method: "post" });
3075
- * ```
3076
- *
3077
- * **Plain object that will be serialized as [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)**
3078
- *
3079
- * ```tsx
3080
- * submit({ myKey: "myValue" }, { method: "post" });
3081
- * ```
3082
- *
3083
- * **Plain object that will be serialized as JSON**
3084
- *
3085
- * ```tsx
3086
- * submit(
3087
- * { myKey: "myValue" },
3088
- * { method: "post", encType: "application/json" }
3089
- * );
3090
- * ```
3091
- */
3092
- target: SubmitTarget,
3093
- /**
3094
- * Options that override the [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)'s
3095
- * own attributes. Required when submitting arbitrary data without a backing
3096
- * [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).
3097
- */
3098
- options?: SubmitOptions): Promise<void>;
3099
- }
3100
- /**
3101
- * Submits a fetcher [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) to the server without reloading the page.
3102
- */
3103
- interface FetcherSubmitFunction {
3104
- (
3105
- /**
3106
- * Can be multiple types of elements and objects
3107
- *
3108
- * **[`HTMLFormElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)**
3109
- *
3110
- * ```tsx
3111
- * <fetcher.Form
3112
- * onSubmit={(event) => {
3113
- * fetcher.submit(event.currentTarget);
3114
- * }}
3115
- * />
3116
- * ```
3117
- *
3118
- * **[`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)**
3119
- *
3120
- * ```tsx
3121
- * const formData = new FormData();
3122
- * formData.append("myKey", "myValue");
3123
- * fetcher.submit(formData, { method: "post" });
3124
- * ```
3125
- *
3126
- * **Plain object that will be serialized as [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)**
3127
- *
3128
- * ```tsx
3129
- * fetcher.submit({ myKey: "myValue" }, { method: "post" });
3130
- * ```
3131
- *
3132
- * **Plain object that will be serialized as JSON**
3133
- *
3134
- * ```tsx
3135
- * fetcher.submit(
3136
- * { myKey: "myValue" },
3137
- * { method: "post", encType: "application/json" }
3138
- * );
3139
- * ```
3140
- */
3141
- target: SubmitTarget, options?: FetcherSubmitOptions): Promise<void>;
3142
- }
3143
- /**
3144
- * The imperative version of {@link Form | `<Form>`} that lets you submit a form
3145
- * from code instead of a user interaction.
3146
- *
3147
- * @example
3148
- * import { useSubmit } from "react-router";
3149
- *
3150
- * function SomeComponent() {
3151
- * const submit = useSubmit();
3152
- * return (
3153
- * <Form onChange={(event) => submit(event.currentTarget)} />
3154
- * );
3155
- * }
3156
- *
3157
- * @public
3158
- * @category Hooks
3159
- * @mode framework
3160
- * @mode data
3161
- * @returns A function that can be called to submit a {@link Form} imperatively.
3162
- */
3163
- declare function useSubmit(): SubmitFunction;
3164
- /**
3165
- * Resolves the URL to the closest route in the component hierarchy instead of
3166
- * the current URL of the app.
3167
- *
3168
- * This is used internally by {@link Form} to resolve the `action` to the closest
3169
- * route, but can be used generically as well.
3170
- *
3171
- * ```ts
3172
- * import { useFormAction } from "react-router";
3173
- *
3174
- * function SomeComponent() {
3175
- * // closest route URL
3176
- * let action = useFormAction();
3177
- *
3178
- * // closest route URL + "destroy"
3179
- * let destroyAction = useFormAction("destroy");
3180
- * }
3181
- * ```
3182
- *
3183
- * <docs-info>This hook adds a `basename` if your app specifies one, so that it
3184
- * can be used with raw `<form>` elements in a progressively enhanced way. If
3185
- * you are using this to provide an `action` to `<Form>` or `fetcher.submit`, you
3186
- * will need to remove the `basename` since both of those will prepend it
3187
- * internally.</docs-info>
3188
- *
3189
- *
3190
- * @public
3191
- * @category Hooks
3192
- * @mode framework
3193
- * @mode data
3194
- * @param action The action to append to the closest route URL. Defaults to the
3195
- * closest route URL.
3196
- * @param options Options
3197
- * @param options.relative The relative routing type to use when resolving the
3198
- * action. Defaults to `"route"`.
3199
- * @returns The resolved action URL.
3200
- */
3201
- declare function useFormAction(action?: string, { relative }?: {
3202
- relative?: RelativeRoutingType;
3203
- }): string;
3204
- /**
3205
- * The return value {@link useFetcher} that keeps track of the state of a fetcher.
3206
- *
3207
- * ```tsx
3208
- * let fetcher = useFetcher();
3209
- * ```
3210
- */
3211
- type FetcherWithComponents<TData> = Fetcher<TData> & {
3212
- /**
3213
- * Just like {@link Form} except it doesn't cause a navigation.
3214
- *
3215
- * ```tsx
3216
- * function SomeComponent() {
3217
- * const fetcher = useFetcher()
3218
- * return (
3219
- * <fetcher.Form method="post" action="/some/route">
3220
- * <input type="text" />
3221
- * </fetcher.Form>
3222
- * )
3223
- * }
3224
- * ```
3225
- */
3226
- Form: React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>;
3227
- /**
3228
- * Loads data from a route. Useful for loading data imperatively inside user
3229
- * events outside a normal button or form, like a combobox or search input.
3230
- *
3231
- * ```tsx
3232
- * let fetcher = useFetcher()
3233
- *
3234
- * <input onChange={e => {
3235
- * fetcher.load(`/search?q=${e.target.value}`)
3236
- * }} />
3237
- * ```
3238
- */
3239
- load: (href: string, opts?: {
3240
- /**
3241
- * Wraps the initial state update for this `fetcher.load` in a
3242
- * [`ReactDOM.flushSync`](https://react.dev/reference/react-dom/flushSync)
3243
- * call instead of the default [`React.startTransition`](https://react.dev/reference/react/startTransition).
3244
- * This allows you to perform synchronous DOM actions immediately after the
3245
- * update is flushed to the DOM.
3246
- */
3247
- flushSync?: boolean;
3248
- }) => Promise<void>;
3249
- /**
3250
- * Reset a fetcher back to an empty/idle state.
3251
- *
3252
- * If the fetcher is currently in-flight, the
3253
- * [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)
3254
- * will be aborted with the `reason`, if provided.
3255
- * @param opts Options for resetting the fetcher.
3256
- * @param opts.reason Optional `reason` to provide to [`AbortController.abort()`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort)
3257
- * @returns void
3258
- */
3259
- reset: (opts?: {
3260
- reason?: unknown;
3261
- }) => void;
3262
- /**
3263
- * Submits form data to a route. While multiple nested routes can match a URL, only the leaf route will be called.
3264
- *
3265
- * The `formData` can be multiple types:
3266
- *
3267
- * - [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)
3268
- * A `FormData` instance.
3269
- * - [`HTMLFormElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)
3270
- * A [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) DOM element.
3271
- * - `Object`
3272
- * An object of key/value-pairs that will be converted to a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)
3273
- * instance by default. You can pass a more complex object and serialize it
3274
- * as JSON by specifying `encType: "application/json"`. See
3275
- * {@link useSubmit} for more details.
3276
- *
3277
- * If the method is `GET`, then the route [`loader`](../../start/framework/route-module#loader)
3278
- * is being called and with the `formData` serialized to the url as [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams).
3279
- * If `DELETE`, `PATCH`, `POST`, or `PUT`, then the route [`action`](../../start/framework/route-module#action)
3280
- * is being called with `formData` as the body.
3281
- *
3282
- * ```tsx
3283
- * // Submit a FormData instance (GET request)
3284
- * const formData = new FormData();
3285
- * fetcher.submit(formData);
3286
- *
3287
- * // Submit the HTML form element
3288
- * fetcher.submit(event.currentTarget.form, {
3289
- * method: "POST",
3290
- * });
3291
- *
3292
- * // Submit key/value JSON as a FormData instance
3293
- * fetcher.submit(
3294
- * { serialized: "values" },
3295
- * { method: "POST" }
3296
- * );
3297
- *
3298
- * // Submit raw JSON
3299
- * fetcher.submit(
3300
- * {
3301
- * deeply: {
3302
- * nested: {
3303
- * json: "values",
3304
- * },
3305
- * },
3306
- * },
3307
- * {
3308
- * method: "POST",
3309
- * encType: "application/json",
3310
- * }
3311
- * );
3312
- * ```
3313
- */
3314
- submit: FetcherSubmitFunction;
3315
- };
3316
- /**
3317
- * Useful for creating complex, dynamic user interfaces that require multiple,
3318
- * concurrent data interactions without causing a navigation.
3319
- *
3320
- * Fetchers track their own, independent state and can be used to load data, submit
3321
- * forms, and generally interact with [`action`](../../start/framework/route-module#action)
3322
- * and [`loader`](../../start/framework/route-module#loader) functions.
3323
- *
3324
- * @example
3325
- * import { useFetcher } from "react-router"
3326
- *
3327
- * function SomeComponent() {
3328
- * let fetcher = useFetcher()
3329
- *
3330
- * // states are available on the fetcher
3331
- * fetcher.state // "idle" | "loading" | "submitting"
3332
- * fetcher.data // the data returned from the action or loader
3333
- *
3334
- * // render a form
3335
- * <fetcher.Form method="post" />
3336
- *
3337
- * // load data
3338
- * fetcher.load("/some/route")
3339
- *
3340
- * // submit data
3341
- * fetcher.submit(someFormRef, { method: "post" })
3342
- * fetcher.submit(someData, {
3343
- * method: "post",
3344
- * encType: "application/json"
3345
- * })
3346
- *
3347
- * // reset fetcher
3348
- * fetcher.reset()
3349
- * }
3350
- *
3351
- * @public
3352
- * @category Hooks
3353
- * @mode framework
3354
- * @mode data
3355
- * @param options Options
3356
- * @param options.key A unique key to identify the fetcher.
3357
- *
3358
- *
3359
- * By default, `useFetcher` generates a unique fetcher scoped to that component.
3360
- * If you want to identify a fetcher with your own key such that you can access
3361
- * it from elsewhere in your app, you can do that with the `key` option:
3362
- *
3363
- * ```tsx
3364
- * function SomeComp() {
3365
- * let fetcher = useFetcher({ key: "my-key" })
3366
- * // ...
3367
- * }
3368
- *
3369
- * // Somewhere else
3370
- * function AnotherComp() {
3371
- * // this will be the same fetcher, sharing the state across the app
3372
- * let fetcher = useFetcher({ key: "my-key" });
3373
- * // ...
3374
- * }
3375
- * ```
3376
- * @returns A {@link FetcherWithComponents} object that contains the fetcher's state, data, and components for submitting forms and loading data.
3377
- */
3378
- declare function useFetcher<T = any>({ key, }?: {
3379
- key?: string;
3380
- }): FetcherWithComponents<SerializeFrom<T>>;
3381
- /**
3382
- * Returns an array of all in-flight {@link Fetcher}s. This is useful for components
3383
- * throughout the app that didn't create the fetchers but want to use their submissions
3384
- * to participate in optimistic UI.
3385
- *
3386
- * @example
3387
- * import { useFetchers } from "react-router";
3388
- *
3389
- * function SomeComponent() {
3390
- * const fetchers = useFetchers();
3391
- * fetchers[0].formData; // FormData
3392
- * fetchers[0].state; // etc.
3393
- * // ...
3394
- * }
3395
- *
3396
- * @public
3397
- * @category Hooks
3398
- * @mode framework
3399
- * @mode data
3400
- * @returns An array of all in-flight {@link Fetcher}s, each with a unique `key`
3401
- * property.
3402
- */
3403
- declare function useFetchers(): (Fetcher & {
3404
- key: string;
3405
- })[];
3406
- /**
3407
- * When rendered inside a {@link RouterProvider}, will restore scroll positions
3408
- * on navigations
3409
- *
3410
- * <!--
3411
- * Not marked `@public` because we only export as UNSAFE_ and therefore we don't
3412
- * maintain an .md file for this hook
3413
- * -->
3414
- *
3415
- * @name UNSAFE_useScrollRestoration
3416
- * @category Hooks
3417
- * @mode framework
3418
- * @mode data
3419
- * @param options Options
3420
- * @param options.getKey A function that returns a key to use for scroll restoration.
3421
- * This is useful for custom scroll restoration logic, such as using only the pathname
3422
- * so that subsequent navigations to prior paths will restore the scroll. Defaults
3423
- * to `location.key`.
3424
- * @param options.storageKey The key to use for storing scroll positions in
3425
- * `sessionStorage`. Defaults to `"react-router-scroll-positions"`.
3426
- * @returns {void}
3427
- */
3428
- declare function useScrollRestoration({ getKey, storageKey, }?: {
3429
- getKey?: GetScrollRestorationKeyFunction;
3430
- storageKey?: string;
3431
- }): void;
3432
- /**
3433
- * Set up a callback to be fired on [Window's `beforeunload` event](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event).
3434
- *
3435
- * @public
3436
- * @category Hooks
3437
- * @param callback The callback to be called when the [`beforeunload` event](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event)
3438
- * is fired.
3439
- * @param options Options
3440
- * @param options.capture If `true`, the event will be captured during the capture
3441
- * phase. Defaults to `false`.
3442
- * @returns {void}
3443
- */
3444
- declare function useBeforeUnload(callback: (event: BeforeUnloadEvent) => any, options?: {
3445
- capture?: boolean;
3446
- }): void;
3447
- /**
3448
- * Wrapper around {@link useBlocker} to show a [`window.confirm`](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm)
3449
- * prompt to users instead of building a custom UI with {@link useBlocker}.
3450
- *
3451
- * The `unstable_` flag will not be removed because this technique has a lot of
3452
- * rough edges and behaves very differently (and incorrectly sometimes) across
3453
- * browsers if users click addition back/forward navigations while the
3454
- * confirmation is open. Use at your own risk.
3455
- *
3456
- * @example
3457
- * function ImportantForm() {
3458
- * let [value, setValue] = React.useState("");
3459
- *
3460
- * // Block navigating elsewhere when data has been entered into the input
3461
- * unstable_usePrompt({
3462
- * message: "Are you sure?",
3463
- * when: ({ currentLocation, nextLocation }) =>
3464
- * value !== "" &&
3465
- * currentLocation.pathname !== nextLocation.pathname,
3466
- * });
3467
- *
3468
- * return (
3469
- * <Form method="post">
3470
- * <label>
3471
- * Enter some important data:
3472
- * <input
3473
- * name="data"
3474
- * value={value}
3475
- * onChange={(e) => setValue(e.target.value)}
3476
- * />
3477
- * </label>
3478
- * <button type="submit">Save</button>
3479
- * </Form>
3480
- * );
3481
- * }
3482
- *
3483
- * @name unstable_usePrompt
3484
- * @public
3485
- * @category Hooks
3486
- * @mode framework
3487
- * @mode data
3488
- * @param options Options
3489
- * @param options.message The message to show in the confirmation dialog.
3490
- * @param options.when A boolean or a function that returns a boolean indicating
3491
- * whether to block the navigation. If a function is provided, it will receive an
3492
- * object with `currentLocation` and `nextLocation` properties.
3493
- * @returns {void}
3494
- */
3495
- declare function usePrompt({ when, message, }: {
3496
- when: boolean | BlockerFunction;
3497
- message: string;
3498
- }): void;
3499
- /**
3500
- * This hook returns `true` when there is an active [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
3501
- * and the specified location matches either side of the navigation (the URL you are
3502
- * navigating **to** or the URL you are navigating **from**). This can be used to apply finer-grained styles to
3503
- * elements to further customize the view transition. This requires that view
3504
- * transitions have been enabled for the given navigation via {@link LinkProps.viewTransition}
3505
- * (or the `Form`, `submit`, or `navigate` call)
3506
- *
3507
- * @public
3508
- * @category Hooks
3509
- * @mode framework
3510
- * @mode data
3511
- * @param to The {@link To} location to compare against the active transition's current
3512
- * and next URLs.
3513
- * @param options Options
3514
- * @param options.relative The relative routing type to use when resolving the
3515
- * `to` location, defaults to `"route"`. See {@link RelativeRoutingType} for
3516
- * more details.
3517
- * @returns `true` if there is an active [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
3518
- * and the resolved path matches the transition's destination or source pathname, otherwise `false`.
3519
- */
3520
- declare function useViewTransitionState(to: To, { relative }?: {
3521
- relative?: RelativeRoutingType;
3522
- }): boolean;
3523
-
3524
- /**
3525
- * @category Types
3526
- */
3527
- interface StaticRouterProps {
3528
- /**
3529
- * The base URL for the static router (default: `/`)
3530
- */
3531
- basename?: string;
3532
- /**
3533
- * The child elements to render inside the static router
3534
- */
3535
- children?: React.ReactNode;
3536
- /**
3537
- * The {@link Location} to render the static router at (default: `/`)
3538
- */
3539
- location: Partial<Location> | string;
3540
- }
3541
- /**
3542
- * A {@link Router | `<Router>`} that may not navigate to any other {@link Location}.
3543
- * This is useful on the server where there is no stateful UI.
3544
- *
3545
- * @public
3546
- * @category Declarative Routers
3547
- * @mode declarative
3548
- * @param props Props
3549
- * @param {StaticRouterProps.basename} props.basename n/a
3550
- * @param {StaticRouterProps.children} props.children n/a
3551
- * @param {StaticRouterProps.location} props.location n/a
3552
- * @returns A React element that renders the static {@link Router | `<Router>`}
3553
- */
3554
- declare function StaticRouter({ basename, children, location: locationProp, }: StaticRouterProps): React.JSX.Element;
3555
- /**
3556
- * @category Types
3557
- */
3558
- interface StaticRouterProviderProps {
3559
- /**
3560
- * The {@link StaticHandlerContext} returned from {@link StaticHandler}'s
3561
- * `query`
3562
- */
3563
- context: StaticHandlerContext;
3564
- /**
3565
- * The static {@link DataRouter} from {@link createStaticRouter}
3566
- */
3567
- router: Router$1;
3568
- /**
3569
- * Whether to hydrate the router on the client (default `true`)
3570
- */
3571
- hydrate?: boolean;
3572
- /**
3573
- * The [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
3574
- * to use for the hydration [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
3575
- * tag
3576
- */
3577
- nonce?: string;
3578
- }
3579
- /**
3580
- * A {@link DataRouter} that may not navigate to any other {@link Location}.
3581
- * This is useful on the server where there is no stateful UI.
3582
- *
3583
- * @example
3584
- * export async function handleRequest(request: Request) {
3585
- * let { query, dataRoutes } = createStaticHandler(routes);
3586
- * let context = await query(request));
3587
- *
3588
- * if (context instanceof Response) {
3589
- * return context;
3590
- * }
3591
- *
3592
- * let router = createStaticRouter(dataRoutes, context);
3593
- * return new Response(
3594
- * ReactDOMServer.renderToString(<StaticRouterProvider ... />),
3595
- * { headers: { "Content-Type": "text/html" } }
3596
- * );
3597
- * }
3598
- *
3599
- * @public
3600
- * @category Data Routers
3601
- * @mode data
3602
- * @param props Props
3603
- * @param {StaticRouterProviderProps.context} props.context n/a
3604
- * @param {StaticRouterProviderProps.hydrate} props.hydrate n/a
3605
- * @param {StaticRouterProviderProps.nonce} props.nonce n/a
3606
- * @param {StaticRouterProviderProps.router} props.router n/a
3607
- * @returns A React element that renders the static router provider
3608
- */
3609
- declare function StaticRouterProvider({ context, router, hydrate, nonce, }: StaticRouterProviderProps): React.JSX.Element;
3610
- type CreateStaticHandlerOptions = Omit<CreateStaticHandlerOptions$1, "mapRouteProperties">;
3611
- /**
3612
- * Create a static handler to perform server-side data loading
3613
- *
3614
- * @example
3615
- * export async function handleRequest(request: Request) {
3616
- * let { query, dataRoutes } = createStaticHandler(routes);
3617
- * let context = await query(request);
3618
- *
3619
- * if (context instanceof Response) {
3620
- * return context;
3621
- * }
3622
- *
3623
- * let router = createStaticRouter(dataRoutes, context);
3624
- * return new Response(
3625
- * ReactDOMServer.renderToString(<StaticRouterProvider ... />),
3626
- * { headers: { "Content-Type": "text/html" } }
3627
- * );
3628
- * }
3629
- *
3630
- * @public
3631
- * @category Data Routers
3632
- * @mode data
3633
- * @param routes The {@link RouteObject | route objects} to create a static
3634
- * handler for
3635
- * @param opts Options
3636
- * @param opts.basename The base URL for the static handler (default: `/`)
3637
- * @param opts.future Future flags for the static handler
3638
- * @returns A static handler that can be used to query data for the provided
3639
- * routes
3640
- */
3641
- declare function createStaticHandler(routes: RouteObject[], opts?: CreateStaticHandlerOptions): StaticHandler;
3642
- /**
3643
- * Create a static {@link DataRouter} for server-side rendering
3644
- *
3645
- * @example
3646
- * export async function handleRequest(request: Request) {
3647
- * let { query, dataRoutes } = createStaticHandler(routes);
3648
- * let context = await query(request);
3649
- *
3650
- * if (context instanceof Response) {
3651
- * return context;
3652
- * }
3653
- *
3654
- * let router = createStaticRouter(dataRoutes, context);
3655
- * return new Response(
3656
- * ReactDOMServer.renderToString(<StaticRouterProvider ... />),
3657
- * { headers: { "Content-Type": "text/html" } }
3658
- * );
3659
- * }
3660
- *
3661
- * @public
3662
- * @category Data Routers
3663
- * @mode data
3664
- * @param routes The route objects to create a static {@link DataRouter} for
3665
- * @param context The {@link StaticHandlerContext} returned from {@link StaticHandler}'s
3666
- * `query`
3667
- * @param opts Options
3668
- * @param opts.future Future flags for the static {@link DataRouter}
3669
- * @param opts.branches Optional pre-computed route branches
3670
- * @returns A static {@link DataRouter} that can be used to render the provided routes
3671
- */
3672
- declare function createStaticRouter(routes: RouteObject[], context: StaticHandlerContext, opts?: {
3673
- branches?: RouteBranch<DataRouteObject>[];
3674
- future?: Partial<FutureConfig$1>;
3675
- }): Router$1;
3676
-
3677
- export { Form as $, type AssetsManifest as A, type BrowserRouterProps as B, type ClientOnErrorFunction as C, type DOMRouterOpts as D, type EntryContext as E, type FutureConfig as F, type ScrollRestorationProps as G, type HashRouterProps as H, type IndexRouteProps as I, type SetURLSearchParams as J, type SubmitFunction as K, type LayoutRouteProps as L, type MemoryRouterOpts as M, type NavigateOptions as N, type OutletProps as O, type PathRouteProps as P, type FetcherSubmitFunction as Q, type RouteProps as R, type ServerBuild as S, type FetcherWithComponents as T, createBrowserRouter as U, createHashRouter as V, BrowserRouter as W, HashRouter as X, Link as Y, HistoryRouter as Z, NavLink as _, type Navigator as a, ScrollRestoration as a0, useLinkClickHandler as a1, useSearchParams as a2, useSubmit as a3, useFormAction as a4, useFetcher as a5, useFetchers as a6, useBeforeUnload as a7, usePrompt as a8, useViewTransitionState as a9, FetchersContext as aA, LocationContext as aB, NavigationContext as aC, RouteContext as aD, ViewTransitionContext as aE, hydrationRouteProperties as aF, mapRouteProperties as aG, WithComponentProps as aH, withComponentProps as aI, WithHydrateFallbackProps as aJ, withHydrateFallbackProps as aK, WithErrorBoundaryProps as aL, withErrorBoundaryProps as aM, FrameworkContext as aN, createClientRoutes as aO, createClientRoutesWithHMRRevalidationOptOut as aP, shouldHydrateRouteLoader as aQ, useScrollRestoration as aR, type FetcherSubmitOptions as aa, type ParamKeyValuePair as ab, type SubmitOptions as ac, type URLSearchParamsInit as ad, type SubmitTarget as ae, createSearchParams as af, type StaticRouterProps as ag, type StaticRouterProviderProps as ah, createStaticHandler as ai, createStaticRouter as aj, StaticRouter as ak, StaticRouterProvider as al, Meta as am, Links as an, Scripts as ao, PrefetchPageLinks as ap, type LinksProps as aq, type ScriptsProps as ar, type PrefetchBehavior as as, type DiscoverBehavior as at, type HandleDataRequestFunction as au, type HandleDocumentRequestFunction as av, type HandleErrorFunction as aw, type ServerEntryModule as ax, DataRouterContext as ay, DataRouterStateContext as az, AwaitContextProvider as b, type AwaitProps as c, type MemoryRouterProps as d, type NavigateProps as e, type RouterProps as f, type RouterProviderProps as g, type RoutesProps as h, Await as i, MemoryRouter as j, Navigate as k, Outlet as l, Route as m, Router as n, RouterProvider as o, Routes as p, createMemoryRouter as q, createRoutesFromChildren as r, createRoutesFromElements as s, renderMatches 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 };