react-router 7.15.1 → 8.0.0-pre.0

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