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