react-router 7.7.0 → 7.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/CHANGELOG.md +11 -23
  2. package/dist/development/{browser-CcxeZJcQ.d.mts → browser-7LYX59NK.d.mts} +97 -1
  3. package/dist/development/{chunk-EF7DTUVF.mjs → chunk-C37GKA54.mjs} +83 -80
  4. package/dist/development/{chunk-V6PEDDZI.js → chunk-K7YFBME3.js} +79 -76
  5. package/dist/{production/chunk-GNZILI6H.mjs → development/chunk-KIUJAIYX.mjs} +3 -5
  6. package/dist/{production/chunk-2TYFPE3B.js → development/chunk-R73PQUJU.js} +132 -132
  7. package/dist/development/components-CjQijYga.d.mts +802 -0
  8. package/dist/development/dom-export.d.mts +13 -6
  9. package/dist/development/dom-export.d.ts +10 -3
  10. package/dist/development/dom-export.js +3 -3
  11. package/dist/development/dom-export.mjs +3 -3
  12. package/dist/development/index-react-server-client-Bi_fx8qz.d.ts +3163 -0
  13. package/dist/development/index-react-server-client-KLg-U4nr.d.mts +2366 -0
  14. package/dist/development/index-react-server-client.d.mts +3 -3
  15. package/dist/development/index-react-server-client.d.ts +2 -2
  16. package/dist/development/index-react-server-client.js +4 -4
  17. package/dist/development/index-react-server-client.mjs +2 -2
  18. package/dist/development/index-react-server.d.mts +109 -2
  19. package/dist/development/index-react-server.d.ts +109 -2
  20. package/dist/development/index-react-server.js +28 -20
  21. package/dist/development/index-react-server.mjs +29 -21
  22. package/dist/development/index.d.mts +918 -287
  23. package/dist/development/index.d.ts +1010 -283
  24. package/dist/development/index.js +98 -100
  25. package/dist/development/index.mjs +3 -3
  26. package/dist/development/lib/types/internal.d.mts +1 -1
  27. package/dist/development/lib/types/internal.d.ts +1 -1
  28. package/dist/development/lib/types/internal.js +1 -1
  29. package/dist/development/lib/types/internal.mjs +1 -1
  30. package/dist/{production/route-data-DjzmHYNR.d.mts → development/route-data-CqEmXQub.d.mts} +48 -2
  31. package/dist/{production/routeModules-g5PTiDfO.d.ts → development/routeModules-BR2FO0ix.d.ts} +48 -2
  32. package/dist/production/{browser-CcxeZJcQ.d.mts → browser-7LYX59NK.d.mts} +97 -1
  33. package/dist/{development/chunk-4ADB4KIO.js → production/chunk-4DGLNKXF.js} +132 -132
  34. package/dist/production/{chunk-5KHO4FML.js → chunk-7OQROU2D.js} +79 -76
  35. package/dist/production/{chunk-WPPIQDYG.mjs → chunk-IZ57JD2V.mjs} +83 -80
  36. package/dist/{development/chunk-T3VM44WY.mjs → production/chunk-K3SBCRK4.mjs} +3 -5
  37. package/dist/production/components-CjQijYga.d.mts +802 -0
  38. package/dist/production/dom-export.d.mts +13 -6
  39. package/dist/production/dom-export.d.ts +10 -3
  40. package/dist/production/dom-export.js +3 -3
  41. package/dist/production/dom-export.mjs +3 -3
  42. package/dist/production/index-react-server-client-Bi_fx8qz.d.ts +3163 -0
  43. package/dist/production/index-react-server-client-KLg-U4nr.d.mts +2366 -0
  44. package/dist/production/index-react-server-client.d.mts +3 -3
  45. package/dist/production/index-react-server-client.d.ts +2 -2
  46. package/dist/production/index-react-server-client.js +4 -4
  47. package/dist/production/index-react-server-client.mjs +2 -2
  48. package/dist/production/index-react-server.d.mts +109 -2
  49. package/dist/production/index-react-server.d.ts +109 -2
  50. package/dist/production/index-react-server.js +28 -20
  51. package/dist/production/index-react-server.mjs +29 -21
  52. package/dist/production/index.d.mts +918 -287
  53. package/dist/production/index.d.ts +1010 -283
  54. package/dist/production/index.js +98 -100
  55. package/dist/production/index.mjs +3 -3
  56. package/dist/production/lib/types/internal.d.mts +1 -1
  57. package/dist/production/lib/types/internal.d.ts +1 -1
  58. package/dist/production/lib/types/internal.js +1 -1
  59. package/dist/production/lib/types/internal.mjs +1 -1
  60. package/dist/{development/route-data-DjzmHYNR.d.mts → production/route-data-CqEmXQub.d.mts} +48 -2
  61. package/dist/{development/routeModules-g5PTiDfO.d.ts → production/routeModules-BR2FO0ix.d.ts} +48 -2
  62. package/package.json +1 -1
  63. package/dist/development/components-DzqPLVI1.d.mts +0 -464
  64. package/dist/development/index-react-server-client-CUidsuu_.d.mts +0 -1360
  65. package/dist/development/index-react-server-client-kY8DvDF3.d.ts +0 -1819
  66. package/dist/production/components-DzqPLVI1.d.mts +0 -464
  67. package/dist/production/index-react-server-client-CUidsuu_.d.mts +0 -1360
  68. package/dist/production/index-react-server-client-kY8DvDF3.d.ts +0 -1819
