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.
- package/CHANGELOG.md +11 -23
- package/dist/development/{browser-CcxeZJcQ.d.mts → browser-7LYX59NK.d.mts} +97 -1
- package/dist/development/{chunk-EF7DTUVF.mjs → chunk-C37GKA54.mjs} +83 -80
- package/dist/development/{chunk-V6PEDDZI.js → chunk-K7YFBME3.js} +79 -76
- package/dist/{production/chunk-GNZILI6H.mjs → development/chunk-KIUJAIYX.mjs} +3 -5
- package/dist/{production/chunk-2TYFPE3B.js → development/chunk-R73PQUJU.js} +132 -132
- package/dist/development/components-CjQijYga.d.mts +802 -0
- package/dist/development/dom-export.d.mts +13 -6
- package/dist/development/dom-export.d.ts +10 -3
- package/dist/development/dom-export.js +3 -3
- package/dist/development/dom-export.mjs +3 -3
- package/dist/development/index-react-server-client-Bi_fx8qz.d.ts +3163 -0
- package/dist/development/index-react-server-client-KLg-U4nr.d.mts +2366 -0
- package/dist/development/index-react-server-client.d.mts +3 -3
- package/dist/development/index-react-server-client.d.ts +2 -2
- package/dist/development/index-react-server-client.js +4 -4
- package/dist/development/index-react-server-client.mjs +2 -2
- package/dist/development/index-react-server.d.mts +109 -2
- package/dist/development/index-react-server.d.ts +109 -2
- package/dist/development/index-react-server.js +28 -20
- package/dist/development/index-react-server.mjs +29 -21
- package/dist/development/index.d.mts +918 -287
- package/dist/development/index.d.ts +1010 -283
- package/dist/development/index.js +98 -100
- package/dist/development/index.mjs +3 -3
- package/dist/development/lib/types/internal.d.mts +1 -1
- package/dist/development/lib/types/internal.d.ts +1 -1
- package/dist/development/lib/types/internal.js +1 -1
- package/dist/development/lib/types/internal.mjs +1 -1
- package/dist/{production/route-data-DjzmHYNR.d.mts → development/route-data-CqEmXQub.d.mts} +48 -2
- package/dist/{production/routeModules-g5PTiDfO.d.ts → development/routeModules-BR2FO0ix.d.ts} +48 -2
- package/dist/production/{browser-CcxeZJcQ.d.mts → browser-7LYX59NK.d.mts} +97 -1
- package/dist/{development/chunk-4ADB4KIO.js → production/chunk-4DGLNKXF.js} +132 -132
- package/dist/production/{chunk-5KHO4FML.js → chunk-7OQROU2D.js} +79 -76
- package/dist/production/{chunk-WPPIQDYG.mjs → chunk-IZ57JD2V.mjs} +83 -80
- package/dist/{development/chunk-T3VM44WY.mjs → production/chunk-K3SBCRK4.mjs} +3 -5
- package/dist/production/components-CjQijYga.d.mts +802 -0
- package/dist/production/dom-export.d.mts +13 -6
- package/dist/production/dom-export.d.ts +10 -3
- package/dist/production/dom-export.js +3 -3
- package/dist/production/dom-export.mjs +3 -3
- package/dist/production/index-react-server-client-Bi_fx8qz.d.ts +3163 -0
- package/dist/production/index-react-server-client-KLg-U4nr.d.mts +2366 -0
- package/dist/production/index-react-server-client.d.mts +3 -3
- package/dist/production/index-react-server-client.d.ts +2 -2
- package/dist/production/index-react-server-client.js +4 -4
- package/dist/production/index-react-server-client.mjs +2 -2
- package/dist/production/index-react-server.d.mts +109 -2
- package/dist/production/index-react-server.d.ts +109 -2
- package/dist/production/index-react-server.js +28 -20
- package/dist/production/index-react-server.mjs +29 -21
- package/dist/production/index.d.mts +918 -287
- package/dist/production/index.d.ts +1010 -283
- package/dist/production/index.js +98 -100
- package/dist/production/index.mjs +3 -3
- package/dist/production/lib/types/internal.d.mts +1 -1
- package/dist/production/lib/types/internal.d.ts +1 -1
- package/dist/production/lib/types/internal.js +1 -1
- package/dist/production/lib/types/internal.mjs +1 -1
- package/dist/{development/route-data-DjzmHYNR.d.mts → production/route-data-CqEmXQub.d.mts} +48 -2
- package/dist/{development/routeModules-g5PTiDfO.d.ts → production/routeModules-BR2FO0ix.d.ts} +48 -2
- package/package.json +1 -1
- package/dist/development/components-DzqPLVI1.d.mts +0 -464
- package/dist/development/index-react-server-client-CUidsuu_.d.mts +0 -1360
- package/dist/development/index-react-server-client-kY8DvDF3.d.ts +0 -1819
- package/dist/production/components-DzqPLVI1.d.mts +0 -464
- package/dist/production/index-react-server-client-CUidsuu_.d.mts +0 -1360
- 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-
|
|
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-
|
|
3
|
-
import { a as RouteComponentType, H as HydrateFallbackType, E as ErrorBoundaryType } from './components-
|
|
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-
|
|
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-
|
|
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,
|
|
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-
|
|
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-
|
|
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
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
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
|
|
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
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
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
|
|
83
|
-
* the current
|
|
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
|
|
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
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
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
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
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
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
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
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
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
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
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
|
|
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
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
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
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
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
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
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
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
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
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
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
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
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.
|
|
393
|
-
* using half-filled form data.
|
|
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
|
|
407
|
-
*
|
|
408
|
-
*
|
|
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
|
-
* @
|
|
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
|
-
|
|
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
|
-
}
|
|
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
|
-
|
|
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
|
-
}
|
|
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 };
|