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