@@ -1,17 +1,17 @@
1
- import { R as Router, y as RouteModules, D as DataStrategyFunction, T as To, z as NavigateOptions, B as BlockerFunction, E as Blocker, J as SerializeFrom, a as RelativeRoutingType, c as Location, K as ParamParseKey, O as Path, Q as PathPattern, V as PathMatch, U as UIMatch, W as Navigation, A as Action, h as Params, f as RouteObject, I as InitialEntry, H as HydrationState, b as IndexRouteObject, m as LoaderFunction, i as ActionFunction, M as MetaFunction, l as LinksFunction, N as NonIndexRouteObject, X as AppLoadContext, u as unstable_RouterContextProvider, Y as MiddlewareEnabled, Z as unstable_InitialContext, _ as Equal, e as RouterInit, $ as RouterState, P as PatchRoutesOnNavigationFunction, a0 as DataRouteObject, j as ClientLoaderFunction } from './route-data-DjzmHYNR.mjs';
2
- export { ab as ActionFunctionArgs, C as ClientActionFunction, aH as ClientActionFunctionArgs, aI as ClientLoaderFunctionArgs, aF as DataRouteMatch, ac as DataStrategyFunctionArgs, ad as DataStrategyMatch, ae as DataStrategyResult, ag as ErrorResponse, a5 as Fetcher, ah as FormEncType, ai as FormMethod, aN as Future, a2 as GetScrollPositionFunction, a3 as GetScrollRestorationKeyFunction, aj as HTMLFormMethod, aJ as HeadersArgs, k as HeadersFunction, aM as HtmlLinkDescriptor, av as IDLE_BLOCKER, au as IDLE_FETCHER, at as IDLE_NAVIGATION, L as LazyRouteFunction, o as LinkDescriptor, ak as LoaderFunctionArgs, aK as MetaArgs, q as MetaDescriptor, a6 as NavigationStates, d as Navigator, aL as PageLinkDescriptor, aG as PatchRoutesOnNavigationFunctionArgs, am as PathParam, an as RedirectFunction, aa as RevalidationState, g as RouteMatch, a9 as RouterFetchOptions, a8 as RouterNavigateOptions, a7 as RouterSubscriber, S as ShouldRevalidateFunction, ap as ShouldRevalidateFunctionArgs, a1 as StaticHandler, a4 as StaticHandlerContext, aT as UNSAFE_DataRouterContext, aU as UNSAFE_DataRouterStateContext, af as UNSAFE_DataWithResponseInit, aS as UNSAFE_ErrorResponseImpl, aV as UNSAFE_FetchersContext, aW as UNSAFE_LocationContext, aX as UNSAFE_NavigationContext, aY as UNSAFE_RouteContext, aZ as UNSAFE_ViewTransitionContext, aP as UNSAFE_createBrowserHistory, aR as UNSAFE_createRouter, aQ as UNSAFE_invariant, ar as createPath, aw as data, ax as generatePath, ay as isRouteErrorResponse, az as matchPath, aA as matchRoutes, as as parsePath, aB as redirect, aC as redirectDocument, aD as replace, aE as resolvePath, al as unstable_MiddlewareFunction, ao as unstable_RouterContext, aO as unstable_SerializesTo, aq as unstable_createContext } from './route-data-DjzmHYNR.mjs';
3
- import { a as RouteComponentType, H as HydrateFallbackType, E as ErrorBoundaryType } from './components-DzqPLVI1.mjs';
4
- export { f as Await, A as AwaitProps, I as IndexRouteProps, L as LayoutRouteProps, g as MemoryRouter, M as MemoryRouterOpts, b as MemoryRouterProps, h as Navigate, N as NavigateProps, i as Outlet, O as OutletProps, P as PathRouteProps, j as Route, c as RouteProps, k as Router, d as RouterProps, l as RouterProvider, R as RouterProviderProps, m as Routes, e as RoutesProps, W as UNSAFE_WithComponentProps, v as UNSAFE_WithErrorBoundaryProps, t as UNSAFE_WithHydrateFallbackProps, q as UNSAFE_hydrationRouteProperties, s as UNSAFE_mapRouteProperties, w as UNSAFE_withComponentProps, x as UNSAFE_withErrorBoundaryProps, u as UNSAFE_withHydrateFallbackProps, n as createMemoryRouter, o as createRoutesFromChildren, p as createRoutesFromElements, r as renderMatches } from './components-DzqPLVI1.mjs';
1
+ import { R as Router, y as RouteModules, D as DataStrategyFunction, T as To, z as NavigateOptions, B as BlockerFunction, E as Blocker, J as SerializeFrom, a as RelativeRoutingType, c as Location, K as ParamParseKey, O as Path, Q as PathPattern, V as PathMatch, U as UIMatch, W as Navigation, A as Action, h as Params, f as RouteObject, I as InitialEntry, H as HydrationState, b as IndexRouteObject, m as LoaderFunction, i as ActionFunction, M as MetaFunction, l as LinksFunction, N as NonIndexRouteObject, X as AppLoadContext, u as unstable_RouterContextProvider, Y as MiddlewareEnabled, Z as unstable_InitialContext, _ as Equal, e as RouterInit, $ as RouterState, P as PatchRoutesOnNavigationFunction, a0 as DataRouteObject, j as ClientLoaderFunction } from './route-data-CqEmXQub.mjs';
2
+ export { ab as ActionFunctionArgs, C as ClientActionFunction, aH as ClientActionFunctionArgs, aI as ClientLoaderFunctionArgs, aF as DataRouteMatch, ac as DataStrategyFunctionArgs, ad as DataStrategyMatch, ae as DataStrategyResult, ag as ErrorResponse, a5 as Fetcher, ah as FormEncType, ai as FormMethod, aN as Future, a2 as GetScrollPositionFunction, a3 as GetScrollRestorationKeyFunction, aj as HTMLFormMethod, aJ as HeadersArgs, k as HeadersFunction, aM as HtmlLinkDescriptor, av as IDLE_BLOCKER, au as IDLE_FETCHER, at as IDLE_NAVIGATION, L as LazyRouteFunction, o as LinkDescriptor, ak as LoaderFunctionArgs, aK as MetaArgs, q as MetaDescriptor, a6 as NavigationStates, d as Navigator, aL as PageLinkDescriptor, aG as PatchRoutesOnNavigationFunctionArgs, am as PathParam, an as RedirectFunction, aa as RevalidationState, g as RouteMatch, a9 as RouterFetchOptions, a8 as RouterNavigateOptions, a7 as RouterSubscriber, S as ShouldRevalidateFunction, ap as ShouldRevalidateFunctionArgs, a1 as StaticHandler, a4 as StaticHandlerContext, aT as UNSAFE_DataRouterContext, aU as UNSAFE_DataRouterStateContext, af as UNSAFE_DataWithResponseInit, aS as UNSAFE_ErrorResponseImpl, aV as UNSAFE_FetchersContext, aW as UNSAFE_LocationContext, aX as UNSAFE_NavigationContext, aY as UNSAFE_RouteContext, aZ as UNSAFE_ViewTransitionContext, aP as UNSAFE_createBrowserHistory, aR as UNSAFE_createRouter, aQ as UNSAFE_invariant, ar as createPath, aw as data, ax as generatePath, ay as isRouteErrorResponse, az as matchPath, aA as matchRoutes, as as parsePath, aB as redirect, aC as redirectDocument, aD as replace, aE as resolvePath, al as unstable_MiddlewareFunction, ao as unstable_RouterContext, aO as unstable_SerializesTo, aq as unstable_createContext } from './route-data-CqEmXQub.mjs';
3
+ import { a as RouteComponentType, H as HydrateFallbackType, E as ErrorBoundaryType } from './components-CjQijYga.mjs';
4
+ export { f as Await, A as AwaitProps, I as IndexRouteProps, L as LayoutRouteProps, g as MemoryRouter, M as MemoryRouterOpts, b as MemoryRouterProps, h as Navigate, N as NavigateProps, i as Outlet, O as OutletProps, P as PathRouteProps, j as Route, c as RouteProps, k as Router, d as RouterProps, l as RouterProvider, R as RouterProviderProps, m as Routes, e as RoutesProps, W as UNSAFE_WithComponentProps, v as UNSAFE_WithErrorBoundaryProps, t as UNSAFE_WithHydrateFallbackProps, q as UNSAFE_hydrationRouteProperties, s as UNSAFE_mapRouteProperties, w as UNSAFE_withComponentProps, x as UNSAFE_withErrorBoundaryProps, u as UNSAFE_withHydrateFallbackProps, n as createMemoryRouter, o as createRoutesFromChildren, p as createRoutesFromElements, r as renderMatches } from './components-CjQijYga.mjs';
5
5
  import * as React from 'react';
6
6
  import React__default, { ReactElement } from 'react';
7
- import { A as AssetsManifest, E as EntryContext, F as FutureConfig, S as ServerBuild } from './index-react-server-client-CUidsuu_.mjs';
8
- export { l as BrowserRouter, B as BrowserRouterProps, D as DOMRouterOpts, c as FetcherFormProps, h as FetcherSubmitFunction, G as FetcherSubmitOptions, i as FetcherWithComponents, q as Form, d as FormProps, $ as HandleDataRequestFunction, a0 as HandleDocumentRequestFunction, a1 as HandleErrorFunction, m as HashRouter, H as HashRouterProps, a as HistoryRouterProps, n as Link, L as LinkProps, X as Links, W as Meta, p as NavLink, N as NavLinkProps, b as NavLinkRenderProps, P as ParamKeyValuePair, Z as PrefetchPageLinks, Y as Scripts, _ as ScriptsProps, r as ScrollRestoration, e as ScrollRestorationProps, a2 as ServerEntryModule, f as SetURLSearchParams, T as StaticRouter, M as StaticRouterProps, V as StaticRouterProvider, O as StaticRouterProviderProps, g as SubmitFunction, I as SubmitOptions, J as SubmitTarget, a3 as UNSAFE_FrameworkContext, a4 as UNSAFE_createClientRoutes, a5 as UNSAFE_createClientRoutesWithHMRRevalidationOptOut, a6 as UNSAFE_shouldHydrateRouteLoader, a7 as UNSAFE_useScrollRestoration, U as URLSearchParamsInit, j as createBrowserRouter, k as createHashRouter, K as createSearchParams, Q as createStaticHandler, R as createStaticRouter, o as unstable_HistoryRouter, z as unstable_usePrompt, y as useBeforeUnload, w as useFetcher, x as useFetchers, v as useFormAction, u as useLinkClickHandler, s as useSearchParams, t as useSubmit, C as useViewTransitionState } from './index-react-server-client-CUidsuu_.mjs';
7
+ import { A as AssetsManifest, E as EntryContext, F as FutureConfig, S as ServerBuild } from './index-react-server-client-KLg-U4nr.mjs';
8
+ export { l as BrowserRouter, B as BrowserRouterProps, D as DOMRouterOpts, a0 as DiscoverBehavior, c as FetcherFormProps, h as FetcherSubmitFunction, G as FetcherSubmitOptions, i as FetcherWithComponents, q as Form, d as FormProps, a1 as HandleDataRequestFunction, a2 as HandleDocumentRequestFunction, a3 as HandleErrorFunction, m as HashRouter, H as HashRouterProps, a as HistoryRouterProps, n as Link, L as LinkProps, X as Links, W as Meta, p as NavLink, N as NavLinkProps, b as NavLinkRenderProps, P as ParamKeyValuePair, $ as PrefetchBehavior, Z as PrefetchPageLinks, Y as Scripts, _ as ScriptsProps, r as ScrollRestoration, e as ScrollRestorationProps, a4 as ServerEntryModule, f as SetURLSearchParams, T as StaticRouter, M as StaticRouterProps, V as StaticRouterProvider, O as StaticRouterProviderProps, g as SubmitFunction, I as SubmitOptions, J as SubmitTarget, a5 as UNSAFE_FrameworkContext, a6 as UNSAFE_createClientRoutes, a7 as UNSAFE_createClientRoutesWithHMRRevalidationOptOut, a8 as UNSAFE_shouldHydrateRouteLoader, a9 as UNSAFE_useScrollRestoration, U as URLSearchParamsInit, j as createBrowserRouter, k as createHashRouter, K as createSearchParams, Q as createStaticHandler, R as createStaticRouter, o as unstable_HistoryRouter, z as unstable_usePrompt, y as useBeforeUnload, w as useFetcher, x as useFetchers, v as useFormAction, u as useLinkClickHandler, s as useSearchParams, t as useSubmit, C as useViewTransitionState } from './index-react-server-client-KLg-U4nr.mjs';
9
9
  import { ParseOptions, SerializeOptions } from 'cookie';
10
10
  export { ParseOptions as CookieParseOptions, SerializeOptions as CookieSerializeOptions } from 'cookie';
11
11
  import { P as Pages } from './register-DiOIlEq5.mjs';
12
12
  export { a as Register } from './register-DiOIlEq5.mjs';
