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,2614 +0,0 @@
1
- import { o as ServerInstrumentation, H as HydrationState, h as StaticHandlerContext, f as RelativeRoutingType, g as GetScrollRestorationKeyFunction, R as RouterInit, ah as FutureConfig$1, C as ClientInstrumentation, N as NavigateOptions, F as Fetcher, c as Router, B as BlockerFunction, ai as CreateStaticHandlerOptions$1, S as StaticHandler } from './context-CeD5LmaF.mjs';
2
- import * as React from 'react';
3
- import { J as RouteManifest, aF as ServerRouteModule, p as MiddlewareEnabled, c as RouterContextProvider, q as AppLoadContext, o as LoaderFunctionArgs, a3 as ActionFunctionArgs, Z as RouteModules, E as DataRouteObject, a as ClientLoaderFunction, I as RouteBranch, m as HTMLFormMethod, n as FormEncType, aw as PageLinkDescriptor, T as To, s as History, z as DataStrategyFunction, B as PatchRoutesOnNavigationFunction, r as RouteObject, _ as SerializeFrom, L as Location } from './data-DEjBmEfD.mjs';
4
-
5
- type ServerRouteManifest = RouteManifest<Omit<ServerRoute, "children">>;
6
- interface ServerRoute extends Route {
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 {
70
- index?: boolean;
71
- caseSensitive?: boolean;
72
- id: string;
73
- parentId?: string;
74
- path?: string;
75
- }
76
- interface EntryRoute extends Route {
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
- type ParamKeyValuePair = [string, string];
152
- type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams;
153
- /**
154
- Creates a URLSearchParams object using the given initializer.
155
-
156
- This is identical to `new URLSearchParams(init)` except it also
157
- supports arrays as values in the object form of the initializer
158
- instead of just strings. This is convenient when you need multiple
159
- values for a given key, but don't want to use an array initializer.
160
-
161
- For example, instead of:
162
-
163
- ```tsx
164
- let searchParams = new URLSearchParams([
165
- ['sort', 'name'],
166
- ['sort', 'price']
167
- ]);
168
- ```
169
- you can do:
170
-
171
- ```
172
- let searchParams = createSearchParams({
173
- sort: ['name', 'price']
174
- });
175
- ```
176
-
177
- @category Utils
178
- */
179
- declare function createSearchParams(init?: URLSearchParamsInit): URLSearchParams;
180
- type JsonObject = {
181
- [Key in string]: JsonValue;
182
- } & {
183
- [Key in string]?: JsonValue | undefined;
184
- };
185
- type JsonArray = JsonValue[] | readonly JsonValue[];
186
- type JsonPrimitive = string | number | boolean | null;
187
- type JsonValue = JsonPrimitive | JsonObject | JsonArray;
188
- type SubmitTarget = HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | JsonValue | null;
189
- /**
190
- * Submit options shared by both navigations and fetchers
191
- */
192
- interface SharedSubmitOptions {
193
- /**
194
- * The HTTP method used to submit the form. Overrides `<form method>`.
195
- * Defaults to "GET".
196
- */
197
- method?: HTMLFormMethod;
198
- /**
199
- * The action URL path used to submit the form. Overrides `<form action>`.
200
- * Defaults to the path of the current route.
201
- */
202
- action?: string;
203
- /**
204
- * The encoding used to submit the form. Overrides `<form encType>`.
205
- * Defaults to "application/x-www-form-urlencoded".
206
- */
207
- encType?: FormEncType;
208
- /**
209
- * Determines whether the form action is relative to the route hierarchy or
210
- * the pathname. Use this if you want to opt out of navigating the route
211
- * hierarchy and want to instead route based on /-delimited URL segments
212
- */
213
- relative?: RelativeRoutingType;
214
- /**
215
- * In browser-based environments, prevent resetting scroll after this
216
- * navigation when using the <ScrollRestoration> component
217
- */
218
- preventScrollReset?: boolean;
219
- /**
220
- * Enable flushSync for this submission's state updates
221
- */
222
- flushSync?: boolean;
223
- /**
224
- * Specify the default revalidation behavior after this submission
225
- *
226
- * If no `shouldRevalidate` functions are present on the active routes, then this
227
- * value will be used directly. Otherwise it will be passed into `shouldRevalidate`
228
- * so the route can make the final determination on revalidation. This can be
229
- * useful when updating search params and you don't want to trigger a revalidation.
230
- *
231
- * By default (when not specified), loaders will revalidate according to the routers
232
- * standard revalidation behavior.
233
- */
234
- defaultShouldRevalidate?: boolean;
235
- }
236
- /**
237
- * Submit options available to fetchers
238
- */
239
- interface FetcherSubmitOptions extends SharedSubmitOptions {
240
- }
241
- /**
242
- * Submit options available to navigations
243
- */
244
- interface SubmitOptions extends FetcherSubmitOptions {
245
- /**
246
- * Set `true` to replace the current entry in the browser's history stack
247
- * instead of creating a new one (i.e. stay on "the same page"). Defaults
248
- * to `false`.
249
- */
250
- replace?: boolean;
251
- /**
252
- * State object to add to the history stack entry for this navigation
253
- */
254
- state?: any;
255
- /**
256
- * Indicate a specific fetcherKey to use when using navigate=false
257
- */
258
- fetcherKey?: string;
259
- /**
260
- * navigate=false will use a fetcher instead of a navigation
261
- */
262
- navigate?: boolean;
263
- /**
264
- * Enable view transitions on this submission navigation
265
- */
266
- viewTransition?: boolean;
267
- }
268
-
269
- declare const FrameworkContext: React.Context<FrameworkContextObject | undefined>;
270
- /**
271
- * Defines the [lazy route discovery](../../explanation/lazy-route-discovery)
272
- * behavior of the link/form:
273
- *
274
- * - "render" - default, discover the route when the link renders
275
- * - "none" - don't eagerly discover, only discover if the link is clicked
276
- */
277
- type DiscoverBehavior = "render" | "none";
278
- /**
279
- * Defines the prefetching behavior of the link:
280
- *
281
- * - "none": Never fetched
282
- * - "intent": Fetched when the user focuses or hovers the link
283
- * - "render": Fetched when the link is rendered
284
- * - "viewport": Fetched when the link is in the viewport
285
- */
286
- type PrefetchBehavior = "intent" | "render" | "none" | "viewport";
287
- /**
288
- * Props for the {@link Links} component.
289
- *
290
- * @category Types
291
- */
292
- interface LinksProps {
293
- /**
294
- * A [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
295
- * attribute to render on the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
296
- * element. If not provided in Framework Mode, it will default to any
297
- * {@link ServerRouter | `<ServerRouter nonce>`} prop.
298
- */
299
- nonce?: string | undefined;
300
- /**
301
- * A [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)
302
- * attribute to render on the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
303
- * element
304
- */
305
- crossOrigin?: "anonymous" | "use-credentials";
306
- }
307
- /**
308
- * Renders all the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
309
- * tags created by the route module's [`links`](../../start/framework/route-module#links)
310
- * export. You should render it inside the [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
311
- * of your document.
312
- *
313
- * @example
314
- * import { Links } from "react-router";
315
- *
316
- * export default function Root() {
317
- * return (
318
- * <html>
319
- * <head>
320
- * <Links />
321
- * </head>
322
- * <body></body>
323
- * </html>
324
- * );
325
- * }
326
- *
327
- * @public
328
- * @category Components
329
- * @mode framework
330
- * @param props Props
331
- * @param {LinksProps.nonce} props.nonce n/a
332
- * @param {LinksProps.crossOrigin} props.crossOrigin n/a
333
- * @returns A collection of React elements for [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
334
- * tags
335
- */
336
- declare function Links({ nonce, crossOrigin }: LinksProps): React.JSX.Element;
337
- /**
338
- * Renders [`<link rel=prefetch|modulepreload>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel)
339
- * tags for modules and data of another page to enable an instant navigation to
340
- * that page. [`<Link prefetch>`](./Link#prefetch) uses this internally, but you
341
- * can render it to prefetch a page for any other reason.
342
- *
343
- * For example, you may render one of this as the user types into a search field
344
- * to prefetch search results before they click through to their selection.
345
- *
346
- * @example
347
- * import { PrefetchPageLinks } from "react-router";
348
- *
349
- * <PrefetchPageLinks page="/absolute/path" />
350
- *
351
- * @public
352
- * @category Components
353
- * @mode framework
354
- * @param props Props
355
- * @param {PageLinkDescriptor.page} props.page n/a
356
- * @param props.linkProps Additional props to spread onto the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
357
- * tags, such as [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/crossOrigin),
358
- * [`integrity`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/integrity),
359
- * [`rel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel),
360
- * etc.
361
- * @returns A collection of React elements for [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
362
- * tags
363
- */
364
- declare function PrefetchPageLinks({ page, ...linkProps }: PageLinkDescriptor): React.JSX.Element | null;
365
- /**
366
- * Renders all the [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
367
- * tags created by the route module's [`meta`](../../start/framework/route-module#meta)
368
- * export. You should render it inside the [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
369
- * of your document.
370
- *
371
- * @example
372
- * import { Meta } from "react-router";
373
- *
374
- * export default function Root() {
375
- * return (
376
- * <html>
377
- * <head>
378
- * <Meta />
379
- * </head>
380
- * </html>
381
- * );
382
- * }
383
- *
384
- * @public
385
- * @category Components
386
- * @mode framework
387
- * @returns A collection of React elements for [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
388
- * tags
389
- */
390
- declare function Meta(): React.JSX.Element;
391
- /**
392
- * A couple common attributes:
393
- *
394
- * - `<Scripts crossOrigin>` for hosting your static assets on a different
395
- * server than your app.
396
- * - `<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)
397
- * with [nonce-sources](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources)
398
- * for your [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
399
- * tags.
400
- *
401
- * You cannot pass through attributes such as [`async`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/async),
402
- * [`defer`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/defer),
403
- * [`noModule`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/noModule),
404
- * [`src`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/src),
405
- * or [`type`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/type),
406
- * because they are managed by React Router internally.
407
- *
408
- * @category Types
409
- */
410
- type ScriptsProps = Omit<React.HTMLProps<HTMLScriptElement>, "async" | "children" | "dangerouslySetInnerHTML" | "defer" | "noModule" | "src" | "suppressHydrationWarning" | "type"> & {
411
- /**
412
- * A [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
413
- * attribute to render on the [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
414
- * element. If not provided in Framework Mode, it will default to any
415
- * {@link ServerRouter | `<ServerRouter nonce>`} prop.
416
- */
417
- nonce?: string | undefined;
418
- };
419
- /**
420
- * Renders the client runtime of your app. It should be rendered inside the
421
- * [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body)
422
- * of the document.
423
- *
424
- * If server rendering, you can omit `<Scripts/>` and the app will work as a
425
- * traditional web app without JavaScript, relying solely on HTML and browser
426
- * behaviors.
427
- *
428
- * @example
429
- * import { Scripts } from "react-router";
430
- *
431
- * export default function Root() {
432
- * return (
433
- * <html>
434
- * <head />
435
- * <body>
436
- * <Scripts />
437
- * </body>
438
- * </html>
439
- * );
440
- * }
441
- *
442
- * @public
443
- * @category Components
444
- * @mode framework
445
- * @param scriptProps Additional props to spread onto the [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
446
- * tags, such as [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/crossOrigin),
447
- * [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce),
448
- * etc.
449
- * @returns A collection of React elements for [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
450
- * tags
451
- */
452
- declare function Scripts(scriptProps: ScriptsProps): React.JSX.Element | null;
453
-
454
- /**
455
- * @category Data Routers
456
- */
457
- interface DOMRouterOpts {
458
- /**
459
- * Basename path for the application.
460
- */
461
- basename?: string;
462
- /**
463
- * A function that returns an {@link RouterContextProvider} instance
464
- * which is provided as the `context` argument to client [`action`](../../start/data/route-object#action)s,
465
- * [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
466
- * This function is called to generate a fresh `context` instance on each
467
- * navigation or fetcher call.
468
- *
469
- * ```tsx
470
- * import {
471
- * createContext,
472
- * RouterContextProvider,
473
- * } from "react-router";
474
- *
475
- * const apiClientContext = createContext<APIClient>();
476
- *
477
- * function createBrowserRouter(routes, {
478
- * getContext() {
479
- * let context = new RouterContextProvider();
480
- * context.set(apiClientContext, getApiClient());
481
- * return context;
482
- * }
483
- * })
484
- * ```
485
- */
486
- getContext?: RouterInit["getContext"];
487
- /**
488
- * Future flags to enable for the router.
489
- */
490
- future?: Partial<FutureConfig$1>;
491
- /**
492
- * When Server-Rendering and opting-out of automatic hydration, the
493
- * `hydrationData` option allows you to pass in hydration data from your
494
- * server-render. This will almost always be a subset of data from the
495
- * {@link StaticHandlerContext} value you get back from the {@link StaticHandler}'s
496
- * `query` method:
497
- *
498
- * ```tsx
499
- * const router = createBrowserRouter(routes, {
500
- * hydrationData: {
501
- * loaderData: {
502
- * // [routeId]: serverLoaderData
503
- * },
504
- * // may also include `errors` and/or `actionData`
505
- * },
506
- * });
507
- * ```
508
- *
509
- * **Partial Hydration Data**
510
- *
511
- * You will almost always include a complete set of `loaderData` to hydrate a
512
- * server-rendered app. But in advanced use-cases (such as Framework Mode's
513
- * [`clientLoader`](../../start/framework/route-module#clientLoader)), you may
514
- * want to include `loaderData` for only some routes that were loaded/rendered
515
- * on the server. This allows you to hydrate _some_ of the routes (such as the
516
- * app layout/shell) while showing a `HydrateFallback` component and running
517
- * the [`loader`](../../start/data/route-object#loader)s for other routes
518
- * during hydration.
519
- *
520
- * A route [`loader`](../../start/data/route-object#loader) will run during
521
- * hydration in two scenarios:
522
- *
523
- * 1. No hydration data is provided
524
- * In these cases the `HydrateFallback` component will render on initial
525
- * hydration
526
- * 2. The `loader.hydrate` property is set to `true`
527
- * This allows you to run the [`loader`](../../start/data/route-object#loader)
528
- * even if you did not render a fallback on initial hydration (i.e., to
529
- * prime a cache with hydration data)
530
- *
531
- * ```tsx
532
- * const router = createBrowserRouter(
533
- * [
534
- * {
535
- * id: "root",
536
- * loader: rootLoader,
537
- * Component: Root,
538
- * children: [
539
- * {
540
- * id: "index",
541
- * loader: indexLoader,
542
- * HydrateFallback: IndexSkeleton,
543
- * Component: Index,
544
- * },
545
- * ],
546
- * },
547
- * ],
548
- * {
549
- * hydrationData: {
550
- * loaderData: {
551
- * root: "ROOT DATA",
552
- * // No index data provided
553
- * },
554
- * },
555
- * }
556
- * );
557
- * ```
558
- */
559
- hydrationData?: HydrationState;
560
- /**
561
- * Array of instrumentation objects allowing you to instrument the router and
562
- * individual routes prior to router initialization (and on any subsequently
563
- * added routes via `route.lazy` or `patchRoutesOnNavigation`). This is
564
- * mostly useful for observability such as wrapping navigations, fetches,
565
- * as well as route loaders/actions/middlewares with logging and/or performance
566
- * tracing. See the [docs](../../how-to/instrumentation) for more information.
567
- *
568
- * ```tsx
569
- * let router = createBrowserRouter(routes, {
570
- * instrumentations: [logging]
571
- * });
572
- *
573
- *
574
- * let logging = {
575
- * router({ instrument }) {
576
- * instrument({
577
- * navigate: (impl, info) => logExecution(`navigate ${info.to}`, impl),
578
- * fetch: (impl, info) => logExecution(`fetch ${info.to}`, impl)
579
- * });
580
- * },
581
- * route({ instrument, id }) {
582
- * instrument({
583
- * middleware: (impl, info) => logExecution(
584
- * `middleware ${info.request.url} (route ${id})`,
585
- * impl
586
- * ),
587
- * loader: (impl, info) => logExecution(
588
- * `loader ${info.request.url} (route ${id})`,
589
- * impl
590
- * ),
591
- * action: (impl, info) => logExecution(
592
- * `action ${info.request.url} (route ${id})`,
593
- * impl
594
- * ),
595
- * })
596
- * }
597
- * };
598
- *
599
- * async function logExecution(label: string, impl: () => Promise<void>) {
600
- * let start = performance.now();
601
- * console.log(`start ${label}`);
602
- * await impl();
603
- * let duration = Math.round(performance.now() - start);
604
- * console.log(`end ${label} (${duration}ms)`);
605
- * }
606
- * ```
607
- */
608
- instrumentations?: ClientInstrumentation[];
609
- /**
610
- * Override the default data strategy of running loaders in parallel -
611
- * see the [docs](../../how-to/data-strategy) for more information.
612
- *
613
- * ```tsx
614
- * let router = createBrowserRouter(routes, {
615
- * async dataStrategy({
616
- * matches,
617
- * request,
618
- * runClientMiddleware,
619
- * }) {
620
- * const matchesToLoad = matches.filter((m) =>
621
- * m.shouldCallHandler(),
622
- * );
623
- *
624
- * const results: Record<string, DataStrategyResult> = {};
625
- * await runClientMiddleware(() =>
626
- * Promise.all(
627
- * matchesToLoad.map(async (match) => {
628
- * results[match.route.id] = await match.resolve();
629
- * }),
630
- * ),
631
- * );
632
- * return results;
633
- * },
634
- * });
635
- * ```
636
- */
637
- dataStrategy?: DataStrategyFunction;
638
- /**
639
- * Lazily define portions of the route tree on navigations.
640
- * See {@link PatchRoutesOnNavigationFunction}.
641
- *
642
- * By default, React Router wants you to provide a full route tree up front via
643
- * `createBrowserRouter(routes)`. This allows React Router to perform synchronous
644
- * route matching, execute loaders, and then render route components in the most
645
- * optimistic manner without introducing waterfalls. The tradeoff is that your
646
- * initial JS bundle is larger by definition — which may slow down application
647
- * start-up times as your application grows.
648
- *
649
- * To combat this, we introduced [`route.lazy`](../../start/data/route-object#lazy)
650
- * in [v6.9.0](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v690)
651
- * which lets you lazily load the route _implementation_ ([`loader`](../../start/data/route-object#loader),
652
- * [`Component`](../../start/data/route-object#Component), etc.) while still
653
- * providing the route _definition_ aspects up front (`path`, `index`, etc.).
654
- * This is a good middle ground. React Router still knows about your route
655
- * definitions (the lightweight part) up front and can perform synchronous
656
- * route matching, but then delay loading any of the route implementation
657
- * aspects (the heavier part) until the route is actually navigated to.
658
- *
659
- * In some cases, even this doesn't go far enough. For huge applications,
660
- * providing all route definitions up front can be prohibitively expensive.
661
- * Additionally, it might not even be possible to provide all route definitions
662
- * up front in certain Micro-Frontend or Module-Federation architectures.
663
- *
664
- * This is where `patchRoutesOnNavigation` comes in ([RFC](https://github.com/remix-run/react-router/discussions/11113)).
665
- * This API is for advanced use-cases where you are unable to provide the full
666
- * route tree up-front and need a way to lazily "discover" portions of the route
667
- * tree at runtime. This feature is often referred to as ["Fog of War"](https://en.wikipedia.org/wiki/Fog_of_war),
668
- * because similar to how video games expand the "world" as you move around -
669
- * the router would be expanding its routing tree as the user navigated around
670
- * the app - but would only ever end up loading portions of the tree that the
671
- * user visited.
672
- *
673
- * `patchRoutesOnNavigation` will be called anytime React Router is unable to
674
- * match a `path`. The arguments include the `path`, any partial `matches`,
675
- * and a `patch` function you can call to patch new routes into the tree at a
676
- * specific location. This method is executed during the `loading` portion of
677
- * the navigation for `GET` requests and during the `submitting` portion of
678
- * the navigation for non-`GET` requests.
679
- *
680
- * <details>
681
- * <summary><b>Example <code>patchRoutesOnNavigation</code> Use Cases</b></summary>
682
- *
683
- * **Patching children into an existing route**
684
- *
685
- * ```tsx
686
- * const router = createBrowserRouter(
687
- * [
688
- * {
689
- * id: "root",
690
- * path: "/",
691
- * Component: RootComponent,
692
- * },
693
- * ],
694
- * {
695
- * async patchRoutesOnNavigation({ patch, path }) {
696
- * if (path === "/a") {
697
- * // Load/patch the `a` route as a child of the route with id `root`
698
- * let route = await getARoute();
699
- * // ^ { path: 'a', Component: A }
700
- * patch("root", [route]);
701
- * }
702
- * },
703
- * }
704
- * );
705
- * ```
706
- *
707
- * In the above example, if the user clicks a link to `/a`, React Router
708
- * won't match any routes initially and will call `patchRoutesOnNavigation`
709
- * with a `path = "/a"` and a `matches` array containing the root route
710
- * match. By calling `patch('root', [route])`, the new route will be added
711
- * to the route tree as a child of the `root` route and React Router will
712
- * perform matching on the updated routes. This time it will successfully
713
- * match the `/a` path and the navigation will complete successfully.
714
- *
715
- * **Patching new root-level routes**
716
- *
717
- * If you need to patch a new route to the top of the tree (i.e., it doesn't
718
- * have a parent), you can pass `null` as the `routeId`:
719
- *
720
- * ```tsx
721
- * const router = createBrowserRouter(
722
- * [
723
- * {
724
- * id: "root",
725
- * path: "/",
726
- * Component: RootComponent,
727
- * },
728
- * ],
729
- * {
730
- * async patchRoutesOnNavigation({ patch, path }) {
731
- * if (path === "/root-sibling") {
732
- * // Load/patch the `/root-sibling` route as a sibling of the root route
733
- * let route = await getRootSiblingRoute();
734
- * // ^ { path: '/root-sibling', Component: RootSibling }
735
- * patch(null, [route]);
736
- * }
737
- * },
738
- * }
739
- * );
740
- * ```
741
- *
742
- * **Patching subtrees asynchronously**
743
- *
744
- * You can also perform asynchronous matching to lazily fetch entire sections
745
- * of your application:
746
- *
747
- * ```tsx
748
- * let router = createBrowserRouter(
749
- * [
750
- * {
751
- * path: "/",
752
- * Component: Home,
753
- * },
754
- * ],
755
- * {
756
- * async patchRoutesOnNavigation({ patch, path }) {
757
- * if (path.startsWith("/dashboard")) {
758
- * let children = await import("./dashboard");
759
- * patch(null, children);
760
- * }
761
- * if (path.startsWith("/account")) {
762
- * let children = await import("./account");
763
- * patch(null, children);
764
- * }
765
- * },
766
- * }
767
- * );
768
- * ```
769
- *
770
- * <docs-info>If in-progress execution of `patchRoutesOnNavigation` is
771
- * interrupted by a later navigation, then any remaining `patch` calls in
772
- * the interrupted execution will not update the route tree because the
773
- * operation was cancelled.</docs-info>
774
- *
775
- * **Co-locating route discovery with route definition**
776
- *
777
- * If you don't wish to perform your own pseudo-matching, you can leverage
778
- * the partial `matches` array and the [`handle`](../../start/data/route-object#handle)
779
- * field on a route to keep the children definitions co-located:
780
- *
781
- * ```tsx
782
- * let router = createBrowserRouter(
783
- * [
784
- * {
785
- * path: "/",
786
- * Component: Home,
787
- * },
788
- * {
789
- * path: "/dashboard",
790
- * children: [
791
- * {
792
- * // If we want to include /dashboard in the critical routes, we need to
793
- * // also include it's index route since patchRoutesOnNavigation will not be
794
- * // called on a navigation to `/dashboard` because it will have successfully
795
- * // matched the `/dashboard` parent route
796
- * index: true,
797
- * // ...
798
- * },
799
- * ],
800
- * handle: {
801
- * lazyChildren: () => import("./dashboard"),
802
- * },
803
- * },
804
- * {
805
- * path: "/account",
806
- * children: [
807
- * {
808
- * index: true,
809
- * // ...
810
- * },
811
- * ],
812
- * handle: {
813
- * lazyChildren: () => import("./account"),
814
- * },
815
- * },
816
- * ],
817
- * {
818
- * async patchRoutesOnNavigation({ matches, patch }) {
819
- * let leafRoute = matches[matches.length - 1]?.route;
820
- * if (leafRoute?.handle?.lazyChildren) {
821
- * let children =
822
- * await leafRoute.handle.lazyChildren();
823
- * patch(leafRoute.id, children);
824
- * }
825
- * },
826
- * }
827
- * );
828
- * ```
829
- *
830
- * **A note on routes with parameters**
831
- *
832
- * Because React Router uses ranked routes to find the best match for a
833
- * given path, there is an interesting ambiguity introduced when only a
834
- * partial route tree is known at any given point in time. If we match a
835
- * fully static route such as `path: "/about/contact-us"` then we know we've
836
- * found the right match since it's composed entirely of static URL segments.
837
- * Thus, we do not need to bother asking for any other potentially
838
- * higher-scoring routes.
839
- *
840
- * However, routes with parameters (dynamic or splat) can't make this
841
- * assumption because there might be a not-yet-discovered route that scores
842
- * higher. Consider a full route tree such as:
843
- *
844
- * ```tsx
845
- * // Assume this is the full route tree for your app
846
- * const routes = [
847
- * {
848
- * path: "/",
849
- * Component: Home,
850
- * },
851
- * {
852
- * id: "blog",
853
- * path: "/blog",
854
- * Component: BlogLayout,
855
- * children: [
856
- * { path: "new", Component: NewPost },
857
- * { path: ":slug", Component: BlogPost },
858
- * ],
859
- * },
860
- * ];
861
- * ```
862
- *
863
- * And then assume we want to use `patchRoutesOnNavigation` to fill this in
864
- * as the user navigates around:
865
- *
866
- * ```tsx
867
- * // Start with only the index route
868
- * const router = createBrowserRouter(
869
- * [
870
- * {
871
- * path: "/",
872
- * Component: Home,
873
- * },
874
- * ],
875
- * {
876
- * async patchRoutesOnNavigation({ patch, path }) {
877
- * if (path === "/blog/new") {
878
- * patch("blog", [
879
- * {
880
- * path: "new",
881
- * Component: NewPost,
882
- * },
883
- * ]);
884
- * } else if (path.startsWith("/blog")) {
885
- * patch("blog", [
886
- * {
887
- * path: ":slug",
888
- * Component: BlogPost,
889
- * },
890
- * ]);
891
- * }
892
- * },
893
- * }
894
- * );
895
- * ```
896
- *
897
- * If the user were to a blog post first (i.e., `/blog/my-post`) we would
898
- * patch in the `:slug` route. Then, if the user navigated to `/blog/new` to
899
- * write a new post, we'd match `/blog/:slug` but it wouldn't be the _right_
900
- * match! We need to call `patchRoutesOnNavigation` just in case there
901
- * exists a higher-scoring route we've not yet discovered, which in this
902
- * case there is.
903
- *
904
- * So, anytime React Router matches a path that contains at least one param,
905
- * it will call `patchRoutesOnNavigation` and match routes again just to
906
- * confirm it has found the best match.
907
- *
908
- * If your `patchRoutesOnNavigation` implementation is expensive or making
909
- * side effect [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch)
910
- * calls to a backend server, you may want to consider tracking previously
911
- * seen routes to avoid over-fetching in cases where you know the proper
912
- * route has already been found. This can usually be as simple as
913
- * maintaining a small cache of prior `path` values for which you've already
914
- * patched in the right routes:
915
- *
916
- * ```tsx
917
- * let discoveredRoutes = new Set();
918
- *
919
- * const router = createBrowserRouter(routes, {
920
- * async patchRoutesOnNavigation({ patch, path }) {
921
- * if (discoveredRoutes.has(path)) {
922
- * // We've seen this before so nothing to patch in and we can let the router
923
- * // use the routes it already knows about
924
- * return;
925
- * }
926
- *
927
- * discoveredRoutes.add(path);
928
- *
929
- * // ... patch routes in accordingly
930
- * },
931
- * });
932
- * ```
933
- * </details>
934
- */
935
- patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
936
- /**
937
- * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
938
- * override. Defaults to the global `window` instance.
939
- */
940
- window?: Window;
941
- }
942
- /**
943
- * Create a new {@link DataRouter| data router} that manages the application
944
- * path via [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState)
945
- * and [`history.replaceState`](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState).
946
- *
947
- * Data Routers should not be held in React state. You should create your router
948
- * once outside of the React tree and pass it to {@link RouterProvider | `<RouterProvider>`}.
949
- * You can use `patchRoutesOnNavigation` to add additional routes programmatically.
950
- *
951
- * @public
952
- * @category Data Routers
953
- * @mode data
954
- * @param routes Application routes
955
- * @param opts Options
956
- * @param {DOMRouterOpts.basename} opts.basename n/a
957
- * @param {DOMRouterOpts.dataStrategy} opts.dataStrategy n/a
958
- * @param {DOMRouterOpts.future} opts.future n/a
959
- * @param {DOMRouterOpts.getContext} opts.getContext n/a
960
- * @param {DOMRouterOpts.hydrationData} opts.hydrationData n/a
961
- * @param {DOMRouterOpts.instrumentations} opts.instrumentations n/a
962
- * @param {DOMRouterOpts.patchRoutesOnNavigation} opts.patchRoutesOnNavigation n/a
963
- * @param {DOMRouterOpts.window} opts.window n/a
964
- * @returns An initialized {@link DataRouter| data router} to pass to {@link RouterProvider | `<RouterProvider>`}
965
- */
966
- declare function createBrowserRouter(routes: RouteObject[], opts?: DOMRouterOpts): Router;
967
- /**
968
- * Create a new {@link DataRouter| data router} that manages the application
969
- * path via the URL [`hash`](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash).
970
- *
971
- * Data Routers should not be held in React state. You should create your router
972
- * once outside of the React tree and pass it to {@link RouterProvider | `<RouterProvider>`}.
973
- * You can use `patchRoutesOnNavigation` to add additional routes programmatically.
974
- *
975
- * @public
976
- * @category Data Routers
977
- * @mode data
978
- * @param routes Application routes
979
- * @param opts Options
980
- * @param {DOMRouterOpts.basename} opts.basename n/a
981
- * @param {DOMRouterOpts.future} opts.future n/a
982
- * @param {DOMRouterOpts.getContext} opts.getContext n/a
983
- * @param {DOMRouterOpts.hydrationData} opts.hydrationData n/a
984
- * @param {DOMRouterOpts.instrumentations} opts.instrumentations n/a
985
- * @param {DOMRouterOpts.dataStrategy} opts.dataStrategy n/a
986
- * @param {DOMRouterOpts.patchRoutesOnNavigation} opts.patchRoutesOnNavigation n/a
987
- * @param {DOMRouterOpts.window} opts.window n/a
988
- * @returns An initialized {@link DataRouter| data router} to pass to {@link RouterProvider | `<RouterProvider>`}
989
- */
990
- declare function createHashRouter(routes: RouteObject[], opts?: DOMRouterOpts): Router;
991
- /**
992
- * @category Types
993
- */
994
- interface BrowserRouterProps {
995
- /**
996
- * Application basename
997
- */
998
- basename?: string;
999
- /**
1000
- * {@link Route | `<Route>`} components describing your route configuration
1001
- */
1002
- children?: React.ReactNode;
1003
- /**
1004
- * Control whether router state updates are internally wrapped in
1005
- * [`React.startTransition`](https://react.dev/reference/react/startTransition).
1006
- *
1007
- * - When left `undefined`, all router state updates are wrapped in
1008
- * `React.startTransition`
1009
- * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
1010
- * in `React.startTransition` and all router state updates are wrapped in
1011
- * `React.startTransition`
1012
- * - When set to `false`, the router will not leverage `React.startTransition`
1013
- * on any navigations or state changes.
1014
- *
1015
- * For more information, please see the [docs](../../explanation/react-transitions).
1016
- */
1017
- useTransitions?: boolean;
1018
- /**
1019
- * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
1020
- * override. Defaults to the global `window` instance
1021
- */
1022
- window?: Window;
1023
- }
1024
- /**
1025
- * A declarative {@link Router | `<Router>`} using the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
1026
- * API for client-side routing.
1027
- *
1028
- * @public
1029
- * @category Declarative Routers
1030
- * @mode declarative
1031
- * @param props Props
1032
- * @param {BrowserRouterProps.basename} props.basename n/a
1033
- * @param {BrowserRouterProps.children} props.children n/a
1034
- * @param {BrowserRouterProps.useTransitions} props.useTransitions n/a
1035
- * @param {BrowserRouterProps.window} props.window n/a
1036
- * @returns A declarative {@link Router | `<Router>`} using the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
1037
- * API for client-side routing.
1038
- */
1039
- declare function BrowserRouter({ basename, children, useTransitions, window, }: BrowserRouterProps): React.JSX.Element;
1040
- /**
1041
- * @category Types
1042
- */
1043
- interface HashRouterProps {
1044
- /**
1045
- * Application basename
1046
- */
1047
- basename?: string;
1048
- /**
1049
- * {@link Route | `<Route>`} components describing your route configuration
1050
- */
1051
- children?: React.ReactNode;
1052
- /**
1053
- * Control whether router state updates are internally wrapped in
1054
- * [`React.startTransition`](https://react.dev/reference/react/startTransition).
1055
- *
1056
- * - When left `undefined`, all router state updates are wrapped in
1057
- * `React.startTransition`
1058
- * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
1059
- * in `React.startTransition` and all router state updates are wrapped in
1060
- * `React.startTransition`
1061
- * - When set to `false`, the router will not leverage `React.startTransition`
1062
- * on any navigations or state changes.
1063
- *
1064
- * For more information, please see the [docs](../../explanation/react-transitions).
1065
- */
1066
- useTransitions?: boolean;
1067
- /**
1068
- * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
1069
- * override. Defaults to the global `window` instance
1070
- */
1071
- window?: Window;
1072
- }
1073
- /**
1074
- * A declarative {@link Router | `<Router>`} that stores the location in the
1075
- * [`hash`](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash) portion
1076
- * of the URL so it is not sent to the server.
1077
- *
1078
- * @public
1079
- * @category Declarative Routers
1080
- * @mode declarative
1081
- * @param props Props
1082
- * @param {HashRouterProps.basename} props.basename n/a
1083
- * @param {HashRouterProps.children} props.children n/a
1084
- * @param {HashRouterProps.useTransitions} props.useTransitions n/a
1085
- * @param {HashRouterProps.window} props.window n/a
1086
- * @returns A declarative {@link Router | `<Router>`} using the URL [`hash`](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash)
1087
- * for client-side routing.
1088
- */
1089
- declare function HashRouter({ basename, children, useTransitions, window, }: HashRouterProps): React.JSX.Element;
1090
- /**
1091
- * @category Types
1092
- */
1093
- interface HistoryRouterProps {
1094
- /**
1095
- * Application basename
1096
- */
1097
- basename?: string;
1098
- /**
1099
- * {@link Route | `<Route>`} components describing your route configuration
1100
- */
1101
- children?: React.ReactNode;
1102
- /**
1103
- * A {@link History} implementation for use by the router
1104
- */
1105
- history: History;
1106
- /**
1107
- * Control whether router state updates are internally wrapped in
1108
- * [`React.startTransition`](https://react.dev/reference/react/startTransition).
1109
- *
1110
- * - When left `undefined`, all router state updates are wrapped in
1111
- * `React.startTransition`
1112
- * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
1113
- * in `React.startTransition` and all router state updates are wrapped in
1114
- * `React.startTransition`
1115
- * - When set to `false`, the router will not leverage `React.startTransition`
1116
- * on any navigations or state changes.
1117
- *
1118
- * For more information, please see the [docs](../../explanation/react-transitions).
1119
- */
1120
- useTransitions?: boolean;
1121
- }
1122
- /**
1123
- * A declarative {@link Router | `<Router>`} that accepts a pre-instantiated
1124
- * `history` object.
1125
- * It's important to note that using your own `history` object is highly discouraged
1126
- * and may add two versions of the `history` library to your bundles unless you use
1127
- * the same version of the `history` library that React Router uses internally.
1128
- *
1129
- * @name unstable_HistoryRouter
1130
- * @public
1131
- * @category Declarative Routers
1132
- * @mode declarative
1133
- * @param props Props
1134
- * @param {HistoryRouterProps.basename} props.basename n/a
1135
- * @param {HistoryRouterProps.children} props.children n/a
1136
- * @param {HistoryRouterProps.history} props.history n/a
1137
- * @param {HistoryRouterProps.useTransitions} props.useTransitions n/a
1138
- * @returns A declarative {@link Router | `<Router>`} using the provided history
1139
- * implementation for client-side routing.
1140
- */
1141
- declare function HistoryRouter({ basename, children, history, useTransitions, }: HistoryRouterProps): React.JSX.Element;
1142
- declare namespace HistoryRouter {
1143
- var displayName: string;
1144
- }
1145
- /**
1146
- * @category Types
1147
- */
1148
- interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
1149
- /**
1150
- * Defines the link [lazy route discovery](../../explanation/lazy-route-discovery) behavior.
1151
- *
1152
- * - **render** — default, discover the route when the link renders
1153
- * - **none** — don't eagerly discover, only discover if the link is clicked
1154
- *
1155
- * ```tsx
1156
- * <Link /> // default ("render")
1157
- * <Link discover="render" />
1158
- * <Link discover="none" />
1159
- * ```
1160
- */
1161
- discover?: DiscoverBehavior;
1162
- /**
1163
- * Defines the data and module prefetching behavior for the link.
1164
- *
1165
- * ```tsx
1166
- * <Link /> // default
1167
- * <Link prefetch="none" />
1168
- * <Link prefetch="intent" />
1169
- * <Link prefetch="render" />
1170
- * <Link prefetch="viewport" />
1171
- * ```
1172
- *
1173
- * - **none** — default, no prefetching
1174
- * - **intent** — prefetches when the user hovers or focuses the link
1175
- * - **render** — prefetches when the link renders
1176
- * - **viewport** — prefetches when the link is in the viewport, very useful for mobile
1177
- *
1178
- * Prefetching is done with HTML [`<link rel="prefetch">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
1179
- * tags. They are inserted after the link.
1180
- *
1181
- * ```tsx
1182
- * <a href="..." />
1183
- * <a href="..." />
1184
- * <link rel="prefetch" /> // might conditionally render
1185
- * ```
1186
- *
1187
- * Because of this, if you are using `nav :last-child` you will need to use
1188
- * `nav :last-of-type` so the styles don't conditionally fall off your last link
1189
- * (and any other similar selectors).
1190
- */
1191
- prefetch?: PrefetchBehavior;
1192
- /**
1193
- * Will use document navigation instead of client side routing when the link is
1194
- * clicked: the browser will handle the transition normally (as if it were an
1195
- * [`<a href>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)).
1196
- *
1197
- * ```tsx
1198
- * <Link to="/logout" reloadDocument />
1199
- * ```
1200
- */
1201
- reloadDocument?: boolean;
1202
- /**
1203
- * Replaces the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
1204
- * stack instead of pushing a new one onto it.
1205
- *
1206
- * ```tsx
1207
- * <Link replace />
1208
- * ```
1209
- *
1210
- * ```
1211
- * # with a history stack like this
1212
- * A -> B
1213
- *
1214
- * # normal link click pushes a new entry
1215
- * A -> B -> C
1216
- *
1217
- * # but with `replace`, B is replaced by C
1218
- * A -> C
1219
- * ```
1220
- */
1221
- replace?: boolean;
1222
- /**
1223
- * Adds persistent client side routing state to the next location.
1224
- *
1225
- * ```tsx
1226
- * <Link to="/somewhere/else" state={{ some: "value" }} />
1227
- * ```
1228
- *
1229
- * The location state is accessed from the `location`.
1230
- *
1231
- * ```tsx
1232
- * function SomeComp() {
1233
- * const location = useLocation();
1234
- * location.state; // { some: "value" }
1235
- * }
1236
- * ```
1237
- *
1238
- * This state is inaccessible on the server as it is implemented on top of
1239
- * [`history.state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state)
1240
- */
1241
- state?: any;
1242
- /**
1243
- * Prevents the scroll position from being reset to the top of the window when
1244
- * the link is clicked and the app is using {@link ScrollRestoration}. This only
1245
- * prevents new locations resetting scroll to the top, scroll position will be
1246
- * restored for back/forward button navigation.
1247
- *
1248
- * ```tsx
1249
- * <Link to="?tab=one" preventScrollReset />
1250
- * ```
1251
- */
1252
- preventScrollReset?: boolean;
1253
- /**
1254
- * Defines the relative path behavior for the link.
1255
- *
1256
- * ```tsx
1257
- * <Link to=".." /> // default: "route"
1258
- * <Link relative="route" />
1259
- * <Link relative="path" />
1260
- * ```
1261
- *
1262
- * Consider a route hierarchy where a parent route pattern is `"blog"` and a child
1263
- * route pattern is `"blog/:slug/edit"`.
1264
- *
1265
- * - **route** — default, resolves the link relative to the route pattern. In the
1266
- * example above, a relative link of `"..."` will remove both `:slug/edit` segments
1267
- * back to `"/blog"`.
1268
- * - **path** — relative to the path so `"..."` will only remove one URL segment up
1269
- * to `"/blog/:slug"`
1270
- *
1271
- * Note that index routes and layout routes do not have paths so they are not
1272
- * included in the relative path calculation.
1273
- */
1274
- relative?: RelativeRoutingType;
1275
- /**
1276
- * Can be a string or a partial {@link Path}:
1277
- *
1278
- * ```tsx
1279
- * <Link to="/some/path" />
1280
- *
1281
- * <Link
1282
- * to={{
1283
- * pathname: "/some/path",
1284
- * search: "?query=string",
1285
- * hash: "#hash",
1286
- * }}
1287
- * />
1288
- * ```
1289
- */
1290
- to: To;
1291
- /**
1292
- * Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
1293
- * for this navigation.
1294
- *
1295
- * ```jsx
1296
- * <Link to={to} viewTransition>
1297
- * Click me
1298
- * </Link>
1299
- * ```
1300
- *
1301
- * To apply specific styles for the transition, see {@link useViewTransitionState}
1302
- */
1303
- viewTransition?: boolean;
1304
- /**
1305
- * Specify the default revalidation behavior for the navigation.
1306
- *
1307
- * ```tsx
1308
- * <Link to="/some/path" defaultShouldRevalidate={false} />
1309
- * ```
1310
- *
1311
- * If no `shouldRevalidate` functions are present on the active routes, then this
1312
- * value will be used directly. Otherwise it will be passed into `shouldRevalidate`
1313
- * so the route can make the final determination on revalidation. This can be
1314
- * useful when updating search params and you don't want to trigger a revalidation.
1315
- *
1316
- * By default (when not specified), loaders will revalidate according to the routers
1317
- * standard revalidation behavior.
1318
- */
1319
- defaultShouldRevalidate?: boolean;
1320
- /**
1321
- * Masked path for this navigation, when you want to navigate the router to
1322
- * one location but display a separate location in the URL bar.
1323
- *
1324
- * This is useful for contextual navigations such as opening an image in a modal
1325
- * on top of a gallery while keeping the underlying gallery active. If a user
1326
- * shares the masked URL, or opens the link in a new tab, they will only load
1327
- * the masked location without the underlying contextual location.
1328
- *
1329
- * This feature relies on `history.state` and is thus only intended for SPA uses
1330
- * and SSR renders will not respect the masking.
1331
- *
1332
- * ```tsx
1333
- * // routes/gallery.tsx
1334
- * export function clientLoader({ request }: Route.LoaderArgs) {
1335
- * let sp = new URL(request.url).searchParams;
1336
- * return {
1337
- * images: getImages(),
1338
- * modalImage: sp.has("image") ? getImage(sp.get("image")!) : null,
1339
- * };
1340
- * }
1341
- *
1342
- * export default function Gallery({ loaderData }: Route.ComponentProps) {
1343
- * return (
1344
- * <>
1345
- * <GalleryGrid>
1346
- * {loaderData.images.map((image) => (
1347
- * <Link
1348
- * key={image.id}
1349
- * to={`/gallery?image=${image.id}`}
1350
- * mask={`/images/${image.id}`}
1351
- * >
1352
- * <img src={image.url} alt={image.alt} />
1353
- * </Link>
1354
- * ))}
1355
- * </GalleryGrid>
1356
- *
1357
- * {data.modalImage ? (
1358
- * <dialog open>
1359
- * <img src={data.modalImage.url} alt={data.modalImage.alt} />
1360
- * </dialog>
1361
- * ) : null}
1362
- * </>
1363
- * );
1364
- * }
1365
- * ```
1366
- */
1367
- mask?: To;
1368
- }
1369
- /**
1370
- * A progressively enhanced [`<a href>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
1371
- * wrapper to enable navigation with client-side routing.
1372
- *
1373
- * @example
1374
- * import { Link } from "react-router";
1375
- *
1376
- * <Link to="/dashboard">Dashboard</Link>;
1377
- *
1378
- * <Link
1379
- * to={{
1380
- * pathname: "/some/path",
1381
- * search: "?query=string",
1382
- * hash: "#hash",
1383
- * }}
1384
- * />;
1385
- *
1386
- * @public
1387
- * @category Components
1388
- * @param {LinkProps.discover} props.discover [modes: framework] n/a
1389
- * @param {LinkProps.prefetch} props.prefetch [modes: framework] n/a
1390
- * @param {LinkProps.preventScrollReset} props.preventScrollReset [modes: framework, data] n/a
1391
- * @param {LinkProps.relative} props.relative n/a
1392
- * @param {LinkProps.reloadDocument} props.reloadDocument n/a
1393
- * @param {LinkProps.replace} props.replace n/a
1394
- * @param {LinkProps.state} props.state n/a
1395
- * @param {LinkProps.to} props.to n/a
1396
- * @param {LinkProps.viewTransition} props.viewTransition [modes: framework, data] n/a
1397
- * @param {LinkProps.defaultShouldRevalidate} props.defaultShouldRevalidate n/a
1398
- * @param {LinkProps.mask} props.mask [modes: framework, data] n/a
1399
- */
1400
- declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
1401
- /**
1402
- * The object passed to {@link NavLink} `children`, `className`, and `style` prop
1403
- * callbacks to render and style the link based on its state.
1404
- *
1405
- * ```
1406
- * // className
1407
- * <NavLink
1408
- * to="/messages"
1409
- * className={({ isActive, isPending }) =>
1410
- * isPending ? "pending" : isActive ? "active" : ""
1411
- * }
1412
- * >
1413
- * Messages
1414
- * </NavLink>
1415
- *
1416
- * // style
1417
- * <NavLink
1418
- * to="/messages"
1419
- * style={({ isActive, isPending }) => {
1420
- * return {
1421
- * fontWeight: isActive ? "bold" : "",
1422
- * color: isPending ? "red" : "black",
1423
- * }
1424
- * )}
1425
- * />
1426
- *
1427
- * // children
1428
- * <NavLink to="/tasks">
1429
- * {({ isActive, isPending }) => (
1430
- * <span className={isActive ? "active" : ""}>Tasks</span>
1431
- * )}
1432
- * </NavLink>
1433
- * ```
1434
- *
1435
- */
1436
- type NavLinkRenderProps = {
1437
- /**
1438
- * Indicates if the link's URL matches the current {@link Location}.
1439
- */
1440
- isActive: boolean;
1441
- /**
1442
- * Indicates if the pending {@link Location} matches the link's URL. Only
1443
- * available in Framework/Data modes.
1444
- */
1445
- isPending: boolean;
1446
- /**
1447
- * Indicates if a view transition to the link's URL is in progress.
1448
- * See {@link useViewTransitionState}
1449
- */
1450
- isTransitioning: boolean;
1451
- };
1452
- /**
1453
- * @category Types
1454
- */
1455
- interface NavLinkProps extends Omit<LinkProps, "className" | "style" | "children"> {
1456
- /**
1457
- * Can be regular React children or a function that receives an object with the
1458
- * `active` and `pending` states of the link.
1459
- *
1460
- * ```tsx
1461
- * <NavLink to="/tasks">
1462
- * {({ isActive }) => (
1463
- * <span className={isActive ? "active" : ""}>Tasks</span>
1464
- * )}
1465
- * </NavLink>
1466
- * ```
1467
- */
1468
- children?: React.ReactNode | ((props: NavLinkRenderProps) => React.ReactNode);
1469
- /**
1470
- * Changes the matching logic to make it case-sensitive:
1471
- *
1472
- * | Link | URL | isActive |
1473
- * | -------------------------------------------- | ------------- | -------- |
1474
- * | `<NavLink to="/SpOnGe-bOB" />` | `/sponge-bob` | true |
1475
- * | `<NavLink to="/SpOnGe-bOB" caseSensitive />` | `/sponge-bob` | false |
1476
- */
1477
- caseSensitive?: boolean;
1478
- /**
1479
- * Classes are automatically applied to `NavLink` that correspond to the state.
1480
- *
1481
- * ```css
1482
- * a.active {
1483
- * color: red;
1484
- * }
1485
- * a.pending {
1486
- * color: blue;
1487
- * }
1488
- * a.transitioning {
1489
- * view-transition-name: my-transition;
1490
- * }
1491
- * ```
1492
- *
1493
- * Or you can specify a function that receives {@link NavLinkRenderProps} and
1494
- * returns the `className`:
1495
- *
1496
- * ```tsx
1497
- * <NavLink className={({ isActive, isPending }) => (
1498
- * isActive ? "my-active-class" :
1499
- * isPending ? "my-pending-class" :
1500
- * ""
1501
- * )} />
1502
- * ```
1503
- */
1504
- className?: string | ((props: NavLinkRenderProps) => string | undefined);
1505
- /**
1506
- * Changes the matching logic for the `active` and `pending` states to only match
1507
- * to the "end" of the {@link NavLinkProps.to}. If the URL is longer, it will no
1508
- * longer be considered active.
1509
- *
1510
- * | Link | URL | isActive |
1511
- * | ----------------------------- | ------------ | -------- |
1512
- * | `<NavLink to="/tasks" />` | `/tasks` | true |
1513
- * | `<NavLink to="/tasks" />` | `/tasks/123` | true |
1514
- * | `<NavLink to="/tasks" end />` | `/tasks` | true |
1515
- * | `<NavLink to="/tasks" end />` | `/tasks/123` | false |
1516
- *
1517
- * `<NavLink to="/">` is an exceptional case because _every_ URL matches `/`.
1518
- * To avoid this matching every single route by default, it effectively ignores
1519
- * the `end` prop and only matches when you're at the root route.
1520
- */
1521
- end?: boolean;
1522
- /**
1523
- * Styles can also be applied dynamically via a function that receives
1524
- * {@link NavLinkRenderProps} and returns the styles:
1525
- *
1526
- * ```tsx
1527
- * <NavLink to="/tasks" style={{ color: "red" }} />
1528
- * <NavLink to="/tasks" style={({ isActive, isPending }) => ({
1529
- * color:
1530
- * isActive ? "red" :
1531
- * isPending ? "blue" : "black"
1532
- * })} />
1533
- * ```
1534
- */
1535
- style?: React.CSSProperties | ((props: NavLinkRenderProps) => React.CSSProperties | undefined);
1536
- }
1537
- /**
1538
- * Wraps {@link Link | `<Link>`} with additional props for styling active and
1539
- * pending states.
1540
- *
1541
- * - Automatically applies classes to the link based on its `active` and `pending`
1542
- * states, see {@link NavLinkProps.className}
1543
- * - Note that `pending` is only available with Framework and Data modes.
1544
- * - Automatically applies `aria-current="page"` to the link when the link is active.
1545
- * See [`aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
1546
- * on MDN.
1547
- * - States are additionally available through the className, style, and children
1548
- * render props. See {@link NavLinkRenderProps}.
1549
- *
1550
- * @example
1551
- * <NavLink to="/message">Messages</NavLink>
1552
- *
1553
- * // Using render props
1554
- * <NavLink
1555
- * to="/messages"
1556
- * className={({ isActive, isPending }) =>
1557
- * isPending ? "pending" : isActive ? "active" : ""
1558
- * }
1559
- * >
1560
- * Messages
1561
- * </NavLink>
1562
- *
1563
- * @public
1564
- * @category Components
1565
- * @param {NavLinkProps.caseSensitive} props.caseSensitive n/a
1566
- * @param {NavLinkProps.children} props.children n/a
1567
- * @param {NavLinkProps.className} props.className n/a
1568
- * @param {NavLinkProps.discover} props.discover [modes: framework] n/a
1569
- * @param {NavLinkProps.end} props.end n/a
1570
- * @param {NavLinkProps.prefetch} props.prefetch [modes: framework] n/a
1571
- * @param {NavLinkProps.preventScrollReset} props.preventScrollReset [modes: framework, data] n/a
1572
- * @param {NavLinkProps.relative} props.relative n/a
1573
- * @param {NavLinkProps.reloadDocument} props.reloadDocument n/a
1574
- * @param {NavLinkProps.replace} props.replace n/a
1575
- * @param {NavLinkProps.state} props.state n/a
1576
- * @param {NavLinkProps.style} props.style n/a
1577
- * @param {NavLinkProps.to} props.to n/a
1578
- * @param {NavLinkProps.viewTransition} props.viewTransition [modes: framework, data] n/a
1579
- */
1580
- declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
1581
- /**
1582
- * Form props shared by navigations and fetchers
1583
- */
1584
- interface SharedFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
1585
- /**
1586
- * The HTTP verb to use when the form is submitted. Supports `"delete"`,
1587
- * `"get"`, `"patch"`, `"post"`, and `"put"`.
1588
- *
1589
- * Native [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
1590
- * only supports `"get"` and `"post"`, avoid the other verbs if you'd like to
1591
- * support progressive enhancement
1592
- */
1593
- method?: HTMLFormMethod;
1594
- /**
1595
- * The encoding type to use for the form submission.
1596
- *
1597
- * ```tsx
1598
- * <Form encType="application/x-www-form-urlencoded"/> // Default
1599
- * <Form encType="multipart/form-data"/>
1600
- * <Form encType="text/plain"/>
1601
- * ```
1602
- */
1603
- encType?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
1604
- /**
1605
- * The URL to submit the form data to. If `undefined`, this defaults to the
1606
- * closest route in context.
1607
- */
1608
- action?: string;
1609
- /**
1610
- * Determines whether the form action is relative to the route hierarchy or
1611
- * the pathname. Use this if you want to opt out of navigating the route
1612
- * hierarchy and want to instead route based on slash-delimited URL segments.
1613
- * See {@link RelativeRoutingType}.
1614
- */
1615
- relative?: RelativeRoutingType;
1616
- /**
1617
- * Prevent the scroll position from resetting to the top of the viewport on
1618
- * completion of the navigation when using the
1619
- * {@link ScrollRestoration | `<ScrollRestoration>`} component
1620
- */
1621
- preventScrollReset?: boolean;
1622
- /**
1623
- * A function to call when the form is submitted. If you call
1624
- * [`event.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
1625
- * then this form will not do anything.
1626
- */
1627
- onSubmit?: React.FormEventHandler<HTMLFormElement>;
1628
- /**
1629
- * Specify the default revalidation behavior after this submission
1630
- *
1631
- * If no `shouldRevalidate` functions are present on the active routes, then this
1632
- * value will be used directly. Otherwise it will be passed into `shouldRevalidate`
1633
- * so the route can make the final determination on revalidation. This can be
1634
- * useful when updating search params and you don't want to trigger a revalidation.
1635
- *
1636
- * By default (when not specified), loaders will revalidate according to the routers
1637
- * standard revalidation behavior.
1638
- */
1639
- defaultShouldRevalidate?: boolean;
1640
- }
1641
- /**
1642
- * Form props available to fetchers
1643
- * @category Types
1644
- */
1645
- interface FetcherFormProps extends SharedFormProps {
1646
- }
1647
- /**
1648
- * Form props available to navigations
1649
- * @category Types
1650
- */
1651
- interface FormProps extends SharedFormProps {
1652
- /**
1653
- * Defines the form [lazy route discovery](../../explanation/lazy-route-discovery) behavior.
1654
- *
1655
- * - **render** — default, discover the route when the form renders
1656
- * - **none** — don't eagerly discover, only discover if the form is submitted
1657
- *
1658
- * ```tsx
1659
- * <Form /> // default ("render")
1660
- * <Form discover="render" />
1661
- * <Form discover="none" />
1662
- * ```
1663
- */
1664
- discover?: DiscoverBehavior;
1665
- /**
1666
- * Indicates a specific fetcherKey to use when using `navigate={false}` so you
1667
- * can pick up the fetcher's state in a different component in a {@link useFetcher}.
1668
- */
1669
- fetcherKey?: string;
1670
- /**
1671
- * When `false`, skips the navigation and submits via a fetcher internally.
1672
- * This is essentially a shorthand for {@link useFetcher} + `<fetcher.Form>` where
1673
- * you don't care about the resulting data in this component.
1674
- */
1675
- navigate?: boolean;
1676
- /**
1677
- * Forces a full document navigation instead of client side routing and data
1678
- * fetch.
1679
- */
1680
- reloadDocument?: boolean;
1681
- /**
1682
- * Replaces the current entry in the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
1683
- * stack when the form navigates. Use this if you don't want the user to be
1684
- * able to click "back" to the page with the form on it.
1685
- */
1686
- replace?: boolean;
1687
- /**
1688
- * State object to add to the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
1689
- * stack entry for this navigation
1690
- */
1691
- state?: any;
1692
- /**
1693
- * Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
1694
- * for this navigation. To apply specific styles during the transition, see
1695
- * {@link useViewTransitionState}.
1696
- */
1697
- viewTransition?: boolean;
1698
- }
1699
- /**
1700
- * A progressively enhanced HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
1701
- * that submits data to actions via [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch),
1702
- * activating pending states in {@link useNavigation} which enables advanced
1703
- * user interfaces beyond a basic HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).
1704
- * After a form's `action` completes, all data on the page is automatically
1705
- * revalidated to keep the UI in sync with the data.
1706
- *
1707
- * Because it uses the HTML form API, server rendered pages are interactive at a
1708
- * basic level before JavaScript loads. Instead of React Router managing the
1709
- * submission, the browser manages the submission as well as the pending states
1710
- * (like the spinning favicon). After JavaScript loads, React Router takes over
1711
- * enabling web application user experiences.
1712
- *
1713
- * `Form` is most useful for submissions that should also change the URL or
1714
- * otherwise add an entry to the browser history stack. For forms that shouldn't
1715
- * manipulate the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
1716
- * stack, use {@link FetcherWithComponents.Form | `<fetcher.Form>`}.
1717
- *
1718
- * @example
1719
- * import { Form } from "react-router";
1720
- *
1721
- * function NewEvent() {
1722
- * return (
1723
- * <Form action="/events" method="post">
1724
- * <input name="title" type="text" />
1725
- * <input name="description" type="text" />
1726
- * </Form>
1727
- * );
1728
- * }
1729
- *
1730
- * @public
1731
- * @category Components
1732
- * @mode framework
1733
- * @mode data
1734
- * @param {FormProps.action} action n/a
1735
- * @param {FormProps.discover} discover n/a
1736
- * @param {FormProps.encType} encType n/a
1737
- * @param {FormProps.fetcherKey} fetcherKey n/a
1738
- * @param {FormProps.method} method n/a
1739
- * @param {FormProps.navigate} navigate n/a
1740
- * @param {FormProps.onSubmit} onSubmit n/a
1741
- * @param {FormProps.preventScrollReset} preventScrollReset n/a
1742
- * @param {FormProps.relative} relative n/a
1743
- * @param {FormProps.reloadDocument} reloadDocument n/a
1744
- * @param {FormProps.replace} replace n/a
1745
- * @param {FormProps.state} state n/a
1746
- * @param {FormProps.viewTransition} viewTransition n/a
1747
- * @param {FormProps.defaultShouldRevalidate} defaultShouldRevalidate n/a
1748
- * @returns A progressively enhanced [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) component
1749
- */
1750
- declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
1751
- type ScrollRestorationProps = ScriptsProps & {
1752
- /**
1753
- * A function that returns a key to use for scroll restoration. This is useful
1754
- * for custom scroll restoration logic, such as using only the pathname so
1755
- * that later navigations to prior paths will restore the scroll. Defaults to
1756
- * `location.key`. See {@link GetScrollRestorationKeyFunction}.
1757
- *
1758
- * ```tsx
1759
- * <ScrollRestoration
1760
- * getKey={(location, matches) => {
1761
- * // Restore based on a unique location key (default behavior)
1762
- * return location.key
1763
- *
1764
- * // Restore based on pathname
1765
- * return location.pathname
1766
- * }}
1767
- * />
1768
- * ```
1769
- */
1770
- getKey?: GetScrollRestorationKeyFunction;
1771
- /**
1772
- * The key to use for storing scroll positions in [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage).
1773
- * Defaults to `"react-router-scroll-positions"`.
1774
- */
1775
- storageKey?: string;
1776
- };
1777
- /**
1778
- * Emulates the browser's scroll restoration on location changes. Apps should only render one of these, right before the {@link Scripts} component.
1779
- *
1780
- * ```tsx
1781
- * import { ScrollRestoration } from "react-router";
1782
- *
1783
- * export default function Root() {
1784
- * return (
1785
- * <html>
1786
- * <body>
1787
- * <ScrollRestoration />
1788
- * <Scripts />
1789
- * </body>
1790
- * </html>
1791
- * );
1792
- * }
1793
- * ```
1794
- *
1795
- * This component renders an inline `<script>` to prevent scroll flashing. The
1796
- * `nonce` prop will be passed down to the script tag to allow CSP nonce usage.
1797
- * If not provided in Framework Mode, it will default to any
1798
- * {@link ServerRouter | `<ServerRouter nonce>`} prop.
1799
- *
1800
- * ```tsx
1801
- * <ScrollRestoration nonce={cspNonce} />
1802
- * ```
1803
- *
1804
- * @public
1805
- * @category Components
1806
- * @mode framework
1807
- * @mode data
1808
- * @param props Props
1809
- * @param {ScrollRestorationProps.getKey} props.getKey n/a
1810
- * @param {ScriptsProps.nonce} props.nonce n/a
1811
- * @param {ScrollRestorationProps.storageKey} props.storageKey n/a
1812
- * @returns A [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
1813
- * tag that restores scroll positions on navigation.
1814
- */
1815
- declare function ScrollRestoration({ getKey, storageKey, ...props }: ScrollRestorationProps): React.JSX.Element | null;
1816
- declare namespace ScrollRestoration {
1817
- var displayName: string;
1818
- }
1819
- /**
1820
- * Handles the click behavior for router {@link Link | `<Link>`} components.This
1821
- * is useful if you need to create custom {@link Link | `<Link>`} components with
1822
- * the same click behavior we use in our exported {@link Link | `<Link>`}.
1823
- *
1824
- * @public
1825
- * @category Hooks
1826
- * @param to The URL to navigate to, can be a string or a partial {@link Path}.
1827
- * @param options Options
1828
- * @param options.preventScrollReset Whether to prevent the scroll position from
1829
- * being reset to the top of the viewport on completion of the navigation when
1830
- * using the {@link ScrollRestoration} component. Defaults to `false`.
1831
- * @param options.relative The {@link RelativeRoutingType | relative routing type}
1832
- * to use for the link. Defaults to `"route"`.
1833
- * @param options.replace Whether to replace the current [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
1834
- * entry instead of pushing a new one. Defaults to `false`.
1835
- * @param options.state The state to add to the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
1836
- * entry for this navigation. Defaults to `undefined`.
1837
- * @param options.target The target attribute for the link. Defaults to `undefined`.
1838
- * @param options.viewTransition Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
1839
- * for this navigation. To apply specific styles during the transition, see
1840
- * {@link useViewTransitionState}. Defaults to `false`.
1841
- * @param options.defaultShouldRevalidate Specify the default revalidation
1842
- * behavior for the navigation. Defaults to `true`.
1843
- * @param options.mask Masked location to display in the browser instead
1844
- * of the router location. Defaults to `undefined`.
1845
- * @param options.useTransitions Wraps the navigation in
1846
- * [`React.startTransition`](https://react.dev/reference/react/startTransition)
1847
- * for concurrent rendering. Defaults to `false`.
1848
- * @returns A click handler function that can be used in a custom {@link Link} component.
1849
- */
1850
- declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, mask, state, preventScrollReset, relative, viewTransition, defaultShouldRevalidate, useTransitions, }?: {
1851
- target?: React.HTMLAttributeAnchorTarget;
1852
- replace?: boolean;
1853
- mask?: To;
1854
- state?: any;
1855
- preventScrollReset?: boolean;
1856
- relative?: RelativeRoutingType;
1857
- viewTransition?: boolean;
1858
- defaultShouldRevalidate?: boolean;
1859
- useTransitions?: boolean;
1860
- }): (event: React.MouseEvent<E, MouseEvent>) => void;
1861
- /**
1862
- * Returns a tuple of the current URL's [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
1863
- * and a function to update them. Setting the search params causes a navigation.
1864
- *
1865
- * ```tsx
1866
- * import { useSearchParams } from "react-router";
1867
- *
1868
- * export function SomeComponent() {
1869
- * const [searchParams, setSearchParams] = useSearchParams();
1870
- * // ...
1871
- * }
1872
- * ```
1873
- *
1874
- * ### `setSearchParams` function
1875
- *
1876
- * The second element of the tuple is a function that can be used to update the
1877
- * search params. It accepts the same types as `defaultInit` and will cause a
1878
- * navigation to the new URL.
1879
- *
1880
- * ```tsx
1881
- * let [searchParams, setSearchParams] = useSearchParams();
1882
- *
1883
- * // a search param string
1884
- * setSearchParams("?tab=1");
1885
- *
1886
- * // a shorthand object
1887
- * setSearchParams({ tab: "1" });
1888
- *
1889
- * // object keys can be arrays for multiple values on the key
1890
- * setSearchParams({ brand: ["nike", "reebok"] });
1891
- *
1892
- * // an array of tuples
1893
- * setSearchParams([["tab", "1"]]);
1894
- *
1895
- * // a `URLSearchParams` object
1896
- * setSearchParams(new URLSearchParams("?tab=1"));
1897
- * ```
1898
- *
1899
- * It also supports a function callback like React's
1900
- * [`setState`](https://react.dev/reference/react/useState#setstate):
1901
- *
1902
- * ```tsx
1903
- * setSearchParams((searchParams) => {
1904
- * searchParams.set("tab", "2");
1905
- * return searchParams;
1906
- * });
1907
- * ```
1908
- *
1909
- * <docs-warning>The function callback version of `setSearchParams` does not support
1910
- * the [queueing](https://react.dev/reference/react/useState#setstate-parameters)
1911
- * logic that React's `setState` implements. Multiple calls to `setSearchParams`
1912
- * in the same tick will not build on the prior value. If you need this behavior,
1913
- * you can use `setState` manually.</docs-warning>
1914
- *
1915
- * ### Notes
1916
- *
1917
- * Note that `searchParams` is a stable reference, so you can reliably use it
1918
- * as a dependency in React's [`useEffect`](https://react.dev/reference/react/useEffect)
1919
- * hooks.
1920
- *
1921
- * ```tsx
1922
- * useEffect(() => {
1923
- * console.log(searchParams.get("tab"));
1924
- * }, [searchParams]);
1925
- * ```
1926
- *
1927
- * However, this also means it's mutable. If you change the object without
1928
- * calling `setSearchParams`, its values will change between renders if some
1929
- * other state causes the component to re-render and URL will not reflect the
1930
- * values.
1931
- *
1932
- * @public
1933
- * @category Hooks
1934
- * @param defaultInit
1935
- * You can initialize the search params with a default value, though it **will
1936
- * not** change the URL on the first render.
1937
- *
1938
- * ```tsx
1939
- * // a search param string
1940
- * useSearchParams("?tab=1");
1941
- *
1942
- * // a shorthand object
1943
- * useSearchParams({ tab: "1" });
1944
- *
1945
- * // object keys can be arrays for multiple values on the key
1946
- * useSearchParams({ brand: ["nike", "reebok"] });
1947
- *
1948
- * // an array of tuples
1949
- * useSearchParams([["tab", "1"]]);
1950
- *
1951
- * // a `URLSearchParams` object
1952
- * useSearchParams(new URLSearchParams("?tab=1"));
1953
- * ```
1954
- * @returns A tuple of the current [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
1955
- * and a function to update them.
1956
- */
1957
- declare function useSearchParams(defaultInit?: URLSearchParamsInit): [URLSearchParams, SetURLSearchParams];
1958
- /**
1959
- * Sets new search params and causes a navigation when called.
1960
- *
1961
- * ```tsx
1962
- * <button
1963
- * onClick={() => {
1964
- * const params = new URLSearchParams();
1965
- * params.set("someKey", "someValue");
1966
- * setSearchParams(params, {
1967
- * preventScrollReset: true,
1968
- * });
1969
- * }}
1970
- * />
1971
- * ```
1972
- *
1973
- * It also supports a function for setting new search params.
1974
- *
1975
- * ```tsx
1976
- * <button
1977
- * onClick={() => {
1978
- * setSearchParams((prev) => {
1979
- * prev.set("someKey", "someValue");
1980
- * return prev;
1981
- * });
1982
- * }}
1983
- * />
1984
- * ```
1985
- */
1986
- type SetURLSearchParams = (nextInit?: URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions) => void;
1987
- /**
1988
- * Submits a HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
1989
- * to the server without reloading the page.
1990
- */
1991
- interface SubmitFunction {
1992
- (
1993
- /**
1994
- * Can be multiple types of elements and objects
1995
- *
1996
- * **[`HTMLFormElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)**
1997
- *
1998
- * ```tsx
1999
- * <Form
2000
- * onSubmit={(event) => {
2001
- * submit(event.currentTarget);
2002
- * }}
2003
- * />
2004
- * ```
2005
- *
2006
- * **[`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)**
2007
- *
2008
- * ```tsx
2009
- * const formData = new FormData();
2010
- * formData.append("myKey", "myValue");
2011
- * submit(formData, { method: "post" });
2012
- * ```
2013
- *
2014
- * **Plain object that will be serialized as [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)**
2015
- *
2016
- * ```tsx
2017
- * submit({ myKey: "myValue" }, { method: "post" });
2018
- * ```
2019
- *
2020
- * **Plain object that will be serialized as JSON**
2021
- *
2022
- * ```tsx
2023
- * submit(
2024
- * { myKey: "myValue" },
2025
- * { method: "post", encType: "application/json" }
2026
- * );
2027
- * ```
2028
- */
2029
- target: SubmitTarget,
2030
- /**
2031
- * Options that override the [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)'s
2032
- * own attributes. Required when submitting arbitrary data without a backing
2033
- * [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).
2034
- */
2035
- options?: SubmitOptions): Promise<void>;
2036
- }
2037
- /**
2038
- * Submits a fetcher [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) to the server without reloading the page.
2039
- */
2040
- interface FetcherSubmitFunction {
2041
- (
2042
- /**
2043
- * Can be multiple types of elements and objects
2044
- *
2045
- * **[`HTMLFormElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)**
2046
- *
2047
- * ```tsx
2048
- * <fetcher.Form
2049
- * onSubmit={(event) => {
2050
- * fetcher.submit(event.currentTarget);
2051
- * }}
2052
- * />
2053
- * ```
2054
- *
2055
- * **[`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)**
2056
- *
2057
- * ```tsx
2058
- * const formData = new FormData();
2059
- * formData.append("myKey", "myValue");
2060
- * fetcher.submit(formData, { method: "post" });
2061
- * ```
2062
- *
2063
- * **Plain object that will be serialized as [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)**
2064
- *
2065
- * ```tsx
2066
- * fetcher.submit({ myKey: "myValue" }, { method: "post" });
2067
- * ```
2068
- *
2069
- * **Plain object that will be serialized as JSON**
2070
- *
2071
- * ```tsx
2072
- * fetcher.submit(
2073
- * { myKey: "myValue" },
2074
- * { method: "post", encType: "application/json" }
2075
- * );
2076
- * ```
2077
- */
2078
- target: SubmitTarget, options?: FetcherSubmitOptions): Promise<void>;
2079
- }
2080
- /**
2081
- * The imperative version of {@link Form | `<Form>`} that lets you submit a form
2082
- * from code instead of a user interaction.
2083
- *
2084
- * @example
2085
- * import { useSubmit } from "react-router";
2086
- *
2087
- * function SomeComponent() {
2088
- * const submit = useSubmit();
2089
- * return (
2090
- * <Form onChange={(event) => submit(event.currentTarget)} />
2091
- * );
2092
- * }
2093
- *
2094
- * @public
2095
- * @category Hooks
2096
- * @mode framework
2097
- * @mode data
2098
- * @returns A function that can be called to submit a {@link Form} imperatively.
2099
- */
2100
- declare function useSubmit(): SubmitFunction;
2101
- /**
2102
- * Resolves the URL to the closest route in the component hierarchy instead of
2103
- * the current URL of the app.
2104
- *
2105
- * This is used internally by {@link Form} to resolve the `action` to the closest
2106
- * route, but can be used generically as well.
2107
- *
2108
- * ```ts
2109
- * import { useFormAction } from "react-router";
2110
- *
2111
- * function SomeComponent() {
2112
- * // closest route URL
2113
- * let action = useFormAction();
2114
- *
2115
- * // closest route URL + "destroy"
2116
- * let destroyAction = useFormAction("destroy");
2117
- * }
2118
- * ```
2119
- *
2120
- * <docs-info>This hook adds a `basename` if your app specifies one, so that it
2121
- * can be used with raw `<form>` elements in a progressively enhanced way. If
2122
- * you are using this to provide an `action` to `<Form>` or `fetcher.submit`, you
2123
- * will need to remove the `basename` since both of those will prepend it
2124
- * internally.</docs-info>
2125
- *
2126
- *
2127
- * @public
2128
- * @category Hooks
2129
- * @mode framework
2130
- * @mode data
2131
- * @param action The action to append to the closest route URL. Defaults to the
2132
- * closest route URL.
2133
- * @param options Options
2134
- * @param options.relative The relative routing type to use when resolving the
2135
- * action. Defaults to `"route"`.
2136
- * @returns The resolved action URL.
2137
- */
2138
- declare function useFormAction(action?: string, { relative }?: {
2139
- relative?: RelativeRoutingType;
2140
- }): string;
2141
- /**
2142
- * The return value {@link useFetcher} that keeps track of the state of a fetcher.
2143
- *
2144
- * ```tsx
2145
- * let fetcher = useFetcher();
2146
- * ```
2147
- */
2148
- type FetcherWithComponents<TData> = Fetcher<TData> & {
2149
- /**
2150
- * Just like {@link Form} except it doesn't cause a navigation.
2151
- *
2152
- * ```tsx
2153
- * function SomeComponent() {
2154
- * const fetcher = useFetcher()
2155
- * return (
2156
- * <fetcher.Form method="post" action="/some/route">
2157
- * <input type="text" />
2158
- * </fetcher.Form>
2159
- * )
2160
- * }
2161
- * ```
2162
- */
2163
- Form: React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>;
2164
- /**
2165
- * Loads data from a route. Useful for loading data imperatively inside user
2166
- * events outside a normal button or form, like a combobox or search input.
2167
- *
2168
- * ```tsx
2169
- * let fetcher = useFetcher()
2170
- *
2171
- * <input onChange={e => {
2172
- * fetcher.load(`/search?q=${e.target.value}`)
2173
- * }} />
2174
- * ```
2175
- */
2176
- load: (href: string, opts?: {
2177
- /**
2178
- * Wraps the initial state update for this `fetcher.load` in a
2179
- * [`ReactDOM.flushSync`](https://react.dev/reference/react-dom/flushSync)
2180
- * call instead of the default [`React.startTransition`](https://react.dev/reference/react/startTransition).
2181
- * This allows you to perform synchronous DOM actions immediately after the
2182
- * update is flushed to the DOM.
2183
- */
2184
- flushSync?: boolean;
2185
- }) => Promise<void>;
2186
- /**
2187
- * Reset a fetcher back to an empty/idle state.
2188
- *
2189
- * If the fetcher is currently in-flight, the
2190
- * [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)
2191
- * will be aborted with the `reason`, if provided.
2192
- * @param opts Options for resetting the fetcher.
2193
- * @param opts.reason Optional `reason` to provide to [`AbortController.abort()`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort)
2194
- * @returns void
2195
- */
2196
- reset: (opts?: {
2197
- reason?: unknown;
2198
- }) => void;
2199
- /**
2200
- * Submits form data to a route. While multiple nested routes can match a URL, only the leaf route will be called.
2201
- *
2202
- * The `formData` can be multiple types:
2203
- *
2204
- * - [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)
2205
- * A `FormData` instance.
2206
- * - [`HTMLFormElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)
2207
- * A [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) DOM element.
2208
- * - `Object`
2209
- * An object of key/value-pairs that will be converted to a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)
2210
- * instance by default. You can pass a more complex object and serialize it
2211
- * as JSON by specifying `encType: "application/json"`. See
2212
- * {@link useSubmit} for more details.
2213
- *
2214
- * If the method is `GET`, then the route [`loader`](../../start/framework/route-module#loader)
2215
- * is being called and with the `formData` serialized to the url as [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams).
2216
- * If `DELETE`, `PATCH`, `POST`, or `PUT`, then the route [`action`](../../start/framework/route-module#action)
2217
- * is being called with `formData` as the body.
2218
- *
2219
- * ```tsx
2220
- * // Submit a FormData instance (GET request)
2221
- * const formData = new FormData();
2222
- * fetcher.submit(formData);
2223
- *
2224
- * // Submit the HTML form element
2225
- * fetcher.submit(event.currentTarget.form, {
2226
- * method: "POST",
2227
- * });
2228
- *
2229
- * // Submit key/value JSON as a FormData instance
2230
- * fetcher.submit(
2231
- * { serialized: "values" },
2232
- * { method: "POST" }
2233
- * );
2234
- *
2235
- * // Submit raw JSON
2236
- * fetcher.submit(
2237
- * {
2238
- * deeply: {
2239
- * nested: {
2240
- * json: "values",
2241
- * },
2242
- * },
2243
- * },
2244
- * {
2245
- * method: "POST",
2246
- * encType: "application/json",
2247
- * }
2248
- * );
2249
- * ```
2250
- */
2251
- submit: FetcherSubmitFunction;
2252
- };
2253
- /**
2254
- * Useful for creating complex, dynamic user interfaces that require multiple,
2255
- * concurrent data interactions without causing a navigation.
2256
- *
2257
- * Fetchers track their own, independent state and can be used to load data, submit
2258
- * forms, and generally interact with [`action`](../../start/framework/route-module#action)
2259
- * and [`loader`](../../start/framework/route-module#loader) functions.
2260
- *
2261
- * @example
2262
- * import { useFetcher } from "react-router"
2263
- *
2264
- * function SomeComponent() {
2265
- * let fetcher = useFetcher()
2266
- *
2267
- * // states are available on the fetcher
2268
- * fetcher.state // "idle" | "loading" | "submitting"
2269
- * fetcher.data // the data returned from the action or loader
2270
- *
2271
- * // render a form
2272
- * <fetcher.Form method="post" />
2273
- *
2274
- * // load data
2275
- * fetcher.load("/some/route")
2276
- *
2277
- * // submit data
2278
- * fetcher.submit(someFormRef, { method: "post" })
2279
- * fetcher.submit(someData, {
2280
- * method: "post",
2281
- * encType: "application/json"
2282
- * })
2283
- *
2284
- * // reset fetcher
2285
- * fetcher.reset()
2286
- * }
2287
- *
2288
- * @public
2289
- * @category Hooks
2290
- * @mode framework
2291
- * @mode data
2292
- * @param options Options
2293
- * @param options.key A unique key to identify the fetcher.
2294
- *
2295
- *
2296
- * By default, `useFetcher` generates a unique fetcher scoped to that component.
2297
- * If you want to identify a fetcher with your own key such that you can access
2298
- * it from elsewhere in your app, you can do that with the `key` option:
2299
- *
2300
- * ```tsx
2301
- * function SomeComp() {
2302
- * let fetcher = useFetcher({ key: "my-key" })
2303
- * // ...
2304
- * }
2305
- *
2306
- * // Somewhere else
2307
- * function AnotherComp() {
2308
- * // this will be the same fetcher, sharing the state across the app
2309
- * let fetcher = useFetcher({ key: "my-key" });
2310
- * // ...
2311
- * }
2312
- * ```
2313
- * @returns A {@link FetcherWithComponents} object that contains the fetcher's state, data, and components for submitting forms and loading data.
2314
- */
2315
- declare function useFetcher<T = any>({ key, }?: {
2316
- key?: string;
2317
- }): FetcherWithComponents<SerializeFrom<T>>;
2318
- /**
2319
- * Returns an array of all in-flight {@link Fetcher}s. This is useful for components
2320
- * throughout the app that didn't create the fetchers but want to use their submissions
2321
- * to participate in optimistic UI.
2322
- *
2323
- * @example
2324
- * import { useFetchers } from "react-router";
2325
- *
2326
- * function SomeComponent() {
2327
- * const fetchers = useFetchers();
2328
- * fetchers[0].formData; // FormData
2329
- * fetchers[0].state; // etc.
2330
- * // ...
2331
- * }
2332
- *
2333
- * @public
2334
- * @category Hooks
2335
- * @mode framework
2336
- * @mode data
2337
- * @returns An array of all in-flight {@link Fetcher}s, each with a unique `key`
2338
- * property.
2339
- */
2340
- declare function useFetchers(): (Fetcher & {
2341
- key: string;
2342
- })[];
2343
- /**
2344
- * When rendered inside a {@link RouterProvider}, will restore scroll positions
2345
- * on navigations
2346
- *
2347
- * <!--
2348
- * Not marked `@public` because we only export as UNSAFE_ and therefore we don't
2349
- * maintain an .md file for this hook
2350
- * -->
2351
- *
2352
- * @name UNSAFE_useScrollRestoration
2353
- * @category Hooks
2354
- * @mode framework
2355
- * @mode data
2356
- * @param options Options
2357
- * @param options.getKey A function that returns a key to use for scroll restoration.
2358
- * This is useful for custom scroll restoration logic, such as using only the pathname
2359
- * so that subsequent navigations to prior paths will restore the scroll. Defaults
2360
- * to `location.key`.
2361
- * @param options.storageKey The key to use for storing scroll positions in
2362
- * `sessionStorage`. Defaults to `"react-router-scroll-positions"`.
2363
- * @returns {void}
2364
- */
2365
- declare function useScrollRestoration({ getKey, storageKey, }?: {
2366
- getKey?: GetScrollRestorationKeyFunction;
2367
- storageKey?: string;
2368
- }): void;
2369
- /**
2370
- * Set up a callback to be fired on [Window's `beforeunload` event](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event).
2371
- *
2372
- * @public
2373
- * @category Hooks
2374
- * @param callback The callback to be called when the [`beforeunload` event](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event)
2375
- * is fired.
2376
- * @param options Options
2377
- * @param options.capture If `true`, the event will be captured during the capture
2378
- * phase. Defaults to `false`.
2379
- * @returns {void}
2380
- */
2381
- declare function useBeforeUnload(callback: (event: BeforeUnloadEvent) => any, options?: {
2382
- capture?: boolean;
2383
- }): void;
2384
- /**
2385
- * Wrapper around {@link useBlocker} to show a [`window.confirm`](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm)
2386
- * prompt to users instead of building a custom UI with {@link useBlocker}.
2387
- *
2388
- * The `unstable_` flag will not be removed because this technique has a lot of
2389
- * rough edges and behaves very differently (and incorrectly sometimes) across
2390
- * browsers if users click addition back/forward navigations while the
2391
- * confirmation is open. Use at your own risk.
2392
- *
2393
- * @example
2394
- * function ImportantForm() {
2395
- * let [value, setValue] = React.useState("");
2396
- *
2397
- * // Block navigating elsewhere when data has been entered into the input
2398
- * unstable_usePrompt({
2399
- * message: "Are you sure?",
2400
- * when: ({ currentLocation, nextLocation }) =>
2401
- * value !== "" &&
2402
- * currentLocation.pathname !== nextLocation.pathname,
2403
- * });
2404
- *
2405
- * return (
2406
- * <Form method="post">
2407
- * <label>
2408
- * Enter some important data:
2409
- * <input
2410
- * name="data"
2411
- * value={value}
2412
- * onChange={(e) => setValue(e.target.value)}
2413
- * />
2414
- * </label>
2415
- * <button type="submit">Save</button>
2416
- * </Form>
2417
- * );
2418
- * }
2419
- *
2420
- * @name unstable_usePrompt
2421
- * @public
2422
- * @category Hooks
2423
- * @mode framework
2424
- * @mode data
2425
- * @param options Options
2426
- * @param options.message The message to show in the confirmation dialog.
2427
- * @param options.when A boolean or a function that returns a boolean indicating
2428
- * whether to block the navigation. If a function is provided, it will receive an
2429
- * object with `currentLocation` and `nextLocation` properties.
2430
- * @returns {void}
2431
- */
2432
- declare function usePrompt({ when, message, }: {
2433
- when: boolean | BlockerFunction;
2434
- message: string;
2435
- }): void;
2436
- /**
2437
- * This hook returns `true` when there is an active [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
2438
- * and the specified location matches either side of the navigation (the URL you are
2439
- * navigating **to** or the URL you are navigating **from**). This can be used to apply finer-grained styles to
2440
- * elements to further customize the view transition. This requires that view
2441
- * transitions have been enabled for the given navigation via {@link LinkProps.viewTransition}
2442
- * (or the `Form`, `submit`, or `navigate` call)
2443
- *
2444
- * @public
2445
- * @category Hooks
2446
- * @mode framework
2447
- * @mode data
2448
- * @param to The {@link To} location to compare against the active transition's current
2449
- * and next URLs.
2450
- * @param options Options
2451
- * @param options.relative The relative routing type to use when resolving the
2452
- * `to` location, defaults to `"route"`. See {@link RelativeRoutingType} for
2453
- * more details.
2454
- * @returns `true` if there is an active [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
2455
- * and the resolved path matches the transition's destination or source pathname, otherwise `false`.
2456
- */
2457
- declare function useViewTransitionState(to: To, { relative }?: {
2458
- relative?: RelativeRoutingType;
2459
- }): boolean;
2460
-
2461
- /**
2462
- * @category Types
2463
- */
2464
- interface StaticRouterProps {
2465
- /**
2466
- * The base URL for the static router (default: `/`)
2467
- */
2468
- basename?: string;
2469
- /**
2470
- * The child elements to render inside the static router
2471
- */
2472
- children?: React.ReactNode;
2473
- /**
2474
- * The {@link Location} to render the static router at (default: `/`)
2475
- */
2476
- location: Partial<Location> | string;
2477
- }
2478
- /**
2479
- * A {@link Router | `<Router>`} that may not navigate to any other {@link Location}.
2480
- * This is useful on the server where there is no stateful UI.
2481
- *
2482
- * @public
2483
- * @category Declarative Routers
2484
- * @mode declarative
2485
- * @param props Props
2486
- * @param {StaticRouterProps.basename} props.basename n/a
2487
- * @param {StaticRouterProps.children} props.children n/a
2488
- * @param {StaticRouterProps.location} props.location n/a
2489
- * @returns A React element that renders the static {@link Router | `<Router>`}
2490
- */
2491
- declare function StaticRouter({ basename, children, location: locationProp, }: StaticRouterProps): React.JSX.Element;
2492
- /**
2493
- * @category Types
2494
- */
2495
- interface StaticRouterProviderProps {
2496
- /**
2497
- * The {@link StaticHandlerContext} returned from {@link StaticHandler}'s
2498
- * `query`
2499
- */
2500
- context: StaticHandlerContext;
2501
- /**
2502
- * The static {@link DataRouter} from {@link createStaticRouter}
2503
- */
2504
- router: Router;
2505
- /**
2506
- * Whether to hydrate the router on the client (default `true`)
2507
- */
2508
- hydrate?: boolean;
2509
- /**
2510
- * The [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
2511
- * to use for the hydration [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
2512
- * tag
2513
- */
2514
- nonce?: string;
2515
- }
2516
- /**
2517
- * A {@link DataRouter} that may not navigate to any other {@link Location}.
2518
- * This is useful on the server where there is no stateful UI.
2519
- *
2520
- * @example
2521
- * export async function handleRequest(request: Request) {
2522
- * let { query, dataRoutes } = createStaticHandler(routes);
2523
- * let context = await query(request));
2524
- *
2525
- * if (context instanceof Response) {
2526
- * return context;
2527
- * }
2528
- *
2529
- * let router = createStaticRouter(dataRoutes, context);
2530
- * return new Response(
2531
- * ReactDOMServer.renderToString(<StaticRouterProvider ... />),
2532
- * { headers: { "Content-Type": "text/html" } }
2533
- * );
2534
- * }
2535
- *
2536
- * @public
2537
- * @category Data Routers
2538
- * @mode data
2539
- * @param props Props
2540
- * @param {StaticRouterProviderProps.context} props.context n/a
2541
- * @param {StaticRouterProviderProps.hydrate} props.hydrate n/a
2542
- * @param {StaticRouterProviderProps.nonce} props.nonce n/a
2543
- * @param {StaticRouterProviderProps.router} props.router n/a
2544
- * @returns A React element that renders the static router provider
2545
- */
2546
- declare function StaticRouterProvider({ context, router, hydrate, nonce, }: StaticRouterProviderProps): React.JSX.Element;
2547
- type CreateStaticHandlerOptions = Omit<CreateStaticHandlerOptions$1, "mapRouteProperties">;
2548
- /**
2549
- * Create a static handler to perform server-side data loading
2550
- *
2551
- * @example
2552
- * export async function handleRequest(request: Request) {
2553
- * let { query, dataRoutes } = createStaticHandler(routes);
2554
- * let context = await query(request);
2555
- *
2556
- * if (context instanceof Response) {
2557
- * return context;
2558
- * }
2559
- *
2560
- * let router = createStaticRouter(dataRoutes, context);
2561
- * return new Response(
2562
- * ReactDOMServer.renderToString(<StaticRouterProvider ... />),
2563
- * { headers: { "Content-Type": "text/html" } }
2564
- * );
2565
- * }
2566
- *
2567
- * @public
2568
- * @category Data Routers
2569
- * @mode data
2570
- * @param routes The {@link RouteObject | route objects} to create a static
2571
- * handler for
2572
- * @param opts Options
2573
- * @param opts.basename The base URL for the static handler (default: `/`)
2574
- * @param opts.future Future flags for the static handler
2575
- * @returns A static handler that can be used to query data for the provided
2576
- * routes
2577
- */
2578
- declare function createStaticHandler(routes: RouteObject[], opts?: CreateStaticHandlerOptions): StaticHandler;
2579
- /**
2580
- * Create a static {@link DataRouter} for server-side rendering
2581
- *
2582
- * @example
2583
- * export async function handleRequest(request: Request) {
2584
- * let { query, dataRoutes } = createStaticHandler(routes);
2585
- * let context = await query(request);
2586
- *
2587
- * if (context instanceof Response) {
2588
- * return context;
2589
- * }
2590
- *
2591
- * let router = createStaticRouter(dataRoutes, context);
2592
- * return new Response(
2593
- * ReactDOMServer.renderToString(<StaticRouterProvider ... />),
2594
- * { headers: { "Content-Type": "text/html" } }
2595
- * );
2596
- * }
2597
- *
2598
- * @public
2599
- * @category Data Routers
2600
- * @mode data
2601
- * @param routes The route objects to create a static {@link DataRouter} for
2602
- * @param context The {@link StaticHandlerContext} returned from {@link StaticHandler}'s
2603
- * `query`
2604
- * @param opts Options
2605
- * @param opts.future Future flags for the static {@link DataRouter}
2606
- * @param opts.branches Optional pre-computed route branches
2607
- * @returns A static {@link DataRouter} that can be used to render the provided routes
2608
- */
2609
- declare function createStaticRouter(routes: RouteObject[], context: StaticHandlerContext, opts?: {
2610
- branches?: RouteBranch<DataRouteObject>[];
2611
- future?: Partial<FutureConfig$1>;
2612
- }): Router;
2613
-
2614
- export { type ScriptsProps as $, type AssetsManifest as A, type BrowserRouterProps as B, useViewTransitionState as C, type DOMRouterOpts as D, type EntryContext as E, type FutureConfig as F, type FetcherSubmitOptions as G, type HashRouterProps as H, type SubmitOptions as I, type SubmitTarget as J, createSearchParams as K, type LinkProps as L, type StaticRouterProps as M, type NavLinkProps as N, type StaticRouterProviderProps as O, type ParamKeyValuePair as P, createStaticHandler as Q, createStaticRouter as R, type ServerBuild as S, StaticRouter as T, type URLSearchParamsInit as U, StaticRouterProvider as V, Meta as W, Links as X, Scripts as Y, PrefetchPageLinks as Z, type LinksProps as _, type HistoryRouterProps as a, type PrefetchBehavior as a0, type DiscoverBehavior as a1, type HandleDataRequestFunction as a2, type HandleDocumentRequestFunction as a3, type HandleErrorFunction as a4, type ServerEntryModule as a5, FrameworkContext as a6, createClientRoutes as a7, createClientRoutesWithHMRRevalidationOptOut as a8, shouldHydrateRouteLoader as a9, useScrollRestoration as aa, type NavLinkRenderProps as b, type FetcherFormProps as c, type FormProps as d, type ScrollRestorationProps as e, type SetURLSearchParams as f, type SubmitFunction as g, type FetcherSubmitFunction as h, type FetcherWithComponents as i, createBrowserRouter as j, createHashRouter as k, BrowserRouter as l, HashRouter as m, Link as n, HistoryRouter as o, NavLink as p, Form as q, ScrollRestoration as r, useSearchParams as s, useSubmit as t, useLinkClickHandler as u, useFormAction as v, useFetcher as w, useFetchers as x, useBeforeUnload as y, usePrompt as z };