react-router 7.6.1-pre.2 → 7.6.2
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 +12 -18
- package/dist/development/{chunk-H4Y5ODCL.mjs → chunk-NL6KNZEE.mjs} +48 -39
- package/dist/development/dom-export.d.mts +2 -2
- package/dist/development/dom-export.js +1 -1
- package/dist/development/dom-export.mjs +2 -2
- package/dist/development/index.d.mts +8 -389
- package/dist/development/index.d.ts +819 -799
- package/dist/development/index.js +51 -39
- package/dist/development/index.mjs +9 -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/lib-B8x_tOvL.d.mts → development/lib-C1JSsICm.d.mts} +537 -136
- package/dist/{production/register-BkDIKxVz.d.ts → development/register-DCE0tH5m.d.ts} +1 -1
- package/dist/{production/route-data-WyrduLgj.d.mts → development/route-data-ByAYLHuM.d.mts} +1 -1
- package/dist/production/{chunk-WUZRT63N.mjs → chunk-JRQCFVZH.mjs} +48 -39
- package/dist/production/dom-export.d.mts +2 -2
- package/dist/production/dom-export.js +1 -1
- package/dist/production/dom-export.mjs +2 -2
- package/dist/production/index.d.mts +8 -389
- package/dist/production/index.d.ts +819 -799
- package/dist/production/index.js +51 -39
- package/dist/production/index.mjs +9 -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/lib-B8x_tOvL.d.mts → production/lib-C1JSsICm.d.mts} +537 -136
- package/dist/{development/register-BkDIKxVz.d.ts → production/register-DCE0tH5m.d.ts} +1 -1
- package/dist/{development/route-data-WyrduLgj.d.mts → production/route-data-ByAYLHuM.d.mts} +1 -1
- package/package.json +1 -1
|
@@ -1,936 +1,970 @@
|
|
|
1
|
-
import { R as
|
|
2
|
-
export { aA as ClientActionFunction, aB as ClientActionFunctionArgs, aC as ClientLoaderFunctionArgs, ay as DataRouteMatch, a7 as DataStrategyFunctionArgs, a8 as DataStrategyMatch, a9 as DataStrategyResult, ab as ErrorResponse, ac as FormMethod, aJ as Future, a1 as GetScrollPositionFunction, aD as HeadersArgs, aE as HeadersFunction, aH as HtmlLinkDescriptor, ao as IDLE_BLOCKER, an as IDLE_FETCHER, am as IDLE_NAVIGATION, aI as LinkDescriptor, aF as MetaArgs, aG as MetaDescriptor, a2 as NavigationStates, az as PatchRoutesOnNavigationFunctionArgs, ae as PathParam, af as RedirectFunction, aL as Register, a6 as RevalidationState, a5 as RouterFetchOptions, a4 as RouterNavigateOptions, a3 as RouterSubscriber, ah as ShouldRevalidateFunction, ai as ShouldRevalidateFunctionArgs, aQ as UNSAFE_DataRouterContext, aR as UNSAFE_DataRouterStateContext, aa as UNSAFE_DataWithResponseInit, aP as UNSAFE_ErrorResponseImpl, aS as UNSAFE_FetchersContext, aT as UNSAFE_LocationContext, aU as UNSAFE_NavigationContext, aV as UNSAFE_RouteContext, aW as UNSAFE_ViewTransitionContext, aM as UNSAFE_createBrowserHistory, aO as UNSAFE_createRouter, aN as UNSAFE_invariant, ak as createPath, ap as data, aq as generatePath, ar as isRouteErrorResponse, as as matchPath, at as matchRoutes, al as parsePath, au as redirect, av as redirectDocument, aw as replace, ax as resolvePath, ad as unstable_MiddlewareFunction, ag as unstable_RouterContext, aK as unstable_SerializesTo, aj as unstable_createContext } from './register-
|
|
1
|
+
import { R as RouteManifest, S as ServerRouteModule, M as MiddlewareEnabled, u as unstable_RouterContextProvider, A as AppLoadContext, L as LoaderFunctionArgs, a as ActionFunctionArgs, b as StaticHandlerContext, c as RouteModules, H as HydrationState, D as DataRouteObject, C as ClientLoaderFunction, d as Router$1, e as DataStrategyFunction, T as To, f as RelativeRoutingType, g as Location, h as Action, P as ParamParseKey, i as Path, j as PathPattern, k as PathMatch, N as NavigateOptions, l as Params, m as RouteObject, n as Navigation, U as UIMatch, o as SerializeFrom, B as BlockerFunction, p as Blocker, q as RouterInit, F as FutureConfig$1, I as InitialEntry, r as PatchRoutesOnNavigationFunction, s as NonIndexRouteObject, t as LazyRouteFunction, v as IndexRouteObject, w as Navigator, x as RouteMatch, y as HTMLFormMethod, z as FormEncType, E as PageLinkDescriptor, G as History, J as GetScrollRestorationKeyFunction, K as Fetcher, O as StaticHandler, Q as CreateStaticHandlerOptions$1, V as unstable_InitialContext, W as LoaderFunction, X as ActionFunction, Y as MetaFunction, Z as LinksFunction, _ as Pages, $ as Equal, a0 as RouterState } from './register-DCE0tH5m.js';
|
|
2
|
+
export { aA as ClientActionFunction, aB as ClientActionFunctionArgs, aC as ClientLoaderFunctionArgs, ay as DataRouteMatch, a7 as DataStrategyFunctionArgs, a8 as DataStrategyMatch, a9 as DataStrategyResult, ab as ErrorResponse, ac as FormMethod, aJ as Future, a1 as GetScrollPositionFunction, aD as HeadersArgs, aE as HeadersFunction, aH as HtmlLinkDescriptor, ao as IDLE_BLOCKER, an as IDLE_FETCHER, am as IDLE_NAVIGATION, aI as LinkDescriptor, aF as MetaArgs, aG as MetaDescriptor, a2 as NavigationStates, az as PatchRoutesOnNavigationFunctionArgs, ae as PathParam, af as RedirectFunction, aL as Register, a6 as RevalidationState, a5 as RouterFetchOptions, a4 as RouterNavigateOptions, a3 as RouterSubscriber, ah as ShouldRevalidateFunction, ai as ShouldRevalidateFunctionArgs, aQ as UNSAFE_DataRouterContext, aR as UNSAFE_DataRouterStateContext, aa as UNSAFE_DataWithResponseInit, aP as UNSAFE_ErrorResponseImpl, aS as UNSAFE_FetchersContext, aT as UNSAFE_LocationContext, aU as UNSAFE_NavigationContext, aV as UNSAFE_RouteContext, aW as UNSAFE_ViewTransitionContext, aM as UNSAFE_createBrowserHistory, aO as UNSAFE_createRouter, aN as UNSAFE_invariant, ak as createPath, ap as data, aq as generatePath, ar as isRouteErrorResponse, as as matchPath, at as matchRoutes, al as parsePath, au as redirect, av as redirectDocument, aw as replace, ax as resolvePath, ad as unstable_MiddlewareFunction, ag as unstable_RouterContext, aK as unstable_SerializesTo, aj as unstable_createContext } from './register-DCE0tH5m.js';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ReactElement } from 'react';
|
|
5
5
|
import { ParseOptions, SerializeOptions } from 'cookie';
|
|
6
6
|
export { ParseOptions as CookieParseOptions, SerializeOptions as CookieSerializeOptions } from 'cookie';
|
|
7
7
|
|
|
8
|
+
type ServerRouteManifest = RouteManifest<Omit<ServerRoute, "children">>;
|
|
9
|
+
interface ServerRoute extends Route$1 {
|
|
10
|
+
children: ServerRoute[];
|
|
11
|
+
module: ServerRouteModule;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
type OptionalCriticalCss = CriticalCss | undefined;
|
|
8
15
|
/**
|
|
9
|
-
*
|
|
16
|
+
* The output of the compiler for the server build.
|
|
10
17
|
*/
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
* Basename path for the application.
|
|
18
|
-
*/
|
|
18
|
+
interface ServerBuild {
|
|
19
|
+
entry: {
|
|
20
|
+
module: ServerEntryModule;
|
|
21
|
+
};
|
|
22
|
+
routes: ServerRouteManifest;
|
|
23
|
+
assets: AssetsManifest;
|
|
19
24
|
basename?: string;
|
|
25
|
+
publicPath: string;
|
|
26
|
+
assetsBuildDirectory: string;
|
|
27
|
+
future: FutureConfig;
|
|
28
|
+
ssr: boolean;
|
|
29
|
+
unstable_getCriticalCss?: (args: {
|
|
30
|
+
pathname: string;
|
|
31
|
+
}) => OptionalCriticalCss | Promise<OptionalCriticalCss>;
|
|
20
32
|
/**
|
|
21
|
-
*
|
|
22
|
-
*/
|
|
23
|
-
unstable_getContext?: RouterInit["unstable_getContext"];
|
|
24
|
-
/**
|
|
25
|
-
* Future flags to enable for the router.
|
|
26
|
-
*/
|
|
27
|
-
future?: Partial<FutureConfig$1>;
|
|
28
|
-
/**
|
|
29
|
-
* Hydration data to initialize the router with if you have already performed
|
|
30
|
-
* data loading on the server.
|
|
31
|
-
*/
|
|
32
|
-
hydrationData?: HydrationState;
|
|
33
|
-
/**
|
|
34
|
-
* Initial entires in the in-memory history stack
|
|
35
|
-
*/
|
|
36
|
-
initialEntries?: InitialEntry[];
|
|
37
|
-
/**
|
|
38
|
-
* Index of `initialEntries` the application should initialize to
|
|
39
|
-
*/
|
|
40
|
-
initialIndex?: number;
|
|
41
|
-
/**
|
|
42
|
-
* Override the default data strategy of loading in parallel.
|
|
43
|
-
* Only intended for advanced usage.
|
|
44
|
-
*/
|
|
45
|
-
dataStrategy?: DataStrategyFunction;
|
|
46
|
-
/**
|
|
47
|
-
* Lazily define portions of the route tree on navigations.
|
|
33
|
+
* @deprecated This is now done via a custom header during prerendering
|
|
48
34
|
*/
|
|
49
|
-
|
|
35
|
+
isSpaMode: boolean;
|
|
36
|
+
prerender: string[];
|
|
37
|
+
routeDiscovery: {
|
|
38
|
+
mode: "lazy" | "initial";
|
|
39
|
+
manifestPath: string;
|
|
40
|
+
};
|
|
50
41
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
* history stack. Useful for non-browser environments without a DOM API.
|
|
54
|
-
*
|
|
55
|
-
* @category Data Routers
|
|
56
|
-
*/
|
|
57
|
-
declare function createMemoryRouter(
|
|
58
|
-
/**
|
|
59
|
-
* Application routes
|
|
60
|
-
*/
|
|
61
|
-
routes: RouteObject[],
|
|
62
|
-
/**
|
|
63
|
-
* Router options
|
|
64
|
-
*/
|
|
65
|
-
opts?: MemoryRouterOpts): Router$1;
|
|
66
|
-
interface RouterProviderProps {
|
|
67
|
-
router: Router$1;
|
|
68
|
-
flushSync?: (fn: () => unknown) => undefined;
|
|
42
|
+
interface HandleDocumentRequestFunction {
|
|
43
|
+
(request: Request, responseStatusCode: number, responseHeaders: Headers, context: EntryContext, loadContext: MiddlewareEnabled extends true ? unstable_RouterContextProvider : AppLoadContext): Promise<Response> | Response;
|
|
69
44
|
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
*/
|
|
73
|
-
declare function RouterProvider({ router, flushSync: reactDomFlushSyncImpl, }: RouterProviderProps): React.ReactElement;
|
|
74
|
-
/**
|
|
75
|
-
* @category Types
|
|
76
|
-
*/
|
|
77
|
-
interface MemoryRouterProps {
|
|
78
|
-
basename?: string;
|
|
79
|
-
children?: React.ReactNode;
|
|
80
|
-
initialEntries?: InitialEntry[];
|
|
81
|
-
initialIndex?: number;
|
|
45
|
+
interface HandleDataRequestFunction {
|
|
46
|
+
(response: Response, args: LoaderFunctionArgs | ActionFunctionArgs): Promise<Response> | Response;
|
|
82
47
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
*
|
|
86
|
-
* @category Component Routers
|
|
87
|
-
*/
|
|
88
|
-
declare function MemoryRouter({ basename, children, initialEntries, initialIndex, }: MemoryRouterProps): React.ReactElement;
|
|
89
|
-
/**
|
|
90
|
-
* @category Types
|
|
91
|
-
*/
|
|
92
|
-
interface NavigateProps {
|
|
93
|
-
to: To;
|
|
94
|
-
replace?: boolean;
|
|
95
|
-
state?: any;
|
|
96
|
-
relative?: RelativeRoutingType;
|
|
48
|
+
interface HandleErrorFunction {
|
|
49
|
+
(error: unknown, args: LoaderFunctionArgs | ActionFunctionArgs): void;
|
|
97
50
|
}
|
|
98
51
|
/**
|
|
99
|
-
* A
|
|
100
|
-
*
|
|
101
|
-
* able to be used.
|
|
102
|
-
*
|
|
103
|
-
* It's recommended to avoid using this component in favor of {@link useNavigate}
|
|
104
|
-
*
|
|
105
|
-
* @category Components
|
|
52
|
+
* A module that serves as the entry point for a Remix app during server
|
|
53
|
+
* rendering.
|
|
106
54
|
*/
|
|
107
|
-
|
|
55
|
+
interface ServerEntryModule {
|
|
56
|
+
default: HandleDocumentRequestFunction;
|
|
57
|
+
handleDataRequest?: HandleDataRequestFunction;
|
|
58
|
+
handleError?: HandleErrorFunction;
|
|
59
|
+
streamTimeout?: number;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
type SerializedError = {
|
|
63
|
+
message: string;
|
|
64
|
+
stack?: string;
|
|
65
|
+
};
|
|
66
|
+
interface FrameworkContextObject {
|
|
67
|
+
manifest: AssetsManifest;
|
|
68
|
+
routeModules: RouteModules;
|
|
69
|
+
criticalCss?: CriticalCss;
|
|
70
|
+
serverHandoffString?: string;
|
|
71
|
+
future: FutureConfig;
|
|
72
|
+
ssr: boolean;
|
|
73
|
+
isSpaMode: boolean;
|
|
74
|
+
routeDiscovery: ServerBuild["routeDiscovery"];
|
|
75
|
+
serializeError?(error: Error): SerializedError;
|
|
76
|
+
renderMeta?: {
|
|
77
|
+
didRenderScripts?: boolean;
|
|
78
|
+
streamCache?: Record<number, Promise<void> & {
|
|
79
|
+
result?: {
|
|
80
|
+
done: boolean;
|
|
81
|
+
value: string;
|
|
82
|
+
};
|
|
83
|
+
error?: unknown;
|
|
84
|
+
}>;
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
interface EntryContext extends FrameworkContextObject {
|
|
88
|
+
staticHandlerContext: StaticHandlerContext;
|
|
89
|
+
serverHandoffStream?: ReadableStream<Uint8Array>;
|
|
90
|
+
}
|
|
91
|
+
interface FutureConfig {
|
|
92
|
+
unstable_subResourceIntegrity: boolean;
|
|
93
|
+
unstable_middleware: boolean;
|
|
94
|
+
}
|
|
95
|
+
type CriticalCss = string | {
|
|
96
|
+
rel: "stylesheet";
|
|
97
|
+
href: string;
|
|
98
|
+
};
|
|
99
|
+
interface AssetsManifest {
|
|
100
|
+
entry: {
|
|
101
|
+
imports: string[];
|
|
102
|
+
module: string;
|
|
103
|
+
};
|
|
104
|
+
routes: RouteManifest<EntryRoute>;
|
|
105
|
+
url: string;
|
|
106
|
+
version: string;
|
|
107
|
+
hmr?: {
|
|
108
|
+
timestamp?: number;
|
|
109
|
+
runtime: string;
|
|
110
|
+
};
|
|
111
|
+
sri?: Record<string, string> | true;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
interface Route$1 {
|
|
115
|
+
index?: boolean;
|
|
116
|
+
caseSensitive?: boolean;
|
|
117
|
+
id: string;
|
|
118
|
+
parentId?: string;
|
|
119
|
+
path?: string;
|
|
120
|
+
}
|
|
121
|
+
interface EntryRoute extends Route$1 {
|
|
122
|
+
hasAction: boolean;
|
|
123
|
+
hasLoader: boolean;
|
|
124
|
+
hasClientAction: boolean;
|
|
125
|
+
hasClientLoader: boolean;
|
|
126
|
+
hasClientMiddleware: boolean;
|
|
127
|
+
hasErrorBoundary: boolean;
|
|
128
|
+
imports?: string[];
|
|
129
|
+
css?: string[];
|
|
130
|
+
module: string;
|
|
131
|
+
clientActionModule: string | undefined;
|
|
132
|
+
clientLoaderModule: string | undefined;
|
|
133
|
+
clientMiddlewareModule: string | undefined;
|
|
134
|
+
hydrateFallbackModule: string | undefined;
|
|
135
|
+
parentId?: string;
|
|
136
|
+
}
|
|
137
|
+
declare function createClientRoutesWithHMRRevalidationOptOut(needsRevalidation: Set<string>, manifest: RouteManifest<EntryRoute>, routeModulesCache: RouteModules, initialState: HydrationState, ssr: boolean, isSpaMode: boolean): DataRouteObject[];
|
|
138
|
+
declare function createClientRoutes(manifest: RouteManifest<EntryRoute>, routeModulesCache: RouteModules, initialState: HydrationState | null, ssr: boolean, isSpaMode: boolean, parentId?: string, routesByParentId?: Record<string, Omit<EntryRoute, "children">[]>, needsRevalidation?: Set<string>): DataRouteObject[];
|
|
139
|
+
declare function shouldHydrateRouteLoader(routeId: string, clientLoader: ClientLoaderFunction | undefined, hasLoader: boolean, isSpaMode: boolean): boolean;
|
|
140
|
+
|
|
141
|
+
declare const SingleFetchRedirectSymbol: unique symbol;
|
|
142
|
+
declare function getTurboStreamSingleFetchDataStrategy(getRouter: () => Router$1, manifest: AssetsManifest, routeModules: RouteModules, ssr: boolean, basename: string | undefined): DataStrategyFunction;
|
|
143
|
+
declare function decodeViaTurboStream(body: ReadableStream<Uint8Array>, global: Window | typeof globalThis): Promise<{
|
|
144
|
+
done: Promise<undefined>;
|
|
145
|
+
value: unknown;
|
|
146
|
+
}>;
|
|
147
|
+
|
|
108
148
|
/**
|
|
109
|
-
*
|
|
149
|
+
* The mode to use when running the server.
|
|
110
150
|
*/
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
```tsx
|
|
116
|
-
<Outlet context={myContextValue} />
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
Access the context with {@link useOutletContext}.
|
|
120
|
-
*/
|
|
121
|
-
context?: unknown;
|
|
151
|
+
declare enum ServerMode {
|
|
152
|
+
Development = "development",
|
|
153
|
+
Production = "production",
|
|
154
|
+
Test = "test"
|
|
122
155
|
}
|
|
156
|
+
|
|
123
157
|
/**
|
|
124
|
-
|
|
158
|
+
Resolves a URL against the current location.
|
|
125
159
|
|
|
126
160
|
```tsx
|
|
127
|
-
import {
|
|
161
|
+
import { useHref } from "react-router"
|
|
128
162
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
<h1>Parent Content</h1>
|
|
133
|
-
<Outlet />
|
|
134
|
-
</div>
|
|
135
|
-
);
|
|
163
|
+
function SomeComponent() {
|
|
164
|
+
let href = useHref("some/where");
|
|
165
|
+
// "/resolved/some/where"
|
|
136
166
|
}
|
|
137
167
|
```
|
|
138
168
|
|
|
139
|
-
@category
|
|
169
|
+
@category Hooks
|
|
140
170
|
*/
|
|
141
|
-
declare function
|
|
171
|
+
declare function useHref(to: To, { relative }?: {
|
|
172
|
+
relative?: RelativeRoutingType;
|
|
173
|
+
}): string;
|
|
142
174
|
/**
|
|
143
|
-
*
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
lazy?: LazyRouteFunction<NonIndexRouteObject>;
|
|
150
|
-
loader?: NonIndexRouteObject["loader"];
|
|
151
|
-
action?: NonIndexRouteObject["action"];
|
|
152
|
-
hasErrorBoundary?: NonIndexRouteObject["hasErrorBoundary"];
|
|
153
|
-
shouldRevalidate?: NonIndexRouteObject["shouldRevalidate"];
|
|
154
|
-
handle?: NonIndexRouteObject["handle"];
|
|
155
|
-
index?: false;
|
|
156
|
-
children?: React.ReactNode;
|
|
157
|
-
element?: React.ReactNode | null;
|
|
158
|
-
hydrateFallbackElement?: React.ReactNode | null;
|
|
159
|
-
errorElement?: React.ReactNode | null;
|
|
160
|
-
Component?: React.ComponentType | null;
|
|
161
|
-
HydrateFallback?: React.ComponentType | null;
|
|
162
|
-
ErrorBoundary?: React.ComponentType | null;
|
|
163
|
-
}
|
|
175
|
+
* Returns true if this component is a descendant of a Router, useful to ensure
|
|
176
|
+
* a component is used within a Router.
|
|
177
|
+
*
|
|
178
|
+
* @category Hooks
|
|
179
|
+
*/
|
|
180
|
+
declare function useInRouterContext(): boolean;
|
|
164
181
|
/**
|
|
165
|
-
|
|
182
|
+
Returns the current {@link Location}. This can be useful if you'd like to perform some side effect whenever it changes.
|
|
183
|
+
|
|
184
|
+
```tsx
|
|
185
|
+
import * as React from 'react'
|
|
186
|
+
import { useLocation } from 'react-router'
|
|
187
|
+
|
|
188
|
+
function SomeComponent() {
|
|
189
|
+
let location = useLocation()
|
|
190
|
+
|
|
191
|
+
React.useEffect(() => {
|
|
192
|
+
// Google Analytics
|
|
193
|
+
ga('send', 'pageview')
|
|
194
|
+
}, [location]);
|
|
195
|
+
|
|
196
|
+
return (
|
|
197
|
+
// ...
|
|
198
|
+
);
|
|
199
|
+
}
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
@category Hooks
|
|
166
203
|
*/
|
|
167
|
-
|
|
168
|
-
}
|
|
204
|
+
declare function useLocation(): Location;
|
|
169
205
|
/**
|
|
170
|
-
*
|
|
206
|
+
* Returns the current navigation action which describes how the router came to
|
|
207
|
+
* the current location, either by a pop, push, or replace on the history stack.
|
|
208
|
+
*
|
|
209
|
+
* @category Hooks
|
|
171
210
|
*/
|
|
172
|
-
|
|
173
|
-
caseSensitive?: IndexRouteObject["caseSensitive"];
|
|
174
|
-
path?: IndexRouteObject["path"];
|
|
175
|
-
id?: IndexRouteObject["id"];
|
|
176
|
-
lazy?: LazyRouteFunction<IndexRouteObject>;
|
|
177
|
-
loader?: IndexRouteObject["loader"];
|
|
178
|
-
action?: IndexRouteObject["action"];
|
|
179
|
-
hasErrorBoundary?: IndexRouteObject["hasErrorBoundary"];
|
|
180
|
-
shouldRevalidate?: IndexRouteObject["shouldRevalidate"];
|
|
181
|
-
handle?: IndexRouteObject["handle"];
|
|
182
|
-
index: true;
|
|
183
|
-
children?: undefined;
|
|
184
|
-
element?: React.ReactNode | null;
|
|
185
|
-
hydrateFallbackElement?: React.ReactNode | null;
|
|
186
|
-
errorElement?: React.ReactNode | null;
|
|
187
|
-
Component?: React.ComponentType | null;
|
|
188
|
-
HydrateFallback?: React.ComponentType | null;
|
|
189
|
-
ErrorBoundary?: React.ComponentType | null;
|
|
190
|
-
}
|
|
191
|
-
type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;
|
|
211
|
+
declare function useNavigationType(): Action;
|
|
192
212
|
/**
|
|
193
|
-
*
|
|
194
|
-
*
|
|
195
|
-
*
|
|
196
|
-
* route module features.
|
|
213
|
+
* Returns a PathMatch object if the given pattern matches the current URL.
|
|
214
|
+
* This is useful for components that need to know "active" state, e.g.
|
|
215
|
+
* `<NavLink>`.
|
|
197
216
|
*
|
|
198
|
-
* @category
|
|
217
|
+
* @category Hooks
|
|
199
218
|
*/
|
|
200
|
-
declare function
|
|
219
|
+
declare function useMatch<ParamKey extends ParamParseKey<Path>, Path extends string>(pattern: PathPattern<Path> | Path): PathMatch<ParamKey> | null;
|
|
201
220
|
/**
|
|
202
|
-
*
|
|
221
|
+
* The interface for the navigate() function returned from useNavigate().
|
|
203
222
|
*/
|
|
204
|
-
interface
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
location: Partial<Location> | string;
|
|
208
|
-
navigationType?: Action;
|
|
209
|
-
navigator: Navigator;
|
|
210
|
-
static?: boolean;
|
|
223
|
+
interface NavigateFunction {
|
|
224
|
+
(to: To, options?: NavigateOptions): void | Promise<void>;
|
|
225
|
+
(delta: number): void | Promise<void>;
|
|
211
226
|
}
|
|
212
227
|
/**
|
|
213
|
-
|
|
228
|
+
Returns a function that lets you navigate programmatically in the browser in response to user interactions or effects.
|
|
229
|
+
|
|
230
|
+
```tsx
|
|
231
|
+
import { useNavigate } from "react-router";
|
|
232
|
+
|
|
233
|
+
function SomeComponent() {
|
|
234
|
+
let navigate = useNavigate();
|
|
235
|
+
return (
|
|
236
|
+
<button
|
|
237
|
+
onClick={() => {
|
|
238
|
+
navigate(-1);
|
|
239
|
+
}}
|
|
240
|
+
/>
|
|
241
|
+
);
|
|
242
|
+
}
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
It's often better to use {@link redirect} in {@link ActionFunction | actions} and {@link LoaderFunction | loaders} than this hook.
|
|
246
|
+
|
|
247
|
+
@category Hooks
|
|
248
|
+
*/
|
|
249
|
+
declare function useNavigate(): NavigateFunction;
|
|
250
|
+
/**
|
|
251
|
+
* Returns the parent route {@link OutletProps.context | `<Outlet context>`}.
|
|
214
252
|
*
|
|
215
|
-
*
|
|
216
|
-
|
|
217
|
-
|
|
253
|
+
* @category Hooks
|
|
254
|
+
*/
|
|
255
|
+
declare function useOutletContext<Context = unknown>(): Context;
|
|
256
|
+
/**
|
|
257
|
+
* Returns the element for the child route at this level of the route
|
|
258
|
+
* hierarchy. Used internally by `<Outlet>` to render child routes.
|
|
218
259
|
*
|
|
219
|
-
* @category
|
|
260
|
+
* @category Hooks
|
|
220
261
|
*/
|
|
221
|
-
declare function
|
|
262
|
+
declare function useOutlet(context?: unknown): React.ReactElement | null;
|
|
222
263
|
/**
|
|
223
|
-
|
|
264
|
+
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.
|
|
265
|
+
|
|
266
|
+
```tsx
|
|
267
|
+
import { useParams } from "react-router"
|
|
268
|
+
|
|
269
|
+
function SomeComponent() {
|
|
270
|
+
let params = useParams()
|
|
271
|
+
params.postId
|
|
272
|
+
}
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
Assuming a route pattern like `/posts/:postId` is matched by `/posts/123` then `params.postId` will be `"123"`.
|
|
276
|
+
|
|
277
|
+
@category Hooks
|
|
224
278
|
*/
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
*/
|
|
229
|
-
children?: React.ReactNode;
|
|
230
|
-
/**
|
|
231
|
-
* The location to match against. Defaults to the current location.
|
|
232
|
-
*/
|
|
233
|
-
location?: Partial<Location> | string;
|
|
234
|
-
}
|
|
279
|
+
declare function useParams<ParamsOrKey extends string | Record<string, string | undefined> = string>(): Readonly<[
|
|
280
|
+
ParamsOrKey
|
|
281
|
+
] extends [string] ? Params<ParamsOrKey> : Partial<ParamsOrKey>>;
|
|
235
282
|
/**
|
|
236
|
-
|
|
237
|
-
location. Note that these routes do not participate in data loading, actions,
|
|
238
|
-
code splitting, or any other route module features.
|
|
283
|
+
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.
|
|
239
284
|
|
|
240
|
-
|
|
241
|
-
|
|
285
|
+
```tsx
|
|
286
|
+
import { useResolvedPath } from "react-router"
|
|
242
287
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
288
|
+
function SomeComponent() {
|
|
289
|
+
// if the user is at /dashboard/profile
|
|
290
|
+
let path = useResolvedPath("../accounts")
|
|
291
|
+
path.pathname // "/dashboard/accounts"
|
|
292
|
+
path.search // ""
|
|
293
|
+
path.hash // ""
|
|
294
|
+
}
|
|
295
|
+
```
|
|
249
296
|
|
|
250
|
-
|
|
297
|
+
@category Hooks
|
|
251
298
|
*/
|
|
252
|
-
declare function
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
}
|
|
299
|
+
declare function useResolvedPath(to: To, { relative }?: {
|
|
300
|
+
relative?: RelativeRoutingType;
|
|
301
|
+
}): Path;
|
|
256
302
|
/**
|
|
257
|
-
|
|
303
|
+
Hook version of {@link Routes | `<Routes>`} that uses objects instead of components. These objects have the same properties as the component props.
|
|
304
|
+
|
|
305
|
+
The return value of `useRoutes` is either a valid React element you can use to render the route tree, or `null` if nothing matched.
|
|
306
|
+
|
|
307
|
+
```tsx
|
|
308
|
+
import * as React from "react";
|
|
309
|
+
import { useRoutes } from "react-router";
|
|
310
|
+
|
|
311
|
+
function App() {
|
|
312
|
+
let element = useRoutes([
|
|
313
|
+
{
|
|
314
|
+
path: "/",
|
|
315
|
+
element: <Dashboard />,
|
|
316
|
+
children: [
|
|
317
|
+
{
|
|
318
|
+
path: "messages",
|
|
319
|
+
element: <DashboardMessages />,
|
|
320
|
+
},
|
|
321
|
+
{ path: "tasks", element: <DashboardTasks /> },
|
|
322
|
+
],
|
|
323
|
+
},
|
|
324
|
+
{ path: "team", element: <AboutPage /> },
|
|
325
|
+
]);
|
|
326
|
+
|
|
327
|
+
return element;
|
|
328
|
+
}
|
|
329
|
+
```
|
|
330
|
+
|
|
331
|
+
@category Hooks
|
|
258
332
|
*/
|
|
259
|
-
|
|
260
|
-
/**
|
|
261
|
-
When using a function, the resolved value is provided as the parameter.
|
|
262
|
-
|
|
263
|
-
```tsx [2]
|
|
264
|
-
<Await resolve={reviewsPromise}>
|
|
265
|
-
{(resolvedReviews) => <Reviews items={resolvedReviews} />}
|
|
266
|
-
</Await>
|
|
267
|
-
```
|
|
268
|
-
|
|
269
|
-
When using React elements, {@link useAsyncValue} will provide the
|
|
270
|
-
resolved value:
|
|
271
|
-
|
|
272
|
-
```tsx [2]
|
|
273
|
-
<Await resolve={reviewsPromise}>
|
|
274
|
-
<Reviews />
|
|
275
|
-
</Await>
|
|
276
|
-
|
|
277
|
-
function Reviews() {
|
|
278
|
-
const resolvedReviews = useAsyncValue()
|
|
279
|
-
return <div>...</div>
|
|
280
|
-
}
|
|
281
|
-
```
|
|
282
|
-
*/
|
|
283
|
-
children: React.ReactNode | AwaitResolveRenderFunction<Resolve>;
|
|
284
|
-
/**
|
|
285
|
-
The error element renders instead of the children when the promise rejects.
|
|
286
|
-
|
|
287
|
-
```tsx
|
|
288
|
-
<Await
|
|
289
|
-
errorElement={<div>Oops</div>}
|
|
290
|
-
resolve={reviewsPromise}
|
|
291
|
-
>
|
|
292
|
-
<Reviews />
|
|
293
|
-
</Await>
|
|
294
|
-
```
|
|
295
|
-
|
|
296
|
-
To provide a more contextual error, you can use the {@link useAsyncError} in a
|
|
297
|
-
child component
|
|
298
|
-
|
|
299
|
-
```tsx
|
|
300
|
-
<Await
|
|
301
|
-
errorElement={<ReviewsError />}
|
|
302
|
-
resolve={reviewsPromise}
|
|
303
|
-
>
|
|
304
|
-
<Reviews />
|
|
305
|
-
</Await>
|
|
306
|
-
|
|
307
|
-
function ReviewsError() {
|
|
308
|
-
const error = useAsyncError()
|
|
309
|
-
return <div>Error loading reviews: {error.message}</div>
|
|
310
|
-
}
|
|
311
|
-
```
|
|
312
|
-
|
|
313
|
-
If you do not provide an errorElement, the rejected value will bubble up to
|
|
314
|
-
the nearest route-level {@link NonIndexRouteObject#ErrorBoundary | ErrorBoundary} and be accessible
|
|
315
|
-
via {@link useRouteError} hook.
|
|
316
|
-
*/
|
|
317
|
-
errorElement?: React.ReactNode;
|
|
318
|
-
/**
|
|
319
|
-
Takes a promise returned from a {@link LoaderFunction | loader} value to be resolved and rendered.
|
|
320
|
-
|
|
321
|
-
```jsx
|
|
322
|
-
import { useLoaderData, Await } from "react-router"
|
|
323
|
-
|
|
324
|
-
export async function loader() {
|
|
325
|
-
let reviews = getReviews() // not awaited
|
|
326
|
-
let book = await getBook()
|
|
327
|
-
return {
|
|
328
|
-
book,
|
|
329
|
-
reviews, // this is a promise
|
|
330
|
-
}
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
export default function Book() {
|
|
334
|
-
const {
|
|
335
|
-
book,
|
|
336
|
-
reviews, // this is the same promise
|
|
337
|
-
} = useLoaderData()
|
|
338
|
-
|
|
339
|
-
return (
|
|
340
|
-
<div>
|
|
341
|
-
<h1>{book.title}</h1>
|
|
342
|
-
<p>{book.description}</p>
|
|
343
|
-
<React.Suspense fallback={<ReviewsSkeleton />}>
|
|
344
|
-
<Await
|
|
345
|
-
// and is the promise we pass to Await
|
|
346
|
-
resolve={reviews}
|
|
347
|
-
>
|
|
348
|
-
<Reviews />
|
|
349
|
-
</Await>
|
|
350
|
-
</React.Suspense>
|
|
351
|
-
</div>
|
|
352
|
-
);
|
|
353
|
-
}
|
|
354
|
-
```
|
|
355
|
-
*/
|
|
356
|
-
resolve: Resolve;
|
|
357
|
-
}
|
|
333
|
+
declare function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;
|
|
358
334
|
/**
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
```tsx
|
|
362
|
-
import { Await, useLoaderData } from "react-router";
|
|
363
|
-
|
|
364
|
-
export function loader() {
|
|
365
|
-
// not awaited
|
|
366
|
-
const reviews = getReviews()
|
|
367
|
-
// awaited (blocks the transition)
|
|
368
|
-
const book = await fetch("/api/book").then((res) => res.json())
|
|
369
|
-
return { book, reviews }
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
function Book() {
|
|
373
|
-
const { book, reviews } = useLoaderData();
|
|
374
|
-
return (
|
|
375
|
-
<div>
|
|
376
|
-
<h1>{book.title}</h1>
|
|
377
|
-
<p>{book.description}</p>
|
|
378
|
-
<React.Suspense fallback={<ReviewsSkeleton />}>
|
|
379
|
-
<Await
|
|
380
|
-
resolve={reviews}
|
|
381
|
-
errorElement={
|
|
382
|
-
<div>Could not load reviews 😬</div>
|
|
383
|
-
}
|
|
384
|
-
children={(resolvedReviews) => (
|
|
385
|
-
<Reviews items={resolvedReviews} />
|
|
386
|
-
)}
|
|
387
|
-
/>
|
|
388
|
-
</React.Suspense>
|
|
389
|
-
</div>
|
|
390
|
-
);
|
|
391
|
-
}
|
|
392
|
-
```
|
|
335
|
+
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.
|
|
393
336
|
|
|
394
|
-
|
|
337
|
+
```tsx
|
|
338
|
+
import { useNavigation } from "react-router"
|
|
395
339
|
|
|
396
|
-
|
|
340
|
+
function SomeComponent() {
|
|
341
|
+
let navigation = useNavigation();
|
|
342
|
+
navigation.state
|
|
343
|
+
navigation.formData
|
|
344
|
+
// etc.
|
|
345
|
+
}
|
|
346
|
+
```
|
|
397
347
|
|
|
398
|
-
|
|
399
|
-
declare function Await<Resolve>({ children, errorElement, resolve, }: AwaitProps<Resolve>): React.JSX.Element;
|
|
400
|
-
/**
|
|
401
|
-
* Creates a route config from a React "children" object, which is usually
|
|
402
|
-
* either a `<Route>` element or an array of them. Used internally by
|
|
403
|
-
* `<Routes>` to create a route config from its children.
|
|
404
|
-
*
|
|
405
|
-
* @category Utils
|
|
406
|
-
*/
|
|
407
|
-
declare function createRoutesFromChildren(children: React.ReactNode, parentPath?: number[]): RouteObject[];
|
|
408
|
-
/**
|
|
409
|
-
* Create route objects from JSX elements instead of arrays of objects
|
|
348
|
+
@category Hooks
|
|
410
349
|
*/
|
|
411
|
-
declare
|
|
350
|
+
declare function useNavigation(): Navigation;
|
|
412
351
|
/**
|
|
413
|
-
|
|
414
|
-
*
|
|
415
|
-
* @category Utils
|
|
416
|
-
*/
|
|
417
|
-
declare function renderMatches(matches: RouteMatch[] | null): React.ReactElement | null;
|
|
352
|
+
Revalidate the data on the page for reasons outside of normal data mutations like window focus or polling on an interval.
|
|
418
353
|
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
children: ServerRoute[];
|
|
422
|
-
module: ServerRouteModule;
|
|
423
|
-
}
|
|
354
|
+
```tsx
|
|
355
|
+
import { useRevalidator } from "react-router";
|
|
424
356
|
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
* The output of the compiler for the server build.
|
|
428
|
-
*/
|
|
429
|
-
interface ServerBuild {
|
|
430
|
-
entry: {
|
|
431
|
-
module: ServerEntryModule;
|
|
432
|
-
};
|
|
433
|
-
routes: ServerRouteManifest;
|
|
434
|
-
assets: AssetsManifest;
|
|
435
|
-
basename?: string;
|
|
436
|
-
publicPath: string;
|
|
437
|
-
assetsBuildDirectory: string;
|
|
438
|
-
future: FutureConfig;
|
|
439
|
-
ssr: boolean;
|
|
440
|
-
unstable_getCriticalCss?: (args: {
|
|
441
|
-
pathname: string;
|
|
442
|
-
}) => OptionalCriticalCss | Promise<OptionalCriticalCss>;
|
|
443
|
-
/**
|
|
444
|
-
* @deprecated This is now done via a custom header during prerendering
|
|
445
|
-
*/
|
|
446
|
-
isSpaMode: boolean;
|
|
447
|
-
prerender: string[];
|
|
448
|
-
routeDiscovery: {
|
|
449
|
-
mode: "lazy" | "initial";
|
|
450
|
-
manifestPath: string;
|
|
451
|
-
};
|
|
452
|
-
}
|
|
453
|
-
interface HandleDocumentRequestFunction {
|
|
454
|
-
(request: Request, responseStatusCode: number, responseHeaders: Headers, context: EntryContext, loadContext: MiddlewareEnabled extends true ? unstable_RouterContextProvider : AppLoadContext): Promise<Response> | Response;
|
|
455
|
-
}
|
|
456
|
-
interface HandleDataRequestFunction {
|
|
457
|
-
(response: Response, args: LoaderFunctionArgs | ActionFunctionArgs): Promise<Response> | Response;
|
|
458
|
-
}
|
|
459
|
-
interface HandleErrorFunction {
|
|
460
|
-
(error: unknown, args: LoaderFunctionArgs | ActionFunctionArgs): void;
|
|
461
|
-
}
|
|
462
|
-
/**
|
|
463
|
-
* A module that serves as the entry point for a Remix app during server
|
|
464
|
-
* rendering.
|
|
465
|
-
*/
|
|
466
|
-
interface ServerEntryModule {
|
|
467
|
-
default: HandleDocumentRequestFunction;
|
|
468
|
-
handleDataRequest?: HandleDataRequestFunction;
|
|
469
|
-
handleError?: HandleErrorFunction;
|
|
470
|
-
streamTimeout?: number;
|
|
471
|
-
}
|
|
357
|
+
function WindowFocusRevalidator() {
|
|
358
|
+
const revalidator = useRevalidator();
|
|
472
359
|
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
};
|
|
477
|
-
interface FrameworkContextObject {
|
|
478
|
-
manifest: AssetsManifest;
|
|
479
|
-
routeModules: RouteModules;
|
|
480
|
-
criticalCss?: CriticalCss;
|
|
481
|
-
serverHandoffString?: string;
|
|
482
|
-
future: FutureConfig;
|
|
483
|
-
ssr: boolean;
|
|
484
|
-
isSpaMode: boolean;
|
|
485
|
-
routeDiscovery: ServerBuild["routeDiscovery"];
|
|
486
|
-
serializeError?(error: Error): SerializedError;
|
|
487
|
-
renderMeta?: {
|
|
488
|
-
didRenderScripts?: boolean;
|
|
489
|
-
streamCache?: Record<number, Promise<void> & {
|
|
490
|
-
result?: {
|
|
491
|
-
done: boolean;
|
|
492
|
-
value: string;
|
|
493
|
-
};
|
|
494
|
-
error?: unknown;
|
|
495
|
-
}>;
|
|
496
|
-
};
|
|
497
|
-
}
|
|
498
|
-
interface EntryContext extends FrameworkContextObject {
|
|
499
|
-
staticHandlerContext: StaticHandlerContext;
|
|
500
|
-
serverHandoffStream?: ReadableStream<Uint8Array>;
|
|
501
|
-
}
|
|
502
|
-
interface FutureConfig {
|
|
503
|
-
unstable_subResourceIntegrity: boolean;
|
|
504
|
-
unstable_middleware: boolean;
|
|
505
|
-
}
|
|
506
|
-
type CriticalCss = string | {
|
|
507
|
-
rel: "stylesheet";
|
|
508
|
-
href: string;
|
|
509
|
-
};
|
|
510
|
-
interface AssetsManifest {
|
|
511
|
-
entry: {
|
|
512
|
-
imports: string[];
|
|
513
|
-
module: string;
|
|
514
|
-
};
|
|
515
|
-
routes: RouteManifest<EntryRoute>;
|
|
516
|
-
url: string;
|
|
517
|
-
version: string;
|
|
518
|
-
hmr?: {
|
|
519
|
-
timestamp?: number;
|
|
520
|
-
runtime: string;
|
|
521
|
-
};
|
|
522
|
-
sri?: Record<string, string> | true;
|
|
523
|
-
}
|
|
360
|
+
useFakeWindowFocus(() => {
|
|
361
|
+
revalidator.revalidate();
|
|
362
|
+
});
|
|
524
363
|
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
interface EntryRoute extends Route {
|
|
533
|
-
hasAction: boolean;
|
|
534
|
-
hasLoader: boolean;
|
|
535
|
-
hasClientAction: boolean;
|
|
536
|
-
hasClientLoader: boolean;
|
|
537
|
-
hasClientMiddleware: boolean;
|
|
538
|
-
hasErrorBoundary: boolean;
|
|
539
|
-
imports?: string[];
|
|
540
|
-
css?: string[];
|
|
541
|
-
module: string;
|
|
542
|
-
clientActionModule: string | undefined;
|
|
543
|
-
clientLoaderModule: string | undefined;
|
|
544
|
-
clientMiddlewareModule: string | undefined;
|
|
545
|
-
hydrateFallbackModule: string | undefined;
|
|
546
|
-
parentId?: string;
|
|
547
|
-
}
|
|
548
|
-
declare function createClientRoutesWithHMRRevalidationOptOut(needsRevalidation: Set<string>, manifest: RouteManifest<EntryRoute>, routeModulesCache: RouteModules, initialState: HydrationState, ssr: boolean, isSpaMode: boolean): DataRouteObject[];
|
|
549
|
-
declare function createClientRoutes(manifest: RouteManifest<EntryRoute>, routeModulesCache: RouteModules, initialState: HydrationState | null, ssr: boolean, isSpaMode: boolean, parentId?: string, routesByParentId?: Record<string, Omit<EntryRoute, "children">[]>, needsRevalidation?: Set<string>): DataRouteObject[];
|
|
550
|
-
declare function shouldHydrateRouteLoader(routeId: string, clientLoader: ClientLoaderFunction | undefined, hasLoader: boolean, isSpaMode: boolean): boolean;
|
|
364
|
+
return (
|
|
365
|
+
<div hidden={revalidator.state === "idle"}>
|
|
366
|
+
Revalidating...
|
|
367
|
+
</div>
|
|
368
|
+
);
|
|
369
|
+
}
|
|
370
|
+
```
|
|
551
371
|
|
|
552
|
-
|
|
553
|
-
declare function getTurboStreamSingleFetchDataStrategy(getRouter: () => Router$1, manifest: AssetsManifest, routeModules: RouteModules, ssr: boolean, basename: string | undefined): DataStrategyFunction;
|
|
554
|
-
declare function decodeViaTurboStream(body: ReadableStream<Uint8Array>, global: Window | typeof globalThis): Promise<{
|
|
555
|
-
done: Promise<undefined>;
|
|
556
|
-
value: unknown;
|
|
557
|
-
}>;
|
|
372
|
+
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.
|
|
558
373
|
|
|
374
|
+
@category Hooks
|
|
375
|
+
*/
|
|
376
|
+
declare function useRevalidator(): {
|
|
377
|
+
revalidate: () => Promise<void>;
|
|
378
|
+
state: Router$1["state"]["revalidation"];
|
|
379
|
+
};
|
|
559
380
|
/**
|
|
560
|
-
*
|
|
381
|
+
* Returns the active route matches, useful for accessing loaderData for
|
|
382
|
+
* parent/child routes or the route "handle" property
|
|
383
|
+
*
|
|
384
|
+
* @category Hooks
|
|
561
385
|
*/
|
|
562
|
-
declare
|
|
563
|
-
Development = "development",
|
|
564
|
-
Production = "production",
|
|
565
|
-
Test = "test"
|
|
566
|
-
}
|
|
567
|
-
|
|
386
|
+
declare function useMatches(): UIMatch[];
|
|
568
387
|
/**
|
|
569
|
-
|
|
388
|
+
Returns the data from the closest route {@link LoaderFunction | loader} or {@link ClientLoaderFunction | client loader}.
|
|
570
389
|
|
|
571
390
|
```tsx
|
|
572
|
-
import {
|
|
391
|
+
import { useLoaderData } from "react-router"
|
|
573
392
|
|
|
574
|
-
function
|
|
575
|
-
|
|
576
|
-
|
|
393
|
+
export async function loader() {
|
|
394
|
+
return await fakeDb.invoices.findAll();
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
export default function Invoices() {
|
|
398
|
+
let invoices = useLoaderData<typeof loader>();
|
|
399
|
+
// ...
|
|
577
400
|
}
|
|
578
401
|
```
|
|
579
402
|
|
|
580
403
|
@category Hooks
|
|
581
404
|
*/
|
|
582
|
-
declare function
|
|
583
|
-
relative?: RelativeRoutingType;
|
|
584
|
-
}): string;
|
|
585
|
-
/**
|
|
586
|
-
* Returns true if this component is a descendant of a Router, useful to ensure
|
|
587
|
-
* a component is used within a Router.
|
|
588
|
-
*
|
|
589
|
-
* @category Hooks
|
|
590
|
-
*/
|
|
591
|
-
declare function useInRouterContext(): boolean;
|
|
405
|
+
declare function useLoaderData<T = any>(): SerializeFrom<T>;
|
|
592
406
|
/**
|
|
593
|
-
Returns the
|
|
407
|
+
Returns the loader data for a given route by route ID.
|
|
594
408
|
|
|
595
409
|
```tsx
|
|
596
|
-
import
|
|
597
|
-
import { useLocation } from 'react-router'
|
|
410
|
+
import { useRouteLoaderData } from "react-router";
|
|
598
411
|
|
|
599
412
|
function SomeComponent() {
|
|
600
|
-
|
|
413
|
+
const { user } = useRouteLoaderData("root");
|
|
414
|
+
}
|
|
415
|
+
```
|
|
601
416
|
|
|
602
|
-
|
|
603
|
-
// Google Analytics
|
|
604
|
-
ga('send', 'pageview')
|
|
605
|
-
}, [location]);
|
|
417
|
+
Route IDs are created automatically. They are simply the path of the route file relative to the app folder without the extension.
|
|
606
418
|
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
419
|
+
| Route Filename | Route ID |
|
|
420
|
+
| -------------------------- | -------------------- |
|
|
421
|
+
| `app/root.tsx` | `"root"` |
|
|
422
|
+
| `app/routes/teams.tsx` | `"routes/teams"` |
|
|
423
|
+
| `app/whatever/teams.$id.tsx` | `"whatever/teams.$id"` |
|
|
424
|
+
|
|
425
|
+
If you created an ID manually, you can use that instead:
|
|
426
|
+
|
|
427
|
+
```tsx
|
|
428
|
+
route("/", "containers/app.tsx", { id: "app" }})
|
|
611
429
|
```
|
|
612
430
|
|
|
613
431
|
@category Hooks
|
|
614
432
|
*/
|
|
615
|
-
declare function
|
|
433
|
+
declare function useRouteLoaderData<T = any>(routeId: string): SerializeFrom<T> | undefined;
|
|
616
434
|
/**
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
435
|
+
Returns the action data from the most recent POST navigation form submission or `undefined` if there hasn't been one.
|
|
436
|
+
|
|
437
|
+
```tsx
|
|
438
|
+
import { Form, useActionData } from "react-router"
|
|
439
|
+
|
|
440
|
+
export async function action({ request }) {
|
|
441
|
+
const body = await request.formData()
|
|
442
|
+
const name = body.get("visitorsName")
|
|
443
|
+
return { message: `Hello, ${name}` }
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
export default function Invoices() {
|
|
447
|
+
const data = useActionData()
|
|
448
|
+
return (
|
|
449
|
+
<Form method="post">
|
|
450
|
+
<input type="text" name="visitorsName" />
|
|
451
|
+
{data ? data.message : "Waiting..."}
|
|
452
|
+
</Form>
|
|
453
|
+
)
|
|
454
|
+
}
|
|
455
|
+
```
|
|
456
|
+
|
|
457
|
+
@category Hooks
|
|
621
458
|
*/
|
|
622
|
-
declare function
|
|
459
|
+
declare function useActionData<T = any>(): SerializeFrom<T> | undefined;
|
|
623
460
|
/**
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
461
|
+
Accesses the error thrown during an {@link ActionFunction | action}, {@link LoaderFunction | loader}, or component render to be used in a route module Error Boundary.
|
|
462
|
+
|
|
463
|
+
```tsx
|
|
464
|
+
export function ErrorBoundary() {
|
|
465
|
+
const error = useRouteError();
|
|
466
|
+
return <div>{error.message}</div>;
|
|
467
|
+
}
|
|
468
|
+
```
|
|
469
|
+
|
|
470
|
+
@category Hooks
|
|
629
471
|
*/
|
|
630
|
-
declare function
|
|
472
|
+
declare function useRouteError(): unknown;
|
|
631
473
|
/**
|
|
632
|
-
|
|
474
|
+
Returns the resolved promise value from the closest {@link Await | `<Await>`}.
|
|
475
|
+
|
|
476
|
+
```tsx
|
|
477
|
+
function SomeDescendant() {
|
|
478
|
+
const value = useAsyncValue();
|
|
479
|
+
// ...
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
// somewhere in your app
|
|
483
|
+
<Await resolve={somePromise}>
|
|
484
|
+
<SomeDescendant />
|
|
485
|
+
</Await>
|
|
486
|
+
```
|
|
487
|
+
|
|
488
|
+
@category Hooks
|
|
633
489
|
*/
|
|
634
|
-
|
|
635
|
-
(to: To, options?: NavigateOptions): void | Promise<void>;
|
|
636
|
-
(delta: number): void | Promise<void>;
|
|
637
|
-
}
|
|
490
|
+
declare function useAsyncValue(): unknown;
|
|
638
491
|
/**
|
|
639
|
-
Returns
|
|
492
|
+
Returns the rejection value from the closest {@link Await | `<Await>`}.
|
|
640
493
|
|
|
641
494
|
```tsx
|
|
642
|
-
import {
|
|
495
|
+
import { Await, useAsyncError } from "react-router"
|
|
643
496
|
|
|
644
|
-
function
|
|
645
|
-
|
|
497
|
+
function ErrorElement() {
|
|
498
|
+
const error = useAsyncError();
|
|
646
499
|
return (
|
|
647
|
-
<
|
|
648
|
-
onClick={() => {
|
|
649
|
-
navigate(-1);
|
|
650
|
-
}}
|
|
651
|
-
/>
|
|
500
|
+
<p>Uh Oh, something went wrong! {error.message}</p>
|
|
652
501
|
);
|
|
653
502
|
}
|
|
654
|
-
```
|
|
655
503
|
|
|
656
|
-
|
|
504
|
+
// somewhere in your app
|
|
505
|
+
<Await
|
|
506
|
+
resolve={promiseThatRejects}
|
|
507
|
+
errorElement={<ErrorElement />}
|
|
508
|
+
/>
|
|
509
|
+
```
|
|
657
510
|
|
|
658
511
|
@category Hooks
|
|
659
512
|
*/
|
|
660
|
-
declare function
|
|
513
|
+
declare function useAsyncError(): unknown;
|
|
661
514
|
/**
|
|
662
|
-
*
|
|
515
|
+
* Allow the application to block navigations within the SPA and present the
|
|
516
|
+
* user a confirmation dialog to confirm the navigation. Mostly used to avoid
|
|
517
|
+
* using half-filled form data. This does not handle hard-reloads or
|
|
518
|
+
* cross-origin navigations.
|
|
663
519
|
*
|
|
664
520
|
* @category Hooks
|
|
665
521
|
*/
|
|
666
|
-
declare function
|
|
522
|
+
declare function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker;
|
|
523
|
+
|
|
524
|
+
/**
|
|
525
|
+
* @private
|
|
526
|
+
*/
|
|
527
|
+
declare function mapRouteProperties(route: RouteObject): Partial<RouteObject> & {
|
|
528
|
+
hasErrorBoundary: boolean;
|
|
529
|
+
};
|
|
530
|
+
declare const hydrationRouteProperties: (keyof RouteObject)[];
|
|
531
|
+
interface MemoryRouterOpts {
|
|
532
|
+
/**
|
|
533
|
+
* Basename path for the application.
|
|
534
|
+
*/
|
|
535
|
+
basename?: string;
|
|
536
|
+
/**
|
|
537
|
+
* Function to provide the initial context values for all client side navigations/fetches
|
|
538
|
+
*/
|
|
539
|
+
unstable_getContext?: RouterInit["unstable_getContext"];
|
|
540
|
+
/**
|
|
541
|
+
* Future flags to enable for the router.
|
|
542
|
+
*/
|
|
543
|
+
future?: Partial<FutureConfig$1>;
|
|
544
|
+
/**
|
|
545
|
+
* Hydration data to initialize the router with if you have already performed
|
|
546
|
+
* data loading on the server.
|
|
547
|
+
*/
|
|
548
|
+
hydrationData?: HydrationState;
|
|
549
|
+
/**
|
|
550
|
+
* Initial entires in the in-memory history stack
|
|
551
|
+
*/
|
|
552
|
+
initialEntries?: InitialEntry[];
|
|
553
|
+
/**
|
|
554
|
+
* Index of `initialEntries` the application should initialize to
|
|
555
|
+
*/
|
|
556
|
+
initialIndex?: number;
|
|
557
|
+
/**
|
|
558
|
+
* Override the default data strategy of loading in parallel.
|
|
559
|
+
* Only intended for advanced usage.
|
|
560
|
+
*/
|
|
561
|
+
dataStrategy?: DataStrategyFunction;
|
|
562
|
+
/**
|
|
563
|
+
* Lazily define portions of the route tree on navigations.
|
|
564
|
+
*/
|
|
565
|
+
patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
|
|
566
|
+
}
|
|
567
|
+
/**
|
|
568
|
+
* Create a new data router that manages the application path using an in-memory
|
|
569
|
+
* history stack. Useful for non-browser environments without a DOM API.
|
|
570
|
+
*
|
|
571
|
+
* @category Data Routers
|
|
572
|
+
*/
|
|
573
|
+
declare function createMemoryRouter(
|
|
574
|
+
/**
|
|
575
|
+
* Application routes
|
|
576
|
+
*/
|
|
577
|
+
routes: RouteObject[],
|
|
578
|
+
/**
|
|
579
|
+
* Router options
|
|
580
|
+
*/
|
|
581
|
+
opts?: MemoryRouterOpts): Router$1;
|
|
582
|
+
interface RouterProviderProps {
|
|
583
|
+
router: Router$1;
|
|
584
|
+
flushSync?: (fn: () => unknown) => undefined;
|
|
585
|
+
}
|
|
586
|
+
/**
|
|
587
|
+
* Given a Remix Router instance, render the appropriate UI
|
|
588
|
+
*/
|
|
589
|
+
declare function RouterProvider({ router, flushSync: reactDomFlushSyncImpl, }: RouterProviderProps): React.ReactElement;
|
|
590
|
+
/**
|
|
591
|
+
* @category Types
|
|
592
|
+
*/
|
|
593
|
+
interface MemoryRouterProps {
|
|
594
|
+
basename?: string;
|
|
595
|
+
children?: React.ReactNode;
|
|
596
|
+
initialEntries?: InitialEntry[];
|
|
597
|
+
initialIndex?: number;
|
|
598
|
+
}
|
|
667
599
|
/**
|
|
668
|
-
*
|
|
669
|
-
* hierarchy. Used internally by `<Outlet>` to render child routes.
|
|
600
|
+
* A `<Router>` that stores all entries in memory.
|
|
670
601
|
*
|
|
671
|
-
* @category
|
|
672
|
-
*/
|
|
673
|
-
declare function useOutlet(context?: unknown): React.ReactElement | null;
|
|
674
|
-
/**
|
|
675
|
-
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.
|
|
676
|
-
|
|
677
|
-
```tsx
|
|
678
|
-
import { useParams } from "react-router"
|
|
679
|
-
|
|
680
|
-
function SomeComponent() {
|
|
681
|
-
let params = useParams()
|
|
682
|
-
params.postId
|
|
683
|
-
}
|
|
684
|
-
```
|
|
685
|
-
|
|
686
|
-
Assuming a route pattern like `/posts/:postId` is matched by `/posts/123` then `params.postId` will be `"123"`.
|
|
687
|
-
|
|
688
|
-
@category Hooks
|
|
602
|
+
* @category Component Routers
|
|
689
603
|
*/
|
|
690
|
-
declare function
|
|
691
|
-
ParamsOrKey
|
|
692
|
-
] extends [string] ? Params<ParamsOrKey> : Partial<ParamsOrKey>>;
|
|
604
|
+
declare function MemoryRouter({ basename, children, initialEntries, initialIndex, }: MemoryRouterProps): React.ReactElement;
|
|
693
605
|
/**
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
```tsx
|
|
697
|
-
import { useResolvedPath } from "react-router"
|
|
698
|
-
|
|
699
|
-
function SomeComponent() {
|
|
700
|
-
// if the user is at /dashboard/profile
|
|
701
|
-
let path = useResolvedPath("../accounts")
|
|
702
|
-
path.pathname // "/dashboard/accounts"
|
|
703
|
-
path.search // ""
|
|
704
|
-
path.hash // ""
|
|
705
|
-
}
|
|
706
|
-
```
|
|
707
|
-
|
|
708
|
-
@category Hooks
|
|
606
|
+
* @category Types
|
|
709
607
|
*/
|
|
710
|
-
|
|
608
|
+
interface NavigateProps {
|
|
609
|
+
to: To;
|
|
610
|
+
replace?: boolean;
|
|
611
|
+
state?: any;
|
|
711
612
|
relative?: RelativeRoutingType;
|
|
712
|
-
}
|
|
613
|
+
}
|
|
713
614
|
/**
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
function App() {
|
|
723
|
-
let element = useRoutes([
|
|
724
|
-
{
|
|
725
|
-
path: "/",
|
|
726
|
-
element: <Dashboard />,
|
|
727
|
-
children: [
|
|
728
|
-
{
|
|
729
|
-
path: "messages",
|
|
730
|
-
element: <DashboardMessages />,
|
|
731
|
-
},
|
|
732
|
-
{ path: "tasks", element: <DashboardTasks /> },
|
|
733
|
-
],
|
|
734
|
-
},
|
|
735
|
-
{ path: "team", element: <AboutPage /> },
|
|
736
|
-
]);
|
|
737
|
-
|
|
738
|
-
return element;
|
|
739
|
-
}
|
|
740
|
-
```
|
|
741
|
-
|
|
742
|
-
@category Hooks
|
|
615
|
+
* A component-based version of {@link useNavigate} to use in a [`React.Component
|
|
616
|
+
* Class`](https://reactjs.org/docs/react-component.html) where hooks are not
|
|
617
|
+
* able to be used.
|
|
618
|
+
*
|
|
619
|
+
* It's recommended to avoid using this component in favor of {@link useNavigate}
|
|
620
|
+
*
|
|
621
|
+
* @category Components
|
|
743
622
|
*/
|
|
744
|
-
declare function
|
|
623
|
+
declare function Navigate({ to, replace, state, relative, }: NavigateProps): null;
|
|
745
624
|
/**
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
```tsx
|
|
749
|
-
import { useNavigation } from "react-router"
|
|
750
|
-
|
|
751
|
-
function SomeComponent() {
|
|
752
|
-
let navigation = useNavigation();
|
|
753
|
-
navigation.state
|
|
754
|
-
navigation.formData
|
|
755
|
-
// etc.
|
|
756
|
-
}
|
|
757
|
-
```
|
|
758
|
-
|
|
759
|
-
@category Hooks
|
|
625
|
+
* @category Types
|
|
760
626
|
*/
|
|
761
|
-
|
|
627
|
+
interface OutletProps {
|
|
628
|
+
/**
|
|
629
|
+
Provides a context value to the element tree below the outlet. Use when the parent route needs to provide values to child routes.
|
|
630
|
+
|
|
631
|
+
```tsx
|
|
632
|
+
<Outlet context={myContextValue} />
|
|
633
|
+
```
|
|
634
|
+
|
|
635
|
+
Access the context with {@link useOutletContext}.
|
|
636
|
+
*/
|
|
637
|
+
context?: unknown;
|
|
638
|
+
}
|
|
762
639
|
/**
|
|
763
|
-
|
|
640
|
+
Renders the matching child route of a parent route or nothing if no child route matches.
|
|
764
641
|
|
|
765
642
|
```tsx
|
|
766
|
-
import {
|
|
767
|
-
|
|
768
|
-
function WindowFocusRevalidator() {
|
|
769
|
-
const revalidator = useRevalidator();
|
|
770
|
-
|
|
771
|
-
useFakeWindowFocus(() => {
|
|
772
|
-
revalidator.revalidate();
|
|
773
|
-
});
|
|
643
|
+
import { Outlet } from "react-router"
|
|
774
644
|
|
|
645
|
+
export default function SomeParent() {
|
|
775
646
|
return (
|
|
776
|
-
<div
|
|
777
|
-
|
|
647
|
+
<div>
|
|
648
|
+
<h1>Parent Content</h1>
|
|
649
|
+
<Outlet />
|
|
778
650
|
</div>
|
|
779
651
|
);
|
|
780
652
|
}
|
|
781
653
|
```
|
|
782
654
|
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
@category Hooks
|
|
655
|
+
@category Components
|
|
786
656
|
*/
|
|
787
|
-
declare function
|
|
788
|
-
revalidate: () => Promise<void>;
|
|
789
|
-
state: Router$1["state"]["revalidation"];
|
|
790
|
-
};
|
|
657
|
+
declare function Outlet(props: OutletProps): React.ReactElement | null;
|
|
791
658
|
/**
|
|
792
|
-
*
|
|
793
|
-
|
|
659
|
+
* @category Types
|
|
660
|
+
*/
|
|
661
|
+
interface PathRouteProps {
|
|
662
|
+
caseSensitive?: NonIndexRouteObject["caseSensitive"];
|
|
663
|
+
path?: NonIndexRouteObject["path"];
|
|
664
|
+
id?: NonIndexRouteObject["id"];
|
|
665
|
+
lazy?: LazyRouteFunction<NonIndexRouteObject>;
|
|
666
|
+
loader?: NonIndexRouteObject["loader"];
|
|
667
|
+
action?: NonIndexRouteObject["action"];
|
|
668
|
+
hasErrorBoundary?: NonIndexRouteObject["hasErrorBoundary"];
|
|
669
|
+
shouldRevalidate?: NonIndexRouteObject["shouldRevalidate"];
|
|
670
|
+
handle?: NonIndexRouteObject["handle"];
|
|
671
|
+
index?: false;
|
|
672
|
+
children?: React.ReactNode;
|
|
673
|
+
element?: React.ReactNode | null;
|
|
674
|
+
hydrateFallbackElement?: React.ReactNode | null;
|
|
675
|
+
errorElement?: React.ReactNode | null;
|
|
676
|
+
Component?: React.ComponentType | null;
|
|
677
|
+
HydrateFallback?: React.ComponentType | null;
|
|
678
|
+
ErrorBoundary?: React.ComponentType | null;
|
|
679
|
+
}
|
|
680
|
+
/**
|
|
681
|
+
* @category Types
|
|
682
|
+
*/
|
|
683
|
+
interface LayoutRouteProps extends PathRouteProps {
|
|
684
|
+
}
|
|
685
|
+
/**
|
|
686
|
+
* @category Types
|
|
687
|
+
*/
|
|
688
|
+
interface IndexRouteProps {
|
|
689
|
+
caseSensitive?: IndexRouteObject["caseSensitive"];
|
|
690
|
+
path?: IndexRouteObject["path"];
|
|
691
|
+
id?: IndexRouteObject["id"];
|
|
692
|
+
lazy?: LazyRouteFunction<IndexRouteObject>;
|
|
693
|
+
loader?: IndexRouteObject["loader"];
|
|
694
|
+
action?: IndexRouteObject["action"];
|
|
695
|
+
hasErrorBoundary?: IndexRouteObject["hasErrorBoundary"];
|
|
696
|
+
shouldRevalidate?: IndexRouteObject["shouldRevalidate"];
|
|
697
|
+
handle?: IndexRouteObject["handle"];
|
|
698
|
+
index: true;
|
|
699
|
+
children?: undefined;
|
|
700
|
+
element?: React.ReactNode | null;
|
|
701
|
+
hydrateFallbackElement?: React.ReactNode | null;
|
|
702
|
+
errorElement?: React.ReactNode | null;
|
|
703
|
+
Component?: React.ComponentType | null;
|
|
704
|
+
HydrateFallback?: React.ComponentType | null;
|
|
705
|
+
ErrorBoundary?: React.ComponentType | null;
|
|
706
|
+
}
|
|
707
|
+
type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;
|
|
708
|
+
/**
|
|
709
|
+
* Configures an element to render when a pattern matches the current location.
|
|
710
|
+
* It must be rendered within a {@link Routes} element. Note that these routes
|
|
711
|
+
* do not participate in data loading, actions, code splitting, or any other
|
|
712
|
+
* route module features.
|
|
794
713
|
*
|
|
795
|
-
* @category
|
|
714
|
+
* @category Components
|
|
796
715
|
*/
|
|
797
|
-
declare function
|
|
716
|
+
declare function Route(_props: RouteProps): React.ReactElement | null;
|
|
798
717
|
/**
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
```tsx
|
|
802
|
-
import { useLoaderData } from "react-router"
|
|
803
|
-
|
|
804
|
-
export async function loader() {
|
|
805
|
-
return await fakeDb.invoices.findAll();
|
|
806
|
-
}
|
|
807
|
-
|
|
808
|
-
export default function Invoices() {
|
|
809
|
-
let invoices = useLoaderData<typeof loader>();
|
|
810
|
-
// ...
|
|
811
|
-
}
|
|
812
|
-
```
|
|
813
|
-
|
|
814
|
-
@category Hooks
|
|
718
|
+
* @category Types
|
|
815
719
|
*/
|
|
816
|
-
|
|
720
|
+
interface RouterProps {
|
|
721
|
+
basename?: string;
|
|
722
|
+
children?: React.ReactNode;
|
|
723
|
+
location: Partial<Location> | string;
|
|
724
|
+
navigationType?: Action;
|
|
725
|
+
navigator: Navigator;
|
|
726
|
+
static?: boolean;
|
|
727
|
+
}
|
|
817
728
|
/**
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
}
|
|
826
|
-
```
|
|
827
|
-
|
|
828
|
-
Route IDs are created automatically. They are simply the path of the route file relative to the app folder without the extension.
|
|
829
|
-
|
|
830
|
-
| Route Filename | Route ID |
|
|
831
|
-
| -------------------------- | -------------------- |
|
|
832
|
-
| `app/root.tsx` | `"root"` |
|
|
833
|
-
| `app/routes/teams.tsx` | `"routes/teams"` |
|
|
834
|
-
| `app/whatever/teams.$id.tsx` | `"whatever/teams.$id"` |
|
|
835
|
-
|
|
836
|
-
If you created an ID manually, you can use that instead:
|
|
837
|
-
|
|
838
|
-
```tsx
|
|
839
|
-
route("/", "containers/app.tsx", { id: "app" }})
|
|
840
|
-
```
|
|
841
|
-
|
|
842
|
-
@category Hooks
|
|
729
|
+
* Provides location context for the rest of the app.
|
|
730
|
+
*
|
|
731
|
+
* Note: You usually won't render a `<Router>` directly. Instead, you'll render a
|
|
732
|
+
* router that is more specific to your environment such as a `<BrowserRouter>`
|
|
733
|
+
* in web browsers or a `<StaticRouter>` for server rendering.
|
|
734
|
+
*
|
|
735
|
+
* @category Components
|
|
843
736
|
*/
|
|
844
|
-
declare function
|
|
737
|
+
declare function Router({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp, }: RouterProps): React.ReactElement | null;
|
|
845
738
|
/**
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
739
|
+
* @category Types
|
|
740
|
+
*/
|
|
741
|
+
interface RoutesProps {
|
|
742
|
+
/**
|
|
743
|
+
* Nested {@link Route} elements
|
|
744
|
+
*/
|
|
745
|
+
children?: React.ReactNode;
|
|
746
|
+
/**
|
|
747
|
+
* The location to match against. Defaults to the current location.
|
|
748
|
+
*/
|
|
749
|
+
location?: Partial<Location> | string;
|
|
750
|
+
}
|
|
751
|
+
/**
|
|
752
|
+
Renders a branch of {@link Route | `<Routes>`} that best matches the current
|
|
753
|
+
location. Note that these routes do not participate in data loading, actions,
|
|
754
|
+
code splitting, or any other route module features.
|
|
850
755
|
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
const name = body.get("visitorsName")
|
|
854
|
-
return { message: `Hello, ${name}` }
|
|
855
|
-
}
|
|
756
|
+
```tsx
|
|
757
|
+
import { Routes, Route } from "react-router"
|
|
856
758
|
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
</Form>
|
|
864
|
-
)
|
|
865
|
-
}
|
|
866
|
-
```
|
|
759
|
+
<Routes>
|
|
760
|
+
<Route index element={<StepOne />} />
|
|
761
|
+
<Route path="step-2" element={<StepTwo />} />
|
|
762
|
+
<Route path="step-3" element={<StepThree />}>
|
|
763
|
+
</Routes>
|
|
764
|
+
```
|
|
867
765
|
|
|
868
|
-
|
|
766
|
+
@category Components
|
|
869
767
|
*/
|
|
870
|
-
declare function
|
|
768
|
+
declare function Routes({ children, location, }: RoutesProps): React.ReactElement | null;
|
|
769
|
+
interface AwaitResolveRenderFunction<Resolve = any> {
|
|
770
|
+
(data: Awaited<Resolve>): React.ReactNode;
|
|
771
|
+
}
|
|
871
772
|
/**
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
```tsx
|
|
875
|
-
export function ErrorBoundary() {
|
|
876
|
-
const error = useRouteError();
|
|
877
|
-
return <div>{error.message}</div>;
|
|
878
|
-
}
|
|
879
|
-
```
|
|
880
|
-
|
|
881
|
-
@category Hooks
|
|
773
|
+
* @category Types
|
|
882
774
|
*/
|
|
883
|
-
|
|
775
|
+
interface AwaitProps<Resolve> {
|
|
776
|
+
/**
|
|
777
|
+
When using a function, the resolved value is provided as the parameter.
|
|
778
|
+
|
|
779
|
+
```tsx [2]
|
|
780
|
+
<Await resolve={reviewsPromise}>
|
|
781
|
+
{(resolvedReviews) => <Reviews items={resolvedReviews} />}
|
|
782
|
+
</Await>
|
|
783
|
+
```
|
|
784
|
+
|
|
785
|
+
When using React elements, {@link useAsyncValue} will provide the
|
|
786
|
+
resolved value:
|
|
787
|
+
|
|
788
|
+
```tsx [2]
|
|
789
|
+
<Await resolve={reviewsPromise}>
|
|
790
|
+
<Reviews />
|
|
791
|
+
</Await>
|
|
792
|
+
|
|
793
|
+
function Reviews() {
|
|
794
|
+
const resolvedReviews = useAsyncValue()
|
|
795
|
+
return <div>...</div>
|
|
796
|
+
}
|
|
797
|
+
```
|
|
798
|
+
*/
|
|
799
|
+
children: React.ReactNode | AwaitResolveRenderFunction<Resolve>;
|
|
800
|
+
/**
|
|
801
|
+
The error element renders instead of the children when the promise rejects.
|
|
802
|
+
|
|
803
|
+
```tsx
|
|
804
|
+
<Await
|
|
805
|
+
errorElement={<div>Oops</div>}
|
|
806
|
+
resolve={reviewsPromise}
|
|
807
|
+
>
|
|
808
|
+
<Reviews />
|
|
809
|
+
</Await>
|
|
810
|
+
```
|
|
811
|
+
|
|
812
|
+
To provide a more contextual error, you can use the {@link useAsyncError} in a
|
|
813
|
+
child component
|
|
814
|
+
|
|
815
|
+
```tsx
|
|
816
|
+
<Await
|
|
817
|
+
errorElement={<ReviewsError />}
|
|
818
|
+
resolve={reviewsPromise}
|
|
819
|
+
>
|
|
820
|
+
<Reviews />
|
|
821
|
+
</Await>
|
|
822
|
+
|
|
823
|
+
function ReviewsError() {
|
|
824
|
+
const error = useAsyncError()
|
|
825
|
+
return <div>Error loading reviews: {error.message}</div>
|
|
826
|
+
}
|
|
827
|
+
```
|
|
828
|
+
|
|
829
|
+
If you do not provide an errorElement, the rejected value will bubble up to
|
|
830
|
+
the nearest route-level {@link NonIndexRouteObject#ErrorBoundary | ErrorBoundary} and be accessible
|
|
831
|
+
via {@link useRouteError} hook.
|
|
832
|
+
*/
|
|
833
|
+
errorElement?: React.ReactNode;
|
|
834
|
+
/**
|
|
835
|
+
Takes a promise returned from a {@link LoaderFunction | loader} value to be resolved and rendered.
|
|
836
|
+
|
|
837
|
+
```jsx
|
|
838
|
+
import { useLoaderData, Await } from "react-router"
|
|
839
|
+
|
|
840
|
+
export async function loader() {
|
|
841
|
+
let reviews = getReviews() // not awaited
|
|
842
|
+
let book = await getBook()
|
|
843
|
+
return {
|
|
844
|
+
book,
|
|
845
|
+
reviews, // this is a promise
|
|
846
|
+
}
|
|
847
|
+
}
|
|
848
|
+
|
|
849
|
+
export default function Book() {
|
|
850
|
+
const {
|
|
851
|
+
book,
|
|
852
|
+
reviews, // this is the same promise
|
|
853
|
+
} = useLoaderData()
|
|
854
|
+
|
|
855
|
+
return (
|
|
856
|
+
<div>
|
|
857
|
+
<h1>{book.title}</h1>
|
|
858
|
+
<p>{book.description}</p>
|
|
859
|
+
<React.Suspense fallback={<ReviewsSkeleton />}>
|
|
860
|
+
<Await
|
|
861
|
+
// and is the promise we pass to Await
|
|
862
|
+
resolve={reviews}
|
|
863
|
+
>
|
|
864
|
+
<Reviews />
|
|
865
|
+
</Await>
|
|
866
|
+
</React.Suspense>
|
|
867
|
+
</div>
|
|
868
|
+
);
|
|
869
|
+
}
|
|
870
|
+
```
|
|
871
|
+
*/
|
|
872
|
+
resolve: Resolve;
|
|
873
|
+
}
|
|
884
874
|
/**
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
```tsx
|
|
888
|
-
function SomeDescendant() {
|
|
889
|
-
const value = useAsyncValue();
|
|
890
|
-
// ...
|
|
891
|
-
}
|
|
875
|
+
Used to render promise values with automatic error handling.
|
|
892
876
|
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
<SomeDescendant />
|
|
896
|
-
</Await>
|
|
897
|
-
```
|
|
877
|
+
```tsx
|
|
878
|
+
import { Await, useLoaderData } from "react-router";
|
|
898
879
|
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
880
|
+
export function loader() {
|
|
881
|
+
// not awaited
|
|
882
|
+
const reviews = getReviews()
|
|
883
|
+
// awaited (blocks the transition)
|
|
884
|
+
const book = await fetch("/api/book").then((res) => res.json())
|
|
885
|
+
return { book, reviews }
|
|
886
|
+
}
|
|
904
887
|
|
|
905
|
-
|
|
906
|
-
|
|
888
|
+
function Book() {
|
|
889
|
+
const { book, reviews } = useLoaderData();
|
|
890
|
+
return (
|
|
891
|
+
<div>
|
|
892
|
+
<h1>{book.title}</h1>
|
|
893
|
+
<p>{book.description}</p>
|
|
894
|
+
<React.Suspense fallback={<ReviewsSkeleton />}>
|
|
895
|
+
<Await
|
|
896
|
+
resolve={reviews}
|
|
897
|
+
errorElement={
|
|
898
|
+
<div>Could not load reviews 😬</div>
|
|
899
|
+
}
|
|
900
|
+
children={(resolvedReviews) => (
|
|
901
|
+
<Reviews items={resolvedReviews} />
|
|
902
|
+
)}
|
|
903
|
+
/>
|
|
904
|
+
</React.Suspense>
|
|
905
|
+
</div>
|
|
906
|
+
);
|
|
907
|
+
}
|
|
908
|
+
```
|
|
907
909
|
|
|
908
|
-
|
|
909
|
-
const error = useAsyncError();
|
|
910
|
-
return (
|
|
911
|
-
<p>Uh Oh, something went wrong! {error.message}</p>
|
|
912
|
-
);
|
|
913
|
-
}
|
|
910
|
+
**Note:** `<Await>` expects to be rendered inside of a `<React.Suspense>`
|
|
914
911
|
|
|
915
|
-
|
|
916
|
-
<Await
|
|
917
|
-
resolve={promiseThatRejects}
|
|
918
|
-
errorElement={<ErrorElement />}
|
|
919
|
-
/>
|
|
920
|
-
```
|
|
912
|
+
@category Components
|
|
921
913
|
|
|
922
|
-
|
|
914
|
+
*/
|
|
915
|
+
declare function Await<Resolve>({ children, errorElement, resolve, }: AwaitProps<Resolve>): React.JSX.Element;
|
|
916
|
+
/**
|
|
917
|
+
* Creates a route config from a React "children" object, which is usually
|
|
918
|
+
* either a `<Route>` element or an array of them. Used internally by
|
|
919
|
+
* `<Routes>` to create a route config from its children.
|
|
920
|
+
*
|
|
921
|
+
* @category Utils
|
|
923
922
|
*/
|
|
924
|
-
declare function
|
|
923
|
+
declare function createRoutesFromChildren(children: React.ReactNode, parentPath?: number[]): RouteObject[];
|
|
925
924
|
/**
|
|
926
|
-
*
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
925
|
+
* Create route objects from JSX elements instead of arrays of objects
|
|
926
|
+
*/
|
|
927
|
+
declare let createRoutesFromElements: typeof createRoutesFromChildren;
|
|
928
|
+
/**
|
|
929
|
+
* Renders the result of `matchRoutes()` into a React element.
|
|
930
930
|
*
|
|
931
|
-
* @category
|
|
931
|
+
* @category Utils
|
|
932
932
|
*/
|
|
933
|
-
declare function
|
|
933
|
+
declare function renderMatches(matches: RouteMatch[] | null): React.ReactElement | null;
|
|
934
|
+
type RouteComponentType = React.ComponentType<{
|
|
935
|
+
params: ReturnType<typeof useParams>;
|
|
936
|
+
loaderData: ReturnType<typeof useLoaderData>;
|
|
937
|
+
actionData: ReturnType<typeof useActionData>;
|
|
938
|
+
matches: ReturnType<typeof useMatches>;
|
|
939
|
+
}>;
|
|
940
|
+
declare function withComponentProps(Component: RouteComponentType): () => React.ReactElement<{
|
|
941
|
+
params: Readonly<Partial<string | Record<string, string | undefined>>>;
|
|
942
|
+
loaderData: unknown;
|
|
943
|
+
actionData: unknown;
|
|
944
|
+
matches: UIMatch<unknown, unknown>[];
|
|
945
|
+
}, string | React.JSXElementConstructor<any>>;
|
|
946
|
+
type HydrateFallbackType = React.ComponentType<{
|
|
947
|
+
params: ReturnType<typeof useParams>;
|
|
948
|
+
loaderData: ReturnType<typeof useLoaderData>;
|
|
949
|
+
actionData: ReturnType<typeof useActionData>;
|
|
950
|
+
}>;
|
|
951
|
+
declare function withHydrateFallbackProps(HydrateFallback: HydrateFallbackType): () => React.ReactElement<{
|
|
952
|
+
params: Readonly<Partial<string | Record<string, string | undefined>>>;
|
|
953
|
+
loaderData: unknown;
|
|
954
|
+
actionData: unknown;
|
|
955
|
+
}, string | React.JSXElementConstructor<any>>;
|
|
956
|
+
type ErrorBoundaryType = React.ComponentType<{
|
|
957
|
+
params: ReturnType<typeof useParams>;
|
|
958
|
+
loaderData: ReturnType<typeof useLoaderData>;
|
|
959
|
+
actionData: ReturnType<typeof useActionData>;
|
|
960
|
+
error: ReturnType<typeof useRouteError>;
|
|
961
|
+
}>;
|
|
962
|
+
declare function withErrorBoundaryProps(ErrorBoundary: ErrorBoundaryType): () => React.ReactElement<{
|
|
963
|
+
params: Readonly<Partial<string | Record<string, string | undefined>>>;
|
|
964
|
+
loaderData: unknown;
|
|
965
|
+
actionData: unknown;
|
|
966
|
+
error: unknown;
|
|
967
|
+
}, string | React.JSXElementConstructor<any>>;
|
|
934
968
|
|
|
935
969
|
type ParamKeyValuePair = [string, string];
|
|
936
970
|
type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams;
|
|
@@ -2172,23 +2206,9 @@ interface ServerRouterProps {
|
|
|
2172
2206
|
declare function ServerRouter({ context, url, nonce, }: ServerRouterProps): ReactElement;
|
|
2173
2207
|
|
|
2174
2208
|
interface StubRouteExtensions {
|
|
2175
|
-
Component?:
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
actionData: ReturnType<typeof useActionData>;
|
|
2179
|
-
matches: ReturnType<typeof useMatches>;
|
|
2180
|
-
}>;
|
|
2181
|
-
HydrateFallback?: React.ComponentType<{
|
|
2182
|
-
params: ReturnType<typeof useParams>;
|
|
2183
|
-
loaderData: ReturnType<typeof useLoaderData>;
|
|
2184
|
-
actionData: ReturnType<typeof useActionData>;
|
|
2185
|
-
}>;
|
|
2186
|
-
ErrorBoundary?: React.ComponentType<{
|
|
2187
|
-
params: ReturnType<typeof useParams>;
|
|
2188
|
-
loaderData: ReturnType<typeof useLoaderData>;
|
|
2189
|
-
actionData: ReturnType<typeof useActionData>;
|
|
2190
|
-
error: ReturnType<typeof useRouteError>;
|
|
2191
|
-
}>;
|
|
2209
|
+
Component?: RouteComponentType;
|
|
2210
|
+
HydrateFallback?: HydrateFallbackType;
|
|
2211
|
+
ErrorBoundary?: ErrorBoundaryType;
|
|
2192
2212
|
loader?: LoaderFunction;
|
|
2193
2213
|
action?: ActionFunction;
|
|
2194
2214
|
children?: StubRouteObject[];
|
|
@@ -2528,4 +2548,4 @@ declare function getHydrationData(state: {
|
|
|
2528
2548
|
hasHydrateFallback: boolean;
|
|
2529
2549
|
}, location: Path, basename: string | undefined, isSpaMode: boolean): HydrationState;
|
|
2530
2550
|
|
|
2531
|
-
export { ActionFunction, ActionFunctionArgs, AppLoadContext, Await, type AwaitProps, Blocker, BlockerFunction, BrowserRouter, type BrowserRouterProps, ClientLoaderFunction, type Cookie, type CookieOptions, type CookieSignatureOptions, type CreateRequestHandlerFunction, type DOMRouterOpts, DataRouteObject, Router$1 as DataRouter, DataStrategyFunction, type EntryContext, Fetcher, type FetcherFormProps, type FetcherSubmitFunction, type FetcherSubmitOptions, type FetcherWithComponents, type FlashSessionData, Form, FormEncType, type FormProps, GetScrollRestorationKeyFunction, HTMLFormMethod, type HandleDataRequestFunction, type HandleDocumentRequestFunction, type HandleErrorFunction, HashRouter, type HashRouterProps, type HistoryRouterProps, HydrationState, IndexRouteObject, type IndexRouteProps, InitialEntry, type IsCookieFunction, type IsSessionFunction, type LayoutRouteProps, LazyRouteFunction, Link, type LinkProps, Links, LinksFunction, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouter, type MemoryRouterOpts, type MemoryRouterProps, Meta, MetaFunction, NavLink, type NavLinkProps, type NavLinkRenderProps, Navigate, type NavigateFunction, NavigateOptions, type NavigateProps, Navigation, Action as NavigationType, Navigator, NonIndexRouteObject, Outlet, type OutletProps, PageLinkDescriptor, type ParamKeyValuePair, ParamParseKey, Params, PatchRoutesOnNavigationFunction, Path, PathMatch, PathPattern, type PathRouteProps, PrefetchPageLinks, RelativeRoutingType, type RequestHandler, Route
|
|
2551
|
+
export { ActionFunction, ActionFunctionArgs, AppLoadContext, Await, type AwaitProps, Blocker, BlockerFunction, BrowserRouter, type BrowserRouterProps, ClientLoaderFunction, type Cookie, type CookieOptions, type CookieSignatureOptions, type CreateRequestHandlerFunction, type DOMRouterOpts, DataRouteObject, Router$1 as DataRouter, DataStrategyFunction, type EntryContext, Fetcher, type FetcherFormProps, type FetcherSubmitFunction, type FetcherSubmitOptions, type FetcherWithComponents, type FlashSessionData, Form, FormEncType, type FormProps, GetScrollRestorationKeyFunction, HTMLFormMethod, type HandleDataRequestFunction, type HandleDocumentRequestFunction, type HandleErrorFunction, HashRouter, type HashRouterProps, type HistoryRouterProps, HydrationState, IndexRouteObject, type IndexRouteProps, InitialEntry, type IsCookieFunction, type IsSessionFunction, type LayoutRouteProps, LazyRouteFunction, Link, type LinkProps, Links, LinksFunction, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouter, type MemoryRouterOpts, type MemoryRouterProps, Meta, MetaFunction, NavLink, type NavLinkProps, type NavLinkRenderProps, Navigate, type NavigateFunction, NavigateOptions, type NavigateProps, Navigation, Action as NavigationType, Navigator, NonIndexRouteObject, Outlet, type OutletProps, PageLinkDescriptor, type ParamKeyValuePair, ParamParseKey, Params, PatchRoutesOnNavigationFunction, Path, PathMatch, PathPattern, type PathRouteProps, PrefetchPageLinks, RelativeRoutingType, type RequestHandler, Route, RouteMatch, RouteObject, type RouteProps, Router, RouterInit, type RouterProps, RouterProvider, type RouterProviderProps, RouterState, Routes, type RoutesProps, type RoutesTestStubProps, Scripts, type ScriptsProps, ScrollRestoration, type ScrollRestorationProps, type ServerBuild, type ServerEntryModule, ServerRouter, type ServerRouterProps, type Session, type SessionData, type SessionIdStorageStrategy, type SessionStorage, type SetURLSearchParams, StaticHandler, StaticHandlerContext, StaticRouter, type StaticRouterProps, StaticRouterProvider, type StaticRouterProviderProps, type SubmitFunction, type SubmitOptions, type SubmitTarget, To, UIMatch, type AssetsManifest as UNSAFE_AssetsManifest, FrameworkContext as UNSAFE_FrameworkContext, MiddlewareEnabled as UNSAFE_MiddlewareEnabled, RemixErrorBoundary as UNSAFE_RemixErrorBoundary, RouteModules as UNSAFE_RouteModules, ServerMode as UNSAFE_ServerMode, SingleFetchRedirectSymbol as UNSAFE_SingleFetchRedirectSymbol, createClientRoutes as UNSAFE_createClientRoutes, createClientRoutesWithHMRRevalidationOptOut as UNSAFE_createClientRoutesWithHMRRevalidationOptOut, decodeViaTurboStream as UNSAFE_decodeViaTurboStream, deserializeErrors as UNSAFE_deserializeErrors, getHydrationData as UNSAFE_getHydrationData, getPatchRoutesOnNavigationFunction as UNSAFE_getPatchRoutesOnNavigationFunction, getTurboStreamSingleFetchDataStrategy as UNSAFE_getTurboStreamSingleFetchDataStrategy, hydrationRouteProperties as UNSAFE_hydrationRouteProperties, mapRouteProperties as UNSAFE_mapRouteProperties, shouldHydrateRouteLoader as UNSAFE_shouldHydrateRouteLoader, useFogOFWarDiscovery as UNSAFE_useFogOFWarDiscovery, useScrollRestoration as UNSAFE_useScrollRestoration, withComponentProps as UNSAFE_withComponentProps, withErrorBoundaryProps as UNSAFE_withErrorBoundaryProps, withHydrateFallbackProps as UNSAFE_withHydrateFallbackProps, type URLSearchParamsInit, createBrowserRouter, createCookie, createCookieSessionStorage, createHashRouter, createMemoryRouter, createMemorySessionStorage, createRequestHandler, createRoutesFromChildren, createRoutesFromElements, createRoutesStub, createSearchParams, createSession, createSessionStorage, createStaticHandler, createStaticRouter, href, isCookie, isSession, renderMatches, HistoryRouter as unstable_HistoryRouter, unstable_InitialContext, unstable_RouterContextProvider, setDevServerHooks as unstable_setDevServerHooks, usePrompt as unstable_usePrompt, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useBlocker, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit, useViewTransitionState };
|