13
- import { R as RSCPayload, m as matchRSCServerRequest } from './browser-CcxeZJcQ.mjs';
14
- export { D as unstable_DecodeActionFunction, a as unstable_DecodeFormStateFunction, b as unstable_DecodeReplyFunction, L as unstable_LoadServerActionFunction, c as unstable_RSCManifestPayload, d as unstable_RSCMatch, e as unstable_RSCRenderPayload, j as unstable_RSCRouteConfig, i as unstable_RSCRouteConfigEntry, f as unstable_RSCRouteManifest, h as unstable_RSCRouteMatch, g as unstable_getRSCStream } from './browser-CcxeZJcQ.mjs';
13
+ import { R as RSCPayload, m as matchRSCServerRequest } from './browser-7LYX59NK.mjs';
14
+ export { D as unstable_DecodeActionFunction, a as unstable_DecodeFormStateFunction, b as unstable_DecodeReplyFunction, L as unstable_LoadServerActionFunction, c as unstable_RSCManifestPayload, d as unstable_RSCMatch, e as unstable_RSCRenderPayload, j as unstable_RSCRouteConfig, i as unstable_RSCRouteConfigEntry, f as unstable_RSCRouteManifest, h as unstable_RSCRouteMatch, g as unstable_getRSCStream } from './browser-7LYX59NK.mjs';
15
15
  import 'node:async_hooks';
16
16
 
17
17
  declare const SingleFetchRedirectSymbol: unique symbol;
@@ -31,369 +31,795 @@ declare enum ServerMode {
31
31
  }
32
32
 
33
33
  /**
34
- Resolves a URL against the current location.
35
-
36
- ```tsx
37
- import { useHref } from "react-router"
38
-
39
- function SomeComponent() {
40
- let href = useHref("some/where");
41
- // "/resolved/some/where"
42
- }
43
- ```
44
-
45
- @category Hooks
34
+ * Resolves a URL against the current {@link Location}.
35
+ *
36
+ * @example
37
+ * import { useHref } from "react-router";
38
+ *
39
+ * function SomeComponent() {
40
+ * let href = useHref("some/where");
41
+ * // "/resolved/some/where"
42
+ * }
43
+ *
44
+ * @public
45
+ * @category Hooks
46
+ * @param to The path to resolve
47
+ * @param options Options
48
+ * @param options.relative Defaults to `"route"` so routing is relative to the
49
+ * route tree.
50
+ * Set to `"path"` to make relative routing operate against path segments.
51
+ * @returns The resolved href string
46
52
  */
47
53
  declare function useHref(to: To, { relative }?: {
48
54
  relative?: RelativeRoutingType;
49
55
  }): string;
50
56
  /**
51
- * Returns true if this component is a descendant of a Router, useful to ensure
52
- * a component is used within a Router.
57
+ * Returns `true` if this component is a descendant of a {@link Router}, useful
58
+ * to ensure a component is used within a {@link Router}.
53
59
  *
60
+ * @public
54
61
  * @category Hooks
62
+ * @mode framework
63
+ * @mode data
64
+ * @returns Whether the component is within a {@link Router} context
55
65
  */
56
66
  declare function useInRouterContext(): boolean;
57
67
  /**
58
- Returns the current {@link Location}. This can be useful if you'd like to perform some side effect whenever it changes.
59
-
60
- ```tsx
61
- import * as React from 'react'
62
- import { useLocation } from 'react-router'
63
-
64
- function SomeComponent() {
65
- let location = useLocation()
66
-
67
- React.useEffect(() => {
68
- // Google Analytics
69
- ga('send', 'pageview')
70
- }, [location]);
71
-
72
- return (
73
- // ...
74
- );
75
- }
76
- ```
77
-
78
- @category Hooks
68
+ * Returns the current {@link Location}. This can be useful if you'd like to
69
+ * perform some side effect whenever it changes.
70
+ *
71
+ * @example
72
+ * import * as React from 'react'
73
+ * import { useLocation } from 'react-router'
74
+ *
75
+ * function SomeComponent() {
76
+ * let location = useLocation()
77
+ *
78
+ * React.useEffect(() => {
79
+ * // Google Analytics
80
+ * ga('send', 'pageview')
81
+ * }, [location]);
82
+ *
83
+ * return (
84
+ * // ...
85
+ * );
86
+ * }
87
+ *
88
+ * @public
89
+ * @category Hooks
90
+ * @returns The current {@link Location} object
79
91
  */
80
92
  declare function useLocation(): Location;
81
93
  /**
82
- * Returns the current navigation action which describes how the router came to
83
- * the current location, either by a pop, push, or replace on the history stack.
94
+ * Returns the current {@link Navigation} action which describes how the router
95
+ * came to the current {@link Location}, either by a pop, push, or replace on
96
+ * the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) stack.
84
97
  *
98
+ * @public
85
99
  * @category Hooks
100
+ * @returns The current {@link NavigationType} type (`"PUSH"`, `"REPLACE"`, or `"POP"`)
86
101
  */
87
102
  declare function useNavigationType(): Action;
88
103
  /**
89
- * Returns a PathMatch object if the given pattern matches the current URL.
104
+ * Returns a {@link PathMatch} object if the given pattern matches the current URL.
90
105
  * This is useful for components that need to know "active" state, e.g.
91
- * `<NavLink>`.
106
+ * {@link NavLink | `<NavLink>`}.
92
107
  *
108
+ * @public
93
109
  * @category Hooks
110
+ * @param pattern The pattern to match against the current {@link Location}
111
+ * @returns The path match object if the pattern matches, `null` otherwise
94
112
  */
95
113
  declare function useMatch<ParamKey extends ParamParseKey<Path>, Path extends string>(pattern: PathPattern<Path> | Path): PathMatch<ParamKey> | null;
96
114
  /**
97
- * The interface for the navigate() function returned from useNavigate().
115
+ * The interface for the `navigate` function returned from {@link useNavigate}.
98
116
  */
99
117
  interface NavigateFunction {
100
118
  (to: To, options?: NavigateOptions): void | Promise<void>;
101
119
  (delta: number): void | Promise<void>;
102
120
  }
103
121
  /**
104
- Returns a function that lets you navigate programmatically in the browser in response to user interactions or effects.
105
-
106
- ```tsx
107
- import { useNavigate } from "react-router";
108
-
109
- function SomeComponent() {
110
- let navigate = useNavigate();
111
- return (
112
- <button
113
- onClick={() => {
114
- navigate(-1);
115
- }}
116
- />
117
- );
118
- }
119
- ```
120
-
121
- It's often better to use {@link redirect} in {@link ActionFunction | actions} and {@link LoaderFunction | loaders} than this hook.
122
-
123
- @category Hooks
122
+ * Returns a function that lets you navigate programmatically in the browser in
123
+ * response to user interactions or effects.
124
+ *
125
+ * It's often better to use {@link redirect} in [`action`](../../start/framework/route-module#action)/[`loader`](../../start/framework/route-module#loader)
126
+ * functions than this hook.
127
+ *
128
+ * The returned function signature is `navigate(to, options?)`/`navigate(delta)` where:
129
+ *
130
+ * * `to` can be a string path, a {@link To} object, or a number (delta)
131
+ * * `options` contains options for modifying the navigation
132
+ * * `flushSync`: Wrap the DOM updates in [`ReactDom.flushSync`](https://react.dev/reference/react-dom/flushSync)
133
+ * * `preventScrollReset`: Do not scroll back to the top of the page after navigation
134
+ * * `relative`: `"route"` or `"path"` to control relative routing logic
135
+ * * `replace`: Replace the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) stack
136
+ * * `state`: Optional [`history.state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state) to include with the new {@link Location}
137
+ * * `viewTransition`: Enable [`document.startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) for this navigation
138
+ *
139
+ * @example
140
+ * import { useNavigate } from "react-router";
141
+ *
142
+ * function SomeComponent() {
143
+ * let navigate = useNavigate();
144
+ * return (
145
+ * <button onClick={() => navigate(-1)}>
146
+ * Go Back
147
+ * </button>
148
+ * );
149
+ * }
150
+ *
151
+ * @additionalExamples
152
+ * ### Navigate to another path
153
+ *
154
+ * ```tsx
155
+ * navigate("/some/route");
156
+ * navigate("/some/route?search=param");
157
+ * ```
158
+ *
159
+ * ### Navigate with a {@link To} object
160
+ *
161
+ * All properties are optional.
162
+ *
163
+ * ```tsx
164
+ * navigate({
165
+ * pathname: "/some/route",
166
+ * search: "?search=param",
167
+ * hash: "#hash",
168
+ * state: { some: "state" },
169
+ * });
170
+ * ```
171
+ *
172
+ * If you use `state`, that will be available on the {@link Location} object on
173
+ * the next page. Access it with `useLocation().state` (see {@link useLocation}).
174
+ *
175
+ * ### Navigate back or forward in the history stack
176
+ *
177
+ * ```tsx
178
+ * // back
179
+ * // often used to close modals
180
+ * navigate(-1);
181
+ *
182
+ * // forward
183
+ * // often used in a multistep wizard workflows
184
+ * navigate(1);
185
+ * ```
186
+ *
187
+ * Be cautious with `navigate(number)`. If your application can load up to a
188
+ * route that has a button that tries to navigate forward/back, there may not be
189
+ * a `[`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
190
+ * entry to go back or forward to, or it can go somewhere you don't expect
191
+ * (like a different domain).
192
+ *
193
+ * Only use this if you're sure they will have an entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
194
+ * stack to navigate to.
195
+ *
196
+ * ### Replace the current entry in the history stack
197
+ *
198
+ * This will remove the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
199
+ * stack, replacing it with a new one, similar to a server side redirect.
200
+ *
201
+ * ```tsx
202
+ * navigate("/some/route", { replace: true });
203
+ * ```
204
+ *
205
+ * ### Prevent Scroll Reset
206
+ *
207
+ * [MODES: framework, data]
208
+ *
209
+ * <br/>
210
+ * <br/>
211
+ *
212
+ * To prevent {@link ScrollRestoration | `<ScrollRestoration>`} from resetting
213
+ * the scroll position, use the `preventScrollReset` option.
214
+ *
215
+ * ```tsx
216
+ * navigate("?some-tab=1", { preventScrollReset: true });
217
+ * ```
218
+ *
219
+ * For example, if you have a tab interface connected to search params in the
220
+ * middle of a page, and you don't want it to scroll to the top when a tab is
221
+ * clicked.
222
+ *
223
+ * @public
224
+ * @category Hooks
225
+ * @returns A navigate function for programmatic navigation
124
226
  */
125
227
  declare function useNavigate(): NavigateFunction;
126
228
  /**
127
- * Returns the parent route {@link OutletProps.context | `<Outlet context>`}.
229
+ * Returns the parent route {@link Outlet | `<Outlet context>`}.
230
+ *
231
+ * Often parent routes manage state or other values you want shared with child
232
+ * routes. You can create your own [context provider](https://react.dev/learn/passing-data-deeply-with-context)
233
+ * if you like, but this is such a common situation that it's built-into
234
+ * `<Outlet />`.
235
+ *
236
+ * ```tsx
237
+ * // Parent route
238
+ * function Parent() {
239
+ * const [count, setCount] = React.useState(0);
240
+ * return <Outlet context={[count, setCount]} />;
241
+ * }
242
+ * ```
243
+ *
244
+ * ```tsx
245
+ * // Child route
246
+ * import { useOutletContext } from "react-router-dom";
247
+ *
248
+ * function Child() {
249
+ * const [count, setCount] = useOutletContext();
250
+ * const increment = () => setCount((c) => c + 1);
251
+ * return <button onClick={increment}>{count}</button>;
252
+ * }
253
+ * ```
254
+ *
255
+ * If you're using TypeScript, we recommend the parent component provide a custom
256
+ * hook for accessing the context value. This makes it easier for consumers to
257
+ * get nice typings, control consumers, and know who's consuming the context value.
258
+ *
259
+ * Here's a more realistic example:
260
+ *
261
+ * ```tsx filename=src/routes/dashboard.tsx lines=[13,19]
262
+ * import * as React from "react";
263
+ * import type { User } from "./types";
264
+ * import { Outlet, useOutletContext } from "react-router-dom";
265
+ *
266
+ * type ContextType = { user: User | null };
267
+ *
268
+ * export default function Dashboard() {
269
+ * const [user, setUser] = React.useState<User | null>(null);
270
+ *
271
+ * return (
272
+ * <div>
273
+ * <h1>Dashboard</h1>
274
+ * <Outlet context={{ user } satisfies ContextType} />
275
+ * </div>
276
+ * );
277
+ * }
278
+ *
279
+ * export function useUser() {
280
+ * return useOutletContext<ContextType>();
281
+ * }
282
+ * ```
128
283
  *
284
+ * ```tsx filename=src/routes/dashboard/messages.tsx lines=[1,4]
285
+ * import { useUser } from "../dashboard";
286
+ *
287
+ * export default function DashboardMessages() {
288
+ * const { user } = useUser();
289
+ * return (
290
+ * <div>
291
+ * <h2>Messages</h2>
292
+ * <p>Hello, {user.name}!</p>
293
+ * </div>
294
+ * );
295
+ * }
296
+ * ```
297
+ *
298
+ * @public
129
299
  * @category Hooks
300
+ * @returns The context value passed to the parent {@link Outlet} component
130
301
  */
131
302
  declare function useOutletContext<Context = unknown>(): Context;
132
303
  /**
133
304
  * Returns the element for the child route at this level of the route
134
- * hierarchy. Used internally by `<Outlet>` to render child routes.
305
+ * hierarchy. Used internally by {@link Outlet | `<Outlet>`} to render child
306
+ * routes.
135
307
  *
308
+ * @public
136
309
  * @category Hooks
310
+ * @param context The context to pass to the outlet
311
+ * @returns The child route element or `null` if no child routes match
137
312
  */
138
313
  declare function useOutlet(context?: unknown): React.ReactElement | null;
139
314
  /**
140
- Returns an object of key/value pairs of the dynamic params from the current URL that were matched by the routes. Child routes inherit all params from their parent routes.
141
-
142
- ```tsx
143
- import { useParams } from "react-router"
144
-
145
- function SomeComponent() {
146
- let params = useParams()
147
- params.postId
148
- }
149
- ```
150
-
151
- Assuming a route pattern like `/posts/:postId` is matched by `/posts/123` then `params.postId` will be `"123"`.
152
-
153
- @category Hooks
315
+ * Returns an object of key/value-pairs of the dynamic params from the current
316
+ * URL that were matched by the routes. Child routes inherit all params from
317
+ * their parent routes.
318
+ *
319
+ * Assuming a route pattern like `/posts/:postId` is matched by `/posts/123`
320
+ * then `params.postId` will be `"123"`.
321
+ *
322
+ * @example
323
+ * import { useParams } from "react-router";
324
+ *
325
+ * function SomeComponent() {
326
+ * let params = useParams();
327
+ * params.postId;
328
+ * }
329
+ *
330
+ * @additionalExamples
331
+ * ### Basic Usage
332
+ *
333
+ * ```tsx
334
+ * import { useParams } from "react-router";
335
+ *
336
+ * // given a route like:
337
+ * <Route path="/posts/:postId" element={<Post />} />;
338
+ *
339
+ * // or a data route like:
340
+ * createBrowserRouter([
341
+ * {
342
+ * path: "/posts/:postId",
343
+ * component: Post,
344
+ * },
345
+ * ]);
346
+ *
347
+ * // or in routes.ts
348
+ * route("/posts/:postId", "routes/post.tsx");
349
+ * ```
350
+ *
351
+ * Access the params in a component:
352
+ *
353
+ * ```tsx
354
+ * import { useParams } from "react-router";
355
+ *
356
+ * export default function Post() {
357
+ * let params = useParams();
358
+ * return <h1>Post: {params.postId}</h1>;
359
+ * }
360
+ * ```
361
+ *
362
+ * ### Multiple Params
363
+ *
364
+ * Patterns can have multiple params:
365
+ *
366
+ * ```tsx
367
+ * "/posts/:postId/comments/:commentId";
368
+ * ```
369
+ *
370
+ * All will be available in the params object:
371
+ *
372
+ * ```tsx
373
+ * import { useParams } from "react-router";
374
+ *
375
+ * export default function Post() {
376
+ * let params = useParams();
377
+ * return (
378
+ * <h1>
379
+ * Post: {params.postId}, Comment: {params.commentId}
380
+ * </h1>
381
+ * );
382
+ * }
383
+ * ```
384
+ *
385
+ * ### Catchall Params
386
+ *
387
+ * Catchall params are defined with `*`:
388
+ *
389
+ * ```tsx
390
+ * "/files/*";
391
+ * ```
392
+ *
393
+ * The matched value will be available in the params object as follows:
394
+ *
395
+ * ```tsx
396
+ * import { useParams } from "react-router";
397
+ *
398
+ * export default function File() {
399
+ * let params = useParams();
400
+ * let catchall = params["*"];
401
+ * // ...
402
+ * }
403
+ * ```
404
+ *
405
+ * You can destructure the catchall param:
406
+ *
407
+ * ```tsx
408
+ * export default function File() {
409
+ * let { "*": catchall } = useParams();
410
+ * console.log(catchall);
411
+ * }
412
+ * ```
413
+ *
414
+ * @public
415
+ * @category Hooks
416
+ * @returns An object containing the dynamic route parameters
154
417
  */
155
418
  declare function useParams<ParamsOrKey extends string | Record<string, string | undefined> = string>(): Readonly<[
156
419
  ParamsOrKey
157
420
  ] extends [string] ? Params<ParamsOrKey> : Partial<ParamsOrKey>>;
158
421
  /**
159
- Resolves the pathname of the given `to` value against the current location. Similar to {@link useHref}, but returns a {@link Path} instead of a string.
160
-
161
- ```tsx
162
- import { useResolvedPath } from "react-router"
163
-
164
- function SomeComponent() {
165
- // if the user is at /dashboard/profile
166
- let path = useResolvedPath("../accounts")
167
- path.pathname // "/dashboard/accounts"
168
- path.search // ""
169
- path.hash // ""
170
- }
171
- ```
172
-
173
- @category Hooks
422
+ * Resolves the pathname of the given `to` value against the current
423
+ * {@link Location}. Similar to {@link useHref}, but returns a
424
+ * {@link Path} instead of a string.
425
+ *
426
+ * @example
427
+ * import { useResolvedPath } from "react-router";
428
+ *
429
+ * function SomeComponent() {
430
+ * // if the user is at /dashboard/profile
431
+ * let path = useResolvedPath("../accounts");
432
+ * path.pathname; // "/dashboard/accounts"
433
+ * path.search; // ""
434
+ * path.hash; // ""
435
+ * }
436
+ *
437
+ * @public
438
+ * @category Hooks
439
+ * @param to The path to resolve
440
+ * @param options Options
441
+ * @param options.relative Defaults to `"route"` so routing is relative to the route tree.
442
+ * Set to `"path"` to make relative routing operate against path segments.
443
+ * @returns The resolved {@link Path} object with `pathname`, `search`, and `hash`
174
444
  */
175
445
  declare function useResolvedPath(to: To, { relative }?: {
176
446
  relative?: RelativeRoutingType;
177
447
  }): Path;
178
448
  /**
179
- Hook version of {@link Routes | `<Routes>`} that uses objects instead of components. These objects have the same properties as the component props.
180
-
181
- The return value of `useRoutes` is either a valid React element you can use to render the route tree, or `null` if nothing matched.
182
-
183
- ```tsx
184
- import * as React from "react";
185
- import { useRoutes } from "react-router";
186
-
187
- function App() {
188
- let element = useRoutes([
189
- {
190
- path: "/",
191
- element: <Dashboard />,
192
- children: [
193
- {
194
- path: "messages",
195
- element: <DashboardMessages />,
196
- },
197
- { path: "tasks", element: <DashboardTasks /> },
198
- ],
199
- },
200
- { path: "team", element: <AboutPage /> },
201
- ]);
202
-
203
- return element;
204
- }
205
- ```
206
-
207
- @category Hooks
449
+ * Hook version of {@link Routes | `<Routes>`} that uses objects instead of
450
+ * components. These objects have the same properties as the component props.
451
+ * The return value of `useRoutes` is either a valid React element you can use
452
+ * to render the route tree, or `null` if nothing matched.
453
+ *
454
+ * @example
455
+ * import { useRoutes } from "react-router";
456
+ *
457
+ * function App() {
458
+ * let element = useRoutes([
459
+ * {
460
+ * path: "/",
461
+ * element: <Dashboard />,
462
+ * children: [
463
+ * {
464
+ * path: "messages",
465
+ * element: <DashboardMessages />,
466
+ * },
467
+ * { path: "tasks", element: <DashboardTasks /> },
468
+ * ],
469
+ * },
470
+ * { path: "team", element: <AboutPage /> },
471
+ * ]);
472
+ *
473
+ * return element;
474
+ * }
475
+ *
476
+ * @public
477
+ * @category Hooks
478
+ * @param routes An array of {@link RouteObject}s that define the route hierarchy
479
+ * @param locationArg An optional {@link Location} object or pathname string to
480
+ * use instead of the current {@link Location}
481
+ * @returns A React element to render the matched route, or `null` if no routes matched
208
482
  */
209
483
  declare function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;
210
484
  /**
211
- Returns the current navigation, defaulting to an "idle" navigation when no navigation is in progress. You can use this to render pending UI (like a global spinner) or read FormData from a form navigation.
212
-
213
- ```tsx
214
- import { useNavigation } from "react-router"
215
-
216
- function SomeComponent() {
217
- let navigation = useNavigation();
218
- navigation.state
219
- navigation.formData
220
- // etc.
221
- }
222
- ```
223
-
224
- @category Hooks
485
+ * Returns the current {@link Navigation}, defaulting to an "idle" navigation
486
+ * when no navigation is in progress. You can use this to render pending UI
487
+ * (like a global spinner) or read [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)
488
+ * from a form navigation.
489
+ *
490
+ * @example
491
+ * import { useNavigation } from "react-router";
492
+ *
493
+ * function SomeComponent() {
494
+ * let navigation = useNavigation();
495
+ * navigation.state;
496
+ * navigation.formData;
497
+ * // etc.
498
+ * }
499
+ *
500
+ * @public
501
+ * @category Hooks
502
+ * @mode framework
503
+ * @mode data
504
+ * @returns The current {@link Navigation} object
225
505
  */
226
506
  declare function useNavigation(): Navigation;
227
507
  /**
228
- Revalidate the data on the page for reasons outside of normal data mutations like window focus or polling on an interval.
229
-
230
- ```tsx
231
- import { useRevalidator } from "react-router";
232
-
233
- function WindowFocusRevalidator() {
234
- const revalidator = useRevalidator();
235
-
236
- useFakeWindowFocus(() => {
237
- revalidator.revalidate();
238
- });
239
-
240
- return (
241
- <div hidden={revalidator.state === "idle"}>
242
- Revalidating...
243
- </div>
244
- );
245
- }
246
- ```
247
-
248
- Note that page data is already revalidated automatically after actions. If you find yourself using this for normal CRUD operations on your data in response to user interactions, you're probably not taking advantage of the other APIs like {@link useFetcher}, {@link Form}, {@link useSubmit} that do this automatically.
249
-
250
- @category Hooks
508
+ * Revalidate the data on the page for reasons outside of normal data mutations
509
+ * like [`Window` focus](https://developer.mozilla.org/en-US/docs/Web/API/Window/focus_event)
510
+ * or polling on an interval.
511
+ *
512
+ * Note that page data is already revalidated automatically after actions.
513
+ * If you find yourself using this for normal CRUD operations on your data in
514
+ * response to user interactions, you're probably not taking advantage of the
515
+ * other APIs like {@link useFetcher}, {@link Form}, {@link useSubmit} that do
516
+ * this automatically.
517
+ *
518
+ * @example
519
+ * import { useRevalidator } from "react-router";
520
+ *
521
+ * function WindowFocusRevalidator() {
522
+ * const revalidator = useRevalidator();
523
+ *
524
+ * useFakeWindowFocus(() => {
525
+ * revalidator.revalidate();
526
+ * });
527
+ *
528
+ * return (
529
+ * <div hidden={revalidator.state === "idle"}>
530
+ * Revalidating...
531
+ * </div>
532
+ * );
533
+ * }
534
+ *
535
+ * @public
536
+ * @category Hooks
537
+ * @mode framework
538
+ * @mode data
539
+ * @returns An object with a `revalidate` function and the current revalidation
540
+ * `state`
251
541
  */
252
542
  declare function useRevalidator(): {
253
543
  revalidate: () => Promise<void>;
254
544
  state: Router["state"]["revalidation"];
255
545
  };
256
546
  /**
257
- * Returns the active route matches, useful for accessing loaderData for
258
- * parent/child routes or the route "handle" property
547
+ * Returns the active route matches, useful for accessing `loaderData` for
548
+ * parent/child routes or the route [`handle`](../../start/framework/route-module#handle)
549
+ * property
259
550
  *
551
+ * @public
260
552
  * @category Hooks
553
+ * @mode framework
554
+ * @mode data
555
+ * @returns An array of {@link UIMatch | UI matches} for the current route hierarchy
261
556
  */
262
557
  declare function useMatches(): UIMatch[];
263
558
  /**
264
- Returns the data from the closest route {@link LoaderFunction | loader} or {@link ClientLoaderFunction | client loader}.
265
-
266
- ```tsx
267
- import { useLoaderData } from "react-router"
268
-
269
- export async function loader() {
270
- return await fakeDb.invoices.findAll();
271
- }
272
-
273
- export default function Invoices() {
274
- let invoices = useLoaderData<typeof loader>();
275
- // ...
276
- }
277
- ```
278
-
279
- @category Hooks
559
+ * Returns the data from the closest route
560
+ * [`loader`](../../start/framework/route-module#loader) or
561
+ * [`clientLoader`](../../start/framework/route-module#clientloader).
562
+ *
563
+ * @example
564
+ * import { useLoaderData } from "react-router";
565
+ *
566
+ * export async function loader() {
567
+ * return await fakeDb.invoices.findAll();
568
+ * }
569
+ *
570
+ * export default function Invoices() {
571
+ * let invoices = useLoaderData<typeof loader>();
572
+ * // ...
573
+ * }
574
+ *
575
+ * @public
576
+ * @category Hooks
577
+ * @mode framework
578
+ * @mode data
579
+ * @returns The data returned from the route's [`loader`](../../start/framework/route-module#loader) or [`clientLoader`](../../start/framework/route-module#clientloader) function
280
580
  */
281
581
  declare function useLoaderData<T = any>(): SerializeFrom<T>;
282
582
  /**
283
- Returns the loader data for a given route by route ID.
284
-
285
- ```tsx
286
- import { useRouteLoaderData } from "react-router";
287
-
288
- function SomeComponent() {
289
- const { user } = useRouteLoaderData("root");
290
- }
291
- ```
292
-
293
- Route IDs are created automatically. They are simply the path of the route file relative to the app folder without the extension.
294
-
295
- | Route Filename | Route ID |
296
- | -------------------------- | -------------------- |
297
- | `app/root.tsx` | `"root"` |
298
- | `app/routes/teams.tsx` | `"routes/teams"` |
299
- | `app/whatever/teams.$id.tsx` | `"whatever/teams.$id"` |
300
-
301
- If you created an ID manually, you can use that instead:
302
-
303
- ```tsx
304
- route("/", "containers/app.tsx", { id: "app" }})
305
- ```
306
-
307
- @category Hooks
583
+ * Returns the [`loader`](../../start/framework/route-module#loader) data for a
584
+ * given route by route ID.
585
+ *
586
+ * Route IDs are created automatically. They are simply the path of the route file
587
+ * relative to the app folder without the extension.
588
+ *
589
+ * | Route Filename | Route ID |
590
+ * | ---------------------------- | ---------------------- |
591
+ * | `app/root.tsx` | `"root"` |
592
+ * | `app/routes/teams.tsx` | `"routes/teams"` |
593
+ * | `app/whatever/teams.$id.tsx` | `"whatever/teams.$id"` |
594
+ *
595
+ * @example
596
+ * import { useRouteLoaderData } from "react-router";
597
+ *
598
+ * function SomeComponent() {
599
+ * const { user } = useRouteLoaderData("root");
600
+ * }
601
+ *
602
+ * // You can also specify your own route ID's manually in your routes.ts file:
603
+ * route("/", "containers/app.tsx", { id: "app" })
604
+ * useRouteLoaderData("app");
605
+ *
606
+ * @public
607
+ * @category Hooks
608
+ * @mode framework
609
+ * @mode data
610
+ * @param routeId The ID of the route to return loader data from
611
+ * @returns The data returned from the specified route's [`loader`](../../start/framework/route-module#loader)
612
+ * function, or `undefined` if not found
308
613
  */
309
614
  declare function useRouteLoaderData<T = any>(routeId: string): SerializeFrom<T> | undefined;
310
615
  /**
311
- Returns the action data from the most recent POST navigation form submission or `undefined` if there hasn't been one.
312
-
313
- ```tsx
314
- import { Form, useActionData } from "react-router"
315
-
316
- export async function action({ request }) {
317
- const body = await request.formData()
318
- const name = body.get("visitorsName")
319
- return { message: `Hello, ${name}` }
320
- }
321
-
322
- export default function Invoices() {
323
- const data = useActionData()
324
- return (
325
- <Form method="post">
326
- <input type="text" name="visitorsName" />
327
- {data ? data.message : "Waiting..."}
328
- </Form>
329
- )
330
- }
331
- ```
332
-
333
- @category Hooks
616
+ * Returns the [`action`](../../start/framework/route-module#action) data from
617
+ * the most recent `POST` navigation form submission or `undefined` if there
618
+ * hasn't been one.
619
+ *
620
+ * @example
621
+ * import { Form, useActionData } from "react-router";
622
+ *
623
+ * export async function action({ request }) {
624
+ * const body = await request.formData();
625
+ * const name = body.get("visitorsName");
626
+ * return { message: `Hello, ${name}` };
627
+ * }
628
+ *
629
+ * export default function Invoices() {
630
+ * const data = useActionData();
631
+ * return (
632
+ * <Form method="post">
633
+ * <input type="text" name="visitorsName" />
634
+ * {data ? data.message : "Waiting..."}
635
+ * </Form>
636
+ * );
637
+ * }
638
+ *
639
+ * @public
640
+ * @category Hooks
641
+ * @mode framework
642
+ * @mode data
643
+ * @returns The data returned from the route's [`action`](../../start/framework/route-module#action)
644
+ * function, or `undefined` if no [`action`](../../start/framework/route-module#action)
645
+ * has been called
334
646
  */
335
647
  declare function useActionData<T = any>(): SerializeFrom<T> | undefined;
336
648
  /**
337
- Accesses the error thrown during an {@link ActionFunction | action}, {@link LoaderFunction | loader}, or component render to be used in a route module Error Boundary.
338
-
339
- ```tsx
340
- export function ErrorBoundary() {
341
- const error = useRouteError();
342
- return <div>{error.message}</div>;
343
- }
344
- ```
345
-
346
- @category Hooks
649
+ * Accesses the error thrown during an
650
+ * [`action`](../../start/framework/route-module#action),
651
+ * [`loader`](../../start/framework/route-module#loader),
652
+ * or component render to be used in a route module
653
+ * [`ErrorBoundary`](../../start/framework/route-module#errorboundary).
654
+ *
655
+ * @example
656
+ * export function ErrorBoundary() {
657
+ * const error = useRouteError();
658
+ * return <div>{error.message}</div>;
659
+ * }
660
+ *
661
+ * @public
662
+ * @category Hooks
663
+ * @mode framework
664
+ * @mode data
665
+ * @returns The error that was thrown during route [loading](../../start/framework/route-module#loader),
666
+ * [`action`](../../start/framework/route-module#action) execution, or rendering
347
667
  */
348
668
  declare function useRouteError(): unknown;
349
669
  /**
350
- Returns the resolved promise value from the closest {@link Await | `<Await>`}.
351
-
352
- ```tsx
353
- function SomeDescendant() {
354
- const value = useAsyncValue();
355
- // ...
356
- }
357
-
358
- // somewhere in your app
359
- <Await resolve={somePromise}>
360
- <SomeDescendant />
361
- </Await>
362
- ```
363
-
364
- @category Hooks
670
+ * Returns the resolved promise value from the closest {@link Await | `<Await>`}.
671
+ *
672
+ * @example
673
+ * function SomeDescendant() {
674
+ * const value = useAsyncValue();
675
+ * // ...
676
+ * }
677
+ *
678
+ * // somewhere in your app
679
+ * <Await resolve={somePromise}>
680
+ * <SomeDescendant />
681
+ * </Await>;
682
+ *
683
+ * @public
684
+ * @category Hooks
685
+ * @mode framework
686
+ * @mode data
687
+ * @returns The resolved value from the nearest {@link Await} component
365
688
  */
366
689
  declare function useAsyncValue(): unknown;
367
690
  /**
368
- Returns the rejection value from the closest {@link Await | `<Await>`}.
369
-
370
- ```tsx
371
- import { Await, useAsyncError } from "react-router"
372
-
373
- function ErrorElement() {
374
- const error = useAsyncError();
375
- return (
376
- <p>Uh Oh, something went wrong! {error.message}</p>
377
- );
378
- }
379
-
380
- // somewhere in your app
381
- <Await
382
- resolve={promiseThatRejects}
383
- errorElement={<ErrorElement />}
384
- />
385
- ```
386
-
387
- @category Hooks
691
+ * Returns the rejection value from the closest {@link Await | `<Await>`}.
692
+ *
693
+ * @example
694
+ * import { Await, useAsyncError } from "react-router";
695
+ *
696
+ * function ErrorElement() {
697
+ * const error = useAsyncError();
698
+ * return (
699
+ * <p>Uh Oh, something went wrong! {error.message}</p>
700
+ * );
701
+ * }
702
+ *
703
+ * // somewhere in your app
704
+ * <Await
705
+ * resolve={promiseThatRejects}
706
+ * errorElement={<ErrorElement />}
707
+ * />;
708
+ *
709
+ * @public
710
+ * @category Hooks
711
+ * @mode framework
712
+ * @mode data
713
+ * @returns The error that was thrown in the nearest {@link Await} component
388
714
  */
389
715
  declare function useAsyncError(): unknown;
390
716
  /**
391
717
  * Allow the application to block navigations within the SPA and present the
392
- * user a confirmation dialog to confirm the navigation. Mostly used to avoid
393
- * using half-filled form data. This does not handle hard-reloads or
718
+ * user a confirmation dialog to confirm the navigation. Mostly used to avoid
719
+ * using half-filled form data. This does not handle hard-reloads or
394
720
  * cross-origin navigations.
395
721
  *
722
+ * The {@link Blocker} object returned by the hook has the following properties:
723
+ *
724
+ * - **`state`**
725
+ * - `unblocked` - the blocker is idle and has not prevented any navigation
726
+ * - `blocked` - the blocker has prevented a navigation
727
+ * - `proceeding` - the blocker is proceeding through from a blocked navigation
728
+ * - **`location`**
729
+ * - When in a `blocked` state, this represents the {@link Location} to which we
730
+ * blocked a navigation. When in a `proceeding` state, this is the location
731
+ * being navigated to after a `blocker.proceed()` call.
732
+ * - **`proceed()`**
733
+ * - When in a `blocked` state, you may call `blocker.proceed()` to proceed to the
734
+ * blocked location.
735
+ * - **`reset()`**
736
+ * - When in a `blocked` state, you may call `blocker.reset()` to return the blocker
737
+ * back to an `unblocked` state and leave the user at the current location.
738
+ *
739
+ * @example
740
+ * // Boolean version
741
+ * const blocker = useBlocker(value !== "");
742
+ *
743
+ * // Function version
744
+ * const blocker = useBlocker(
745
+ * ({ currentLocation, nextLocation, historyAction }) =>
746
+ * value !== "" &&
747
+ * currentLocation.pathname !== nextLocation.pathname
748
+ * );
749
+ *
750
+ * @additionalExamples
751
+ * ```tsx
752
+ * import { useCallback, useState } from "react";
753
+ * import { BlockerFunction, useBlocker } from "react-router";
754
+ *
755
+ * export function ImportantForm() {
756
+ * const [value, setValue] = useState("");
757
+ *
758
+ * const shouldBlock = useCallback<BlockerFunction>(
759
+ * () => value !== "",
760
+ * [value]
761
+ * );
762
+ * const blocker = useBlocker(shouldBlock);
763
+ *
764
+ * return (
765
+ * <form
766
+ * onSubmit={(e) => {
767
+ * e.preventDefault();
768
+ * setValue("");
769
+ * if (blocker.state === "blocked") {
770
+ * blocker.proceed();
771
+ * }
772
+ * }}
773
+ * >
774
+ * <input
775
+ * name="data"
776
+ * value={value}
777
+ * onChange={(e) => setValue(e.target.value)}
778
+ * />
779
+ *
780
+ * <button type="submit">Save</button>
781
+ *
782
+ * {blocker.state === "blocked" ? (
783
+ * <>
784
+ * <p style={{ color: "red" }}>
785
+ * Blocked the last navigation to
786
+ * </p>
787
+ * <button
788
+ * type="button"
789
+ * onClick={() => blocker.proceed()}
790
+ * >
791
+ * Let me through
792
+ * </button>
793
+ * <button
794
+ * type="button"
795
+ * onClick={() => blocker.reset()}
796
+ * >
797
+ * Keep me here
798
+ * </button>
799
+ * </>
800
+ * ) : blocker.state === "proceeding" ? (
801
+ * <p style={{ color: "orange" }}>
802
+ * Proceeding through blocked navigation
803
+ * </p>
804
+ * ) : (
805
+ * <p style={{ color: "green" }}>
806
+ * Blocker is currently unblocked
807
+ * </p>
808
+ * )}
809
+ * </form>
810
+ * );
811
+ * }
812
+ * ```
813
+ *
814
+ * @public
396
815
  * @category Hooks
816
+ * @mode framework
817
+ * @mode data
818
+ * @param shouldBlock Either a boolean or a function returning a boolean which
819
+ * indicates whether the navigation should be blocked. The function format
820
+ * receives a single object parameter containing the `currentLocation`,
821
+ * `nextLocation`, and `historyAction` of the potential navigation.
822
+ * @returns A {@link Blocker} object with state and reset functionality
397
823
  */
398
824
  declare function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker;
399
825
 
@@ -403,11 +829,20 @@ interface ServerRouterProps {
403
829
  nonce?: string;
404
830
  }
405
831
  /**
406
- * The entry point for a Remix app when it is rendered on the server (in
407
- * `app/entry.server.js`). This component is used to generate the HTML in the
408
- * response from the server.
832
+ * The server entry point for a React Router app in Framework Mode. This component
833
+ * is used to generate the HTML in the response from the server.
834
+ * See [`entry.server.tsx`](../api/framework-conventions/entry.server.tsx).
409
835
  *
410
- * @category Components
836
+ * @public
837
+ * @category Framework Routers
838
+ * @mode framework
839
+ * @param props Props
840
+ * @param props.context The entry context containing the manifest, route modules,
841
+ * and other data needed for rendering.
842
+ * @param props.url The URL of the request being handled.
843
+ * @param props.nonce An optional nonce for Content Security Policy (CSP) compliance,
844
+ * used to allow inline scripts to run safely.
845
+ * @returns A React element that represents the server-rendered application.
411
846
  */
412
847
  declare function ServerRouter({ context, url, nonce, }: ServerRouterProps): ReactElement;
413
848
 
@@ -724,21 +1159,171 @@ type BrowserCreateFromReadableStreamFunction = (body: ReadableStream<Uint8Array>
724
1159
  type EncodeReplyFunction = (args: unknown[], options: {
725
1160
  temporaryReferences: unknown;
726
1161
  }) => Promise<BodyInit>;
1162
+ /**
1163
+ * Create a React `callServer` implementation for React Router.
1164
+ *
1165
+ * @example
1166
+ * import {
1167
+ * createFromReadableStream,
1168
+ * createTemporaryReferenceSet,
1169
+ * encodeReply,
1170
+ * setServerCallback,
1171
+ * } from "@vitejs/plugin-rsc/browser";
1172
+ * import { unstable_createCallServer as createCallServer } from "react-router";
1173
+ *
1174
+ * setServerCallback(
1175
+ * createCallServer({
1176
+ * createFromReadableStream,
1177
+ * createTemporaryReferenceSet,
1178
+ * encodeReply,
1179
+ * })
1180
+ * );
1181
+ *
1182
+ * @name unstable_createCallServer
1183
+ * @public
1184
+ * @category RSC
1185
+ * @mode data
1186
+ * @param opts Options
1187
+ * @param opts.createFromReadableStream Your `react-server-dom-xyz/client`'s
1188
+ * `createFromReadableStream`. Used to decode payloads from the server.
1189
+ * @param opts.createTemporaryReferenceSet A function that creates a temporary
1190
+ * reference set for the RSC payload.
1191
+ * @param opts.encodeReply Your `react-server-dom-xyz/client`'s `encodeReply`.
1192
+ * Used when sending payloads to the server.
1193
+ * @param opts.fetch Optional fetch implementation. Defaults to global `fetch`.
1194
+ * @returns A function that can be used to call server actions.
1195
+ */
727
1196
  declare function createCallServer({ createFromReadableStream, createTemporaryReferenceSet, encodeReply, fetch: fetchImplementation, }: {
728
1197
  createFromReadableStream: BrowserCreateFromReadableStreamFunction;
729
1198
  createTemporaryReferenceSet: () => unknown;
730
1199
  encodeReply: EncodeReplyFunction;
731
1200
  fetch?: (request: Request) => Promise<Response>;
732
1201
  }): (id: string, args: unknown[]) => Promise<unknown>;
733
- declare function RSCHydratedRouter({ createFromReadableStream, fetch: fetchImplementation, payload, routeDiscovery, unstable_getContext, }: {
1202
+ /**
1203
+ * Props for the `unstable_RSCHydratedRouter` component.
1204
+ * @name unstable_RSCHydratedRouterProps
1205
+ */
1206
+ interface RSCHydratedRouterProps {
1207
+ /**
1208
+ * Your `react-server-dom-xyz/client`'s `createFromReadableStream` function,
1209
+ * used to decode payloads from the server.
1210
+ */
734
1211
  createFromReadableStream: BrowserCreateFromReadableStreamFunction;
1212
+ /**
1213
+ * Optional fetch implementation. Defaults to global `fetch`.
1214
+ */
735
1215
  fetch?: (request: Request) => Promise<Response>;
1216
+ /**
1217
+ * The decoded `RSCPayload` to hydrate.
1218
+ */
736
1219
  payload: RSCPayload;
1220
+ /**
1221
+ * `eager` or `lazy` - Determines if links are eagerly discovered, or delayed
1222
+ * until clicked.
1223
+ */
737
1224
  routeDiscovery?: "eager" | "lazy";
1225
+ /**
1226
+ * A function that returns an `unstable_InitialContext` object
1227
+ * (`Map<RouterContext, unknown>`), for use in client loaders, actions and
1228
+ * middleware.
1229
+ */
738
1230
  unstable_getContext?: RouterInit["unstable_getContext"];
739
- }): React.JSX.Element;
1231
+ }
1232
+ /**
1233
+ * Hydrates a server rendered `RSCPayload` in the browser.
1234
+ *
1235
+ * @example
1236
+ * import { startTransition, StrictMode } from "react";
1237
+ * import { hydrateRoot } from "react-dom/client";
1238
+ * import {
1239
+ * unstable_getRSCStream as getRSCStream,
1240
+ * unstable_RSCHydratedRouter as RSCHydratedRouter,
1241
+ * } from "react-router";
1242
+ * import type { unstable_RSCPayload as RSCPayload } from "react-router";
1243
+ *
1244
+ * createFromReadableStream(getRSCStream()).then(
1245
+ * (payload: RSCServerPayload) => {
1246
+ * startTransition(async () => {
1247
+ * hydrateRoot(
1248
+ * document,
1249
+ * <StrictMode>
1250
+ * <RSCHydratedRouter
1251
+ * createFromReadableStream={
1252
+ * createFromReadableStream
1253
+ * }
1254
+ * payload={payload}
1255
+ * />
1256
+ * </StrictMode>,
1257
+ * {
1258
+ * formState: await getFormState(payload),
1259
+ * }
1260
+ * );
1261
+ * });
1262
+ * }
1263
+ * );
1264
+ *
1265
+ * @name unstable_RSCHydratedRouter
1266
+ * @public
1267
+ * @category RSC
1268
+ * @mode data
1269
+ * @param props Props
1270
+ * @param {unstable_RSCHydratedRouterProps.createFromReadableStream} props.createFromReadableStream n/a
1271
+ * @param {unstable_RSCHydratedRouterProps.fetch} props.fetch n/a
1272
+ * @param {unstable_RSCHydratedRouterProps.payload} props.payload n/a
1273
+ * @param {unstable_RSCHydratedRouterProps.routeDiscovery} props.routeDiscovery n/a
1274
+ * @param {unstable_RSCHydratedRouterProps.unstable_getContext} props.unstable_getContext n/a
1275
+ * @returns A hydrated router that can be used to navigate and render routes.
1276
+ */
1277
+ declare function RSCHydratedRouter({ createFromReadableStream, fetch: fetchImplementation, payload, routeDiscovery, unstable_getContext, }: RSCHydratedRouterProps): React.JSX.Element;
740
1278
 
741
1279
  type SSRCreateFromReadableStreamFunction = (body: ReadableStream<Uint8Array>) => Promise<unknown>;
1280
+ /**
1281
+ * Routes the incoming request to the RSC server and appropriately proxies the
1282
+ * server response for data / resource requests, or renders to HTML for a document
1283
+ * request.
1284
+ *
1285
+ * @example
1286
+ * import { createFromReadableStream } from "@vitejs/plugin-rsc/ssr";
1287
+ * import * as ReactDomServer from "react-dom/server.edge";
1288
+ * import {
1289
+ * unstable_RSCStaticRouter as RSCStaticRouter,
1290
+ * unstable_routeRSCServerRequest as routeRSCServerRequest,
1291
+ * } from "react-router";
1292
+ *
1293
+ * routeRSCServerRequest({
1294
+ * request,
1295
+ * fetchServer,
1296
+ * createFromReadableStream,
1297
+ * async renderHTML(getPayload) {
1298
+ * const payload = await getPayload();
1299
+ *
1300
+ * return await renderHTMLToReadableStream(
1301
+ * <RSCStaticRouter getPayload={getPayload} />,
1302
+ * {
1303
+ * bootstrapScriptContent,
1304
+ * formState: await getFormState(payload),
1305
+ * }
1306
+ * );
1307
+ * },
1308
+ * });
1309
+ *
1310
+ * @name unstable_routeRSCServerRequest
1311
+ * @public
1312
+ * @category RSC
1313
+ * @mode data
1314
+ * @param opts Options
1315
+ * @param opts.createFromReadableStream Your `react-server-dom-xyz/client`'s
1316
+ * `createFromReadableStream` function, used to decode payloads from the server.
1317
+ * @param opts.fetchServer A function that forwards a `Request` to the RSC handler
1318
+ * and returns a `Promise<Response>` containing a serialized `RSCPayload`.
1319
+ * @param opts.renderHTML A function that renders the `RSCPayload` to HTML, usually
1320
+ * using a `<RSCStaticRouter>`.
1321
+ * @param opts.request The request to route.
1322
+ * @param opts.hydrate Whether to hydrate the server response with the RSC payload.
1323
+ * Defaults to `true`.
1324
+ * @returns A `Response` that either contains the RSC payload for data requests, or
1325
+ * renders the HTML for document requests.
1326
+ */
742
1327
  declare function routeRSCServerRequest({ request, fetchServer, createFromReadableStream, renderHTML, hydrate, }: {
743
1328
  request: Request;
744
1329
  fetchServer: (request: Request) => Promise<Response>;
@@ -746,9 +1331,55 @@ declare function routeRSCServerRequest({ request, fetchServer, createFromReadabl
746
1331
  renderHTML: (getPayload: () => Promise<RSCPayload>) => ReadableStream<Uint8Array> | Promise<ReadableStream<Uint8Array>>;
747
1332
  hydrate?: boolean;
748
1333
  }): Promise<Response>;
749
- declare function RSCStaticRouter({ getPayload, }: {
1334
+ /**
1335
+ * Props for the `RSCStaticRouter` component.
1336
+ * @name unstable_RSCStaticRouterProps
1337
+ */
1338
+ interface RSCStaticRouterProps {
1339
+ /**
1340
+ * A function that starts decoding of the `RSCPayload`. Usually passed through
1341
+ * from `routeRSCServerRequest`'s `renderHTML`.
1342
+ */
750
1343
  getPayload: () => Promise<RSCPayload>;
751
- }): React.JSX.Element | null;
1344
+ }
1345
+ /**
1346
+ * Pre-renders an `RSCPayload` to HTML. Usually used in `routeRSCServerRequest`'s
1347
+ * `renderHTML` callback.
1348
+ *
1349
+ * @example
1350
+ * import { createFromReadableStream } from "@vitejs/plugin-rsc/ssr";
1351
+ * import * as ReactDomServer from "react-dom/server.edge";
1352
+ * import {
1353
+ * unstable_RSCStaticRouter as RSCStaticRouter,
1354
+ * unstable_routeRSCServerRequest as routeRSCServerRequest,
1355
+ * } from "react-router";
1356
+ *
1357
+ * routeRSCServerRequest({
1358
+ * request,
1359
+ * fetchServer,
1360
+ * createFromReadableStream,
1361
+ * async renderHTML(getPayload) {
1362
+ * const payload = await getPayload();
1363
+ *
1364
+ * return await renderHTMLToReadableStream(
1365
+ * <RSCStaticRouter getPayload={getPayload} />,
1366
+ * {
1367
+ * bootstrapScriptContent,
1368
+ * formState: await getFormState(payload),
1369
+ * }
1370
+ * );
1371
+ * },
1372
+ * });
1373
+ *
1374
+ * @name unstable_RSCStaticRouter
1375
+ * @public
1376
+ * @category RSC
1377
+ * @mode data
1378
+ * @param props Props
1379
+ * @param {unstable_RSCStaticRouterProps.getPayload} props.getPayload n/a
1380
+ * @returns A React component that renders the `RSCPayload` as HTML.
1381
+ */
1382
+ declare function RSCStaticRouter({ getPayload }: RSCStaticRouterProps): React.JSX.Element | null;
752
1383
 
753
1384
  declare function RSCDefaultRootErrorBoundary({ hasRootLayout, }: {
754
1385
  hasRootLayout: boolean;
@@ -792,4 +1423,4 @@ declare function getHydrationData(state: {
792
1423
 
793
1424
  declare const unstable_matchRSCServerRequest: typeof matchRSCServerRequest;
794
1425
 
795
- export { ActionFunction, AppLoadContext, Blocker, BlockerFunction, ClientLoaderFunction, type Cookie, type CookieOptions, type CookieSignatureOptions, type CreateRequestHandlerFunction, DataRouteObject, Router as DataRouter, DataStrategyFunction, EntryContext, type FlashSessionData, HydrationState, IndexRouteObject, InitialEntry, type IsCookieFunction, type IsSessionFunction, LinksFunction, LoaderFunction, Location, MetaFunction, type NavigateFunction, NavigateOptions, Navigation, Action as NavigationType, NonIndexRouteObject, ParamParseKey, Params, PatchRoutesOnNavigationFunction, Path, PathMatch, PathPattern, RelativeRoutingType, type RequestHandler, RouteObject, RouterInit, RouterState, type RoutesTestStubProps, ServerBuild, ServerRouter, type ServerRouterProps, type Session, type SessionData, type SessionIdStorageStrategy, type SessionStorage, To, UIMatch, AssetsManifest as UNSAFE_AssetsManifest, MiddlewareEnabled as UNSAFE_MiddlewareEnabled, RSCDefaultRootErrorBoundary as UNSAFE_RSCDefaultRootErrorBoundary, RemixErrorBoundary as UNSAFE_RemixErrorBoundary, RouteModules as UNSAFE_RouteModules, ServerMode as UNSAFE_ServerMode, SingleFetchRedirectSymbol as UNSAFE_SingleFetchRedirectSymbol, decodeViaTurboStream as UNSAFE_decodeViaTurboStream, deserializeErrors as UNSAFE_deserializeErrors, getHydrationData as UNSAFE_getHydrationData, getPatchRoutesOnNavigationFunction as UNSAFE_getPatchRoutesOnNavigationFunction, getTurboStreamSingleFetchDataStrategy as UNSAFE_getTurboStreamSingleFetchDataStrategy, useFogOFWarDiscovery as UNSAFE_useFogOFWarDiscovery, createCookie, createCookieSessionStorage, createMemorySessionStorage, createRequestHandler, createRoutesStub, createSession, createSessionStorage, href, isCookie, isSession, type BrowserCreateFromReadableStreamFunction as unstable_BrowserCreateFromReadableStreamFunction, type EncodeReplyFunction as unstable_EncodeReplyFunction, unstable_InitialContext, RSCHydratedRouter as unstable_RSCHydratedRouter, RSCPayload as unstable_RSCPayload, RSCStaticRouter as unstable_RSCStaticRouter, unstable_RouterContextProvider, type SSRCreateFromReadableStreamFunction as unstable_SSRCreateFromReadableStreamFunction, createCallServer as unstable_createCallServer, unstable_matchRSCServerRequest, routeRSCServerRequest as unstable_routeRSCServerRequest, setDevServerHooks as unstable_setDevServerHooks, useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
1426
+ export { ActionFunction, AppLoadContext, Blocker, BlockerFunction, ClientLoaderFunction, type Cookie, type CookieOptions, type CookieSignatureOptions, type CreateRequestHandlerFunction, DataRouteObject, Router as DataRouter, DataStrategyFunction, EntryContext, type FlashSessionData, HydrationState, IndexRouteObject, InitialEntry, type IsCookieFunction, type IsSessionFunction, LinksFunction, LoaderFunction, Location, MetaFunction, type NavigateFunction, NavigateOptions, Navigation, Action as NavigationType, NonIndexRouteObject, ParamParseKey, Params, PatchRoutesOnNavigationFunction, Path, PathMatch, PathPattern, RelativeRoutingType, type RequestHandler, RouteObject, RouterInit, RouterState, type RoutesTestStubProps, ServerBuild, ServerRouter, type ServerRouterProps, type Session, type SessionData, type SessionIdStorageStrategy, type SessionStorage, To, UIMatch, AssetsManifest as UNSAFE_AssetsManifest, MiddlewareEnabled as UNSAFE_MiddlewareEnabled, RSCDefaultRootErrorBoundary as UNSAFE_RSCDefaultRootErrorBoundary, RemixErrorBoundary as UNSAFE_RemixErrorBoundary, RouteModules as UNSAFE_RouteModules, ServerMode as UNSAFE_ServerMode, SingleFetchRedirectSymbol as UNSAFE_SingleFetchRedirectSymbol, decodeViaTurboStream as UNSAFE_decodeViaTurboStream, deserializeErrors as UNSAFE_deserializeErrors, getHydrationData as UNSAFE_getHydrationData, getPatchRoutesOnNavigationFunction as UNSAFE_getPatchRoutesOnNavigationFunction, getTurboStreamSingleFetchDataStrategy as UNSAFE_getTurboStreamSingleFetchDataStrategy, useFogOFWarDiscovery as UNSAFE_useFogOFWarDiscovery, createCookie, createCookieSessionStorage, createMemorySessionStorage, createRequestHandler, createRoutesStub, createSession, createSessionStorage, href, isCookie, isSession, type BrowserCreateFromReadableStreamFunction as unstable_BrowserCreateFromReadableStreamFunction, type EncodeReplyFunction as unstable_EncodeReplyFunction, unstable_InitialContext, RSCHydratedRouter as unstable_RSCHydratedRouter, type RSCHydratedRouterProps as unstable_RSCHydratedRouterProps, RSCPayload as unstable_RSCPayload, RSCStaticRouter as unstable_RSCStaticRouter, type RSCStaticRouterProps as unstable_RSCStaticRouterProps, unstable_RouterContextProvider, type SSRCreateFromReadableStreamFunction as unstable_SSRCreateFromReadableStreamFunction, createCallServer as unstable_createCallServer, unstable_matchRSCServerRequest, routeRSCServerRequest as unstable_routeRSCServerRequest, setDevServerHooks as unstable_setDevServerHooks, useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };