react-router 0.0.0-experimental-3f68c7c20 → 0.0.0-experimental-e87ed2fd4
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/dist/development/{browser-BenyQgT4.d.mts → browser-C9OqCpRB.d.mts} +537 -136
- package/dist/development/{chunk-APN7PBP2.mjs → chunk-PVJCBITV.mjs} +65 -53
- 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 +10 -390
- package/dist/development/index.d.ts +729 -708
- package/dist/development/index.js +68 -53
- 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/register-D3Ithcl4.d.ts → development/register-zy84znbA.d.ts} +1 -1
- package/dist/{production/route-data-CBHO1x2o.d.mts → development/route-data-C-cmsWVs.d.mts} +1 -1
- package/dist/development/rsc-export.d.mts +12 -1
- package/dist/development/rsc-export.d.ts +12 -1
- package/dist/development/rsc-export.js +209 -173
- package/dist/development/rsc-export.mjs +209 -174
- package/dist/production/{browser-BenyQgT4.d.mts → browser-C9OqCpRB.d.mts} +537 -136
- package/dist/production/{chunk-SAZGQ73S.mjs → chunk-FJS6IVQF.mjs} +65 -53
- 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 +10 -390
- package/dist/production/index.d.ts +729 -708
- package/dist/production/index.js +68 -53
- 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/register-D3Ithcl4.d.ts → production/register-zy84znbA.d.ts} +1 -1
- package/dist/{development/route-data-CBHO1x2o.d.mts → production/route-data-C-cmsWVs.d.mts} +1 -1
- package/dist/production/rsc-export.d.mts +12 -1
- package/dist/production/rsc-export.d.ts +12 -1
- package/dist/production/rsc-export.js +209 -173
- package/dist/production/rsc-export.mjs +209 -174
- package/package.json +1 -1
|
@@ -1,5 +1,505 @@
|
|
|
1
|
+
import { aR as RouteManifest, aS as ServerRouteModule, h as MiddlewareEnabled, a9 as unstable_RouterContextProvider, i as AppLoadContext, Y as LoaderFunctionArgs, y as ActionFunctionArgs, S as StaticHandlerContext, b as RouteModules, H as HydrationState, k as DataRouteObject, l as ClientLoaderFunction, T as To, r as RelativeRoutingType, L as Location, aa as Action, _ as ParamParseKey, m as Path, a2 as PathPattern, a0 as PathMatch, aq as NavigateOptions, $ as Params, c as RouteObject, p as Navigation, a as Router$1, a7 as UIMatch, aT as SerializeFrom, s as BlockerFunction, B as Blocker, R as RouterInit, F as FutureConfig$1, I as InitialEntry, D as DataStrategyFunction, P as PatchRoutesOnNavigationFunction, N as NonIndexRouteObject, X as LazyRouteFunction, e as IndexRouteObject, ar as Navigator, at as RouteMatch, W as HTMLFormMethod, U as FormEncType, aB as PageLinkDescriptor, aU as History, n as GetScrollRestorationKeyFunction, o as Fetcher, au as ClientActionFunction, g as LinksFunction, M as MetaFunction, a5 as ShouldRevalidateFunction } from './route-data-C-cmsWVs.mjs';
|
|
1
2
|
import * as React from 'react';
|
|
2
|
-
|
|
3
|
+
|
|
4
|
+
type ServerRouteManifest = RouteManifest<Omit<ServerRoute, "children">>;
|
|
5
|
+
interface ServerRoute extends Route$1 {
|
|
6
|
+
children: ServerRoute[];
|
|
7
|
+
module: ServerRouteModule;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
type OptionalCriticalCss = CriticalCss | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* The output of the compiler for the server build.
|
|
13
|
+
*/
|
|
14
|
+
interface ServerBuild {
|
|
15
|
+
entry: {
|
|
16
|
+
module: ServerEntryModule;
|
|
17
|
+
};
|
|
18
|
+
routes: ServerRouteManifest;
|
|
19
|
+
assets: AssetsManifest;
|
|
20
|
+
basename?: string;
|
|
21
|
+
publicPath: string;
|
|
22
|
+
assetsBuildDirectory: string;
|
|
23
|
+
future: FutureConfig;
|
|
24
|
+
ssr: boolean;
|
|
25
|
+
unstable_getCriticalCss?: (args: {
|
|
26
|
+
pathname: string;
|
|
27
|
+
}) => OptionalCriticalCss | Promise<OptionalCriticalCss>;
|
|
28
|
+
/**
|
|
29
|
+
* @deprecated This is now done via a custom header during prerendering
|
|
30
|
+
*/
|
|
31
|
+
isSpaMode: boolean;
|
|
32
|
+
prerender: string[];
|
|
33
|
+
routeDiscovery: {
|
|
34
|
+
mode: "lazy" | "initial";
|
|
35
|
+
manifestPath: string;
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
interface HandleDocumentRequestFunction {
|
|
39
|
+
(request: Request, responseStatusCode: number, responseHeaders: Headers, context: EntryContext, loadContext: MiddlewareEnabled extends true ? unstable_RouterContextProvider : AppLoadContext): Promise<Response> | Response;
|
|
40
|
+
}
|
|
41
|
+
interface HandleDataRequestFunction {
|
|
42
|
+
(response: Response, args: LoaderFunctionArgs | ActionFunctionArgs): Promise<Response> | Response;
|
|
43
|
+
}
|
|
44
|
+
interface HandleErrorFunction {
|
|
45
|
+
(error: unknown, args: LoaderFunctionArgs | ActionFunctionArgs): void;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* A module that serves as the entry point for a Remix app during server
|
|
49
|
+
* rendering.
|
|
50
|
+
*/
|
|
51
|
+
interface ServerEntryModule {
|
|
52
|
+
default: HandleDocumentRequestFunction;
|
|
53
|
+
handleDataRequest?: HandleDataRequestFunction;
|
|
54
|
+
handleError?: HandleErrorFunction;
|
|
55
|
+
streamTimeout?: number;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
type SerializedError = {
|
|
59
|
+
message: string;
|
|
60
|
+
stack?: string;
|
|
61
|
+
};
|
|
62
|
+
interface FrameworkContextObject {
|
|
63
|
+
manifest: AssetsManifest;
|
|
64
|
+
routeModules: RouteModules;
|
|
65
|
+
criticalCss?: CriticalCss;
|
|
66
|
+
serverHandoffString?: string;
|
|
67
|
+
future: FutureConfig;
|
|
68
|
+
ssr: boolean;
|
|
69
|
+
isSpaMode: boolean;
|
|
70
|
+
routeDiscovery: ServerBuild["routeDiscovery"];
|
|
71
|
+
serializeError?(error: Error): SerializedError;
|
|
72
|
+
renderMeta?: {
|
|
73
|
+
didRenderScripts?: boolean;
|
|
74
|
+
streamCache?: Record<number, Promise<void> & {
|
|
75
|
+
result?: {
|
|
76
|
+
done: boolean;
|
|
77
|
+
value: string;
|
|
78
|
+
};
|
|
79
|
+
error?: unknown;
|
|
80
|
+
}>;
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
interface EntryContext extends FrameworkContextObject {
|
|
84
|
+
staticHandlerContext: StaticHandlerContext;
|
|
85
|
+
serverHandoffStream?: ReadableStream<Uint8Array>;
|
|
86
|
+
}
|
|
87
|
+
interface FutureConfig {
|
|
88
|
+
unstable_subResourceIntegrity: boolean;
|
|
89
|
+
unstable_middleware: boolean;
|
|
90
|
+
}
|
|
91
|
+
type CriticalCss = string | {
|
|
92
|
+
rel: "stylesheet";
|
|
93
|
+
href: string;
|
|
94
|
+
};
|
|
95
|
+
interface AssetsManifest {
|
|
96
|
+
entry: {
|
|
97
|
+
imports: string[];
|
|
98
|
+
module: string;
|
|
99
|
+
};
|
|
100
|
+
routes: RouteManifest<EntryRoute>;
|
|
101
|
+
url: string;
|
|
102
|
+
version: string;
|
|
103
|
+
hmr?: {
|
|
104
|
+
timestamp?: number;
|
|
105
|
+
runtime: string;
|
|
106
|
+
};
|
|
107
|
+
sri?: Record<string, string> | true;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
interface Route$1 {
|
|
111
|
+
index?: boolean;
|
|
112
|
+
caseSensitive?: boolean;
|
|
113
|
+
id: string;
|
|
114
|
+
parentId?: string;
|
|
115
|
+
path?: string;
|
|
116
|
+
}
|
|
117
|
+
interface EntryRoute extends Route$1 {
|
|
118
|
+
hasAction: boolean;
|
|
119
|
+
hasLoader: boolean;
|
|
120
|
+
hasClientAction: boolean;
|
|
121
|
+
hasClientLoader: boolean;
|
|
122
|
+
hasClientMiddleware: boolean;
|
|
123
|
+
hasErrorBoundary: boolean;
|
|
124
|
+
imports?: string[];
|
|
125
|
+
css?: string[];
|
|
126
|
+
module: string;
|
|
127
|
+
clientActionModule: string | undefined;
|
|
128
|
+
clientLoaderModule: string | undefined;
|
|
129
|
+
clientMiddlewareModule: string | undefined;
|
|
130
|
+
hydrateFallbackModule: string | undefined;
|
|
131
|
+
parentId?: string;
|
|
132
|
+
}
|
|
133
|
+
declare function createClientRoutesWithHMRRevalidationOptOut(needsRevalidation: Set<string>, manifest: RouteManifest<EntryRoute>, routeModulesCache: RouteModules, initialState: HydrationState, ssr: boolean, isSpaMode: boolean): DataRouteObject[];
|
|
134
|
+
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[];
|
|
135
|
+
declare function shouldHydrateRouteLoader(routeId: string, clientLoader: ClientLoaderFunction | undefined, hasLoader: boolean, isSpaMode: boolean): boolean;
|
|
136
|
+
|
|
137
|
+
/**
|
|
138
|
+
Resolves a URL against the current location.
|
|
139
|
+
|
|
140
|
+
```tsx
|
|
141
|
+
import { useHref } from "react-router"
|
|
142
|
+
|
|
143
|
+
function SomeComponent() {
|
|
144
|
+
let href = useHref("some/where");
|
|
145
|
+
// "/resolved/some/where"
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
@category Hooks
|
|
150
|
+
*/
|
|
151
|
+
declare function useHref(to: To, { relative }?: {
|
|
152
|
+
relative?: RelativeRoutingType;
|
|
153
|
+
}): string;
|
|
154
|
+
/**
|
|
155
|
+
* Returns true if this component is a descendant of a Router, useful to ensure
|
|
156
|
+
* a component is used within a Router.
|
|
157
|
+
*
|
|
158
|
+
* @category Hooks
|
|
159
|
+
*/
|
|
160
|
+
declare function useInRouterContext(): boolean;
|
|
161
|
+
/**
|
|
162
|
+
Returns the current {@link Location}. This can be useful if you'd like to perform some side effect whenever it changes.
|
|
163
|
+
|
|
164
|
+
```tsx
|
|
165
|
+
import * as React from 'react'
|
|
166
|
+
import { useLocation } from 'react-router'
|
|
167
|
+
|
|
168
|
+
function SomeComponent() {
|
|
169
|
+
let location = useLocation()
|
|
170
|
+
|
|
171
|
+
React.useEffect(() => {
|
|
172
|
+
// Google Analytics
|
|
173
|
+
ga('send', 'pageview')
|
|
174
|
+
}, [location]);
|
|
175
|
+
|
|
176
|
+
return (
|
|
177
|
+
// ...
|
|
178
|
+
);
|
|
179
|
+
}
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
@category Hooks
|
|
183
|
+
*/
|
|
184
|
+
declare function useLocation(): Location;
|
|
185
|
+
/**
|
|
186
|
+
* Returns the current navigation action which describes how the router came to
|
|
187
|
+
* the current location, either by a pop, push, or replace on the history stack.
|
|
188
|
+
*
|
|
189
|
+
* @category Hooks
|
|
190
|
+
*/
|
|
191
|
+
declare function useNavigationType(): Action;
|
|
192
|
+
/**
|
|
193
|
+
* Returns a PathMatch object if the given pattern matches the current URL.
|
|
194
|
+
* This is useful for components that need to know "active" state, e.g.
|
|
195
|
+
* `<NavLink>`.
|
|
196
|
+
*
|
|
197
|
+
* @category Hooks
|
|
198
|
+
*/
|
|
199
|
+
declare function useMatch<ParamKey extends ParamParseKey<Path>, Path extends string>(pattern: PathPattern<Path> | Path): PathMatch<ParamKey> | null;
|
|
200
|
+
/**
|
|
201
|
+
* The interface for the navigate() function returned from useNavigate().
|
|
202
|
+
*/
|
|
203
|
+
interface NavigateFunction {
|
|
204
|
+
(to: To, options?: NavigateOptions): void | Promise<void>;
|
|
205
|
+
(delta: number): void | Promise<void>;
|
|
206
|
+
}
|
|
207
|
+
/**
|
|
208
|
+
Returns a function that lets you navigate programmatically in the browser in response to user interactions or effects.
|
|
209
|
+
|
|
210
|
+
```tsx
|
|
211
|
+
import { useNavigate } from "react-router";
|
|
212
|
+
|
|
213
|
+
function SomeComponent() {
|
|
214
|
+
let navigate = useNavigate();
|
|
215
|
+
return (
|
|
216
|
+
<button
|
|
217
|
+
onClick={() => {
|
|
218
|
+
navigate(-1);
|
|
219
|
+
}}
|
|
220
|
+
/>
|
|
221
|
+
);
|
|
222
|
+
}
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
It's often better to use {@link redirect} in {@link ActionFunction | actions} and {@link LoaderFunction | loaders} than this hook.
|
|
226
|
+
|
|
227
|
+
@category Hooks
|
|
228
|
+
*/
|
|
229
|
+
declare function useNavigate(): NavigateFunction;
|
|
230
|
+
/**
|
|
231
|
+
* Returns the parent route {@link OutletProps.context | `<Outlet context>`}.
|
|
232
|
+
*
|
|
233
|
+
* @category Hooks
|
|
234
|
+
*/
|
|
235
|
+
declare function useOutletContext<Context = unknown>(): Context;
|
|
236
|
+
/**
|
|
237
|
+
* Returns the element for the child route at this level of the route
|
|
238
|
+
* hierarchy. Used internally by `<Outlet>` to render child routes.
|
|
239
|
+
*
|
|
240
|
+
* @category Hooks
|
|
241
|
+
*/
|
|
242
|
+
declare function useOutlet(context?: unknown): React.ReactElement | null;
|
|
243
|
+
/**
|
|
244
|
+
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.
|
|
245
|
+
|
|
246
|
+
```tsx
|
|
247
|
+
import { useParams } from "react-router"
|
|
248
|
+
|
|
249
|
+
function SomeComponent() {
|
|
250
|
+
let params = useParams()
|
|
251
|
+
params.postId
|
|
252
|
+
}
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
Assuming a route pattern like `/posts/:postId` is matched by `/posts/123` then `params.postId` will be `"123"`.
|
|
256
|
+
|
|
257
|
+
@category Hooks
|
|
258
|
+
*/
|
|
259
|
+
declare function useParams<ParamsOrKey extends string | Record<string, string | undefined> = string>(): Readonly<[
|
|
260
|
+
ParamsOrKey
|
|
261
|
+
] extends [string] ? Params<ParamsOrKey> : Partial<ParamsOrKey>>;
|
|
262
|
+
/**
|
|
263
|
+
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.
|
|
264
|
+
|
|
265
|
+
```tsx
|
|
266
|
+
import { useResolvedPath } from "react-router"
|
|
267
|
+
|
|
268
|
+
function SomeComponent() {
|
|
269
|
+
// if the user is at /dashboard/profile
|
|
270
|
+
let path = useResolvedPath("../accounts")
|
|
271
|
+
path.pathname // "/dashboard/accounts"
|
|
272
|
+
path.search // ""
|
|
273
|
+
path.hash // ""
|
|
274
|
+
}
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
@category Hooks
|
|
278
|
+
*/
|
|
279
|
+
declare function useResolvedPath(to: To, { relative }?: {
|
|
280
|
+
relative?: RelativeRoutingType;
|
|
281
|
+
}): Path;
|
|
282
|
+
/**
|
|
283
|
+
Hook version of {@link Routes | `<Routes>`} that uses objects instead of components. These objects have the same properties as the component props.
|
|
284
|
+
|
|
285
|
+
The return value of `useRoutes` is either a valid React element you can use to render the route tree, or `null` if nothing matched.
|
|
286
|
+
|
|
287
|
+
```tsx
|
|
288
|
+
import * as React from "react";
|
|
289
|
+
import { useRoutes } from "react-router";
|
|
290
|
+
|
|
291
|
+
function App() {
|
|
292
|
+
let element = useRoutes([
|
|
293
|
+
{
|
|
294
|
+
path: "/",
|
|
295
|
+
element: <Dashboard />,
|
|
296
|
+
children: [
|
|
297
|
+
{
|
|
298
|
+
path: "messages",
|
|
299
|
+
element: <DashboardMessages />,
|
|
300
|
+
},
|
|
301
|
+
{ path: "tasks", element: <DashboardTasks /> },
|
|
302
|
+
],
|
|
303
|
+
},
|
|
304
|
+
{ path: "team", element: <AboutPage /> },
|
|
305
|
+
]);
|
|
306
|
+
|
|
307
|
+
return element;
|
|
308
|
+
}
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
@category Hooks
|
|
312
|
+
*/
|
|
313
|
+
declare function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;
|
|
314
|
+
/**
|
|
315
|
+
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.
|
|
316
|
+
|
|
317
|
+
```tsx
|
|
318
|
+
import { useNavigation } from "react-router"
|
|
319
|
+
|
|
320
|
+
function SomeComponent() {
|
|
321
|
+
let navigation = useNavigation();
|
|
322
|
+
navigation.state
|
|
323
|
+
navigation.formData
|
|
324
|
+
// etc.
|
|
325
|
+
}
|
|
326
|
+
```
|
|
327
|
+
|
|
328
|
+
@category Hooks
|
|
329
|
+
*/
|
|
330
|
+
declare function useNavigation(): Navigation;
|
|
331
|
+
/**
|
|
332
|
+
Revalidate the data on the page for reasons outside of normal data mutations like window focus or polling on an interval.
|
|
333
|
+
|
|
334
|
+
```tsx
|
|
335
|
+
import { useRevalidator } from "react-router";
|
|
336
|
+
|
|
337
|
+
function WindowFocusRevalidator() {
|
|
338
|
+
const revalidator = useRevalidator();
|
|
339
|
+
|
|
340
|
+
useFakeWindowFocus(() => {
|
|
341
|
+
revalidator.revalidate();
|
|
342
|
+
});
|
|
343
|
+
|
|
344
|
+
return (
|
|
345
|
+
<div hidden={revalidator.state === "idle"}>
|
|
346
|
+
Revalidating...
|
|
347
|
+
</div>
|
|
348
|
+
);
|
|
349
|
+
}
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
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.
|
|
353
|
+
|
|
354
|
+
@category Hooks
|
|
355
|
+
*/
|
|
356
|
+
declare function useRevalidator(): {
|
|
357
|
+
revalidate: () => Promise<void>;
|
|
358
|
+
state: Router$1["state"]["revalidation"];
|
|
359
|
+
};
|
|
360
|
+
/**
|
|
361
|
+
* Returns the active route matches, useful for accessing loaderData for
|
|
362
|
+
* parent/child routes or the route "handle" property
|
|
363
|
+
*
|
|
364
|
+
* @category Hooks
|
|
365
|
+
*/
|
|
366
|
+
declare function useMatches(): UIMatch[];
|
|
367
|
+
/**
|
|
368
|
+
Returns the data from the closest route {@link LoaderFunction | loader} or {@link ClientLoaderFunction | client loader}.
|
|
369
|
+
|
|
370
|
+
```tsx
|
|
371
|
+
import { useLoaderData } from "react-router"
|
|
372
|
+
|
|
373
|
+
export async function loader() {
|
|
374
|
+
return await fakeDb.invoices.findAll();
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
export default function Invoices() {
|
|
378
|
+
let invoices = useLoaderData<typeof loader>();
|
|
379
|
+
// ...
|
|
380
|
+
}
|
|
381
|
+
```
|
|
382
|
+
|
|
383
|
+
@category Hooks
|
|
384
|
+
*/
|
|
385
|
+
declare function useLoaderData<T = any>(): SerializeFrom<T>;
|
|
386
|
+
/**
|
|
387
|
+
Returns the loader data for a given route by route ID.
|
|
388
|
+
|
|
389
|
+
```tsx
|
|
390
|
+
import { useRouteLoaderData } from "react-router";
|
|
391
|
+
|
|
392
|
+
function SomeComponent() {
|
|
393
|
+
const { user } = useRouteLoaderData("root");
|
|
394
|
+
}
|
|
395
|
+
```
|
|
396
|
+
|
|
397
|
+
Route IDs are created automatically. They are simply the path of the route file relative to the app folder without the extension.
|
|
398
|
+
|
|
399
|
+
| Route Filename | Route ID |
|
|
400
|
+
| -------------------------- | -------------------- |
|
|
401
|
+
| `app/root.tsx` | `"root"` |
|
|
402
|
+
| `app/routes/teams.tsx` | `"routes/teams"` |
|
|
403
|
+
| `app/whatever/teams.$id.tsx` | `"whatever/teams.$id"` |
|
|
404
|
+
|
|
405
|
+
If you created an ID manually, you can use that instead:
|
|
406
|
+
|
|
407
|
+
```tsx
|
|
408
|
+
route("/", "containers/app.tsx", { id: "app" }})
|
|
409
|
+
```
|
|
410
|
+
|
|
411
|
+
@category Hooks
|
|
412
|
+
*/
|
|
413
|
+
declare function useRouteLoaderData<T = any>(routeId: string): SerializeFrom<T> | undefined;
|
|
414
|
+
/**
|
|
415
|
+
Returns the action data from the most recent POST navigation form submission or `undefined` if there hasn't been one.
|
|
416
|
+
|
|
417
|
+
```tsx
|
|
418
|
+
import { Form, useActionData } from "react-router"
|
|
419
|
+
|
|
420
|
+
export async function action({ request }) {
|
|
421
|
+
const body = await request.formData()
|
|
422
|
+
const name = body.get("visitorsName")
|
|
423
|
+
return { message: `Hello, ${name}` }
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
export default function Invoices() {
|
|
427
|
+
const data = useActionData()
|
|
428
|
+
return (
|
|
429
|
+
<Form method="post">
|
|
430
|
+
<input type="text" name="visitorsName" />
|
|
431
|
+
{data ? data.message : "Waiting..."}
|
|
432
|
+
</Form>
|
|
433
|
+
)
|
|
434
|
+
}
|
|
435
|
+
```
|
|
436
|
+
|
|
437
|
+
@category Hooks
|
|
438
|
+
*/
|
|
439
|
+
declare function useActionData<T = any>(): SerializeFrom<T> | undefined;
|
|
440
|
+
/**
|
|
441
|
+
Accesses the error thrown during an {@link ActionFunction | action}, {@link LoaderFunction | loader}, or component render to be used in a route module Error Boundary.
|
|
442
|
+
|
|
443
|
+
```tsx
|
|
444
|
+
export function ErrorBoundary() {
|
|
445
|
+
const error = useRouteError();
|
|
446
|
+
return <div>{error.message}</div>;
|
|
447
|
+
}
|
|
448
|
+
```
|
|
449
|
+
|
|
450
|
+
@category Hooks
|
|
451
|
+
*/
|
|
452
|
+
declare function useRouteError(): unknown;
|
|
453
|
+
/**
|
|
454
|
+
Returns the resolved promise value from the closest {@link Await | `<Await>`}.
|
|
455
|
+
|
|
456
|
+
```tsx
|
|
457
|
+
function SomeDescendant() {
|
|
458
|
+
const value = useAsyncValue();
|
|
459
|
+
// ...
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
// somewhere in your app
|
|
463
|
+
<Await resolve={somePromise}>
|
|
464
|
+
<SomeDescendant />
|
|
465
|
+
</Await>
|
|
466
|
+
```
|
|
467
|
+
|
|
468
|
+
@category Hooks
|
|
469
|
+
*/
|
|
470
|
+
declare function useAsyncValue(): unknown;
|
|
471
|
+
/**
|
|
472
|
+
Returns the rejection value from the closest {@link Await | `<Await>`}.
|
|
473
|
+
|
|
474
|
+
```tsx
|
|
475
|
+
import { Await, useAsyncError } from "react-router"
|
|
476
|
+
|
|
477
|
+
function ErrorElement() {
|
|
478
|
+
const error = useAsyncError();
|
|
479
|
+
return (
|
|
480
|
+
<p>Uh Oh, something went wrong! {error.message}</p>
|
|
481
|
+
);
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
// somewhere in your app
|
|
485
|
+
<Await
|
|
486
|
+
resolve={promiseThatRejects}
|
|
487
|
+
errorElement={<ErrorElement />}
|
|
488
|
+
/>
|
|
489
|
+
```
|
|
490
|
+
|
|
491
|
+
@category Hooks
|
|
492
|
+
*/
|
|
493
|
+
declare function useAsyncError(): unknown;
|
|
494
|
+
/**
|
|
495
|
+
* Allow the application to block navigations within the SPA and present the
|
|
496
|
+
* user a confirmation dialog to confirm the navigation. Mostly used to avoid
|
|
497
|
+
* using half-filled form data. This does not handle hard-reloads or
|
|
498
|
+
* cross-origin navigations.
|
|
499
|
+
*
|
|
500
|
+
* @category Hooks
|
|
501
|
+
*/
|
|
502
|
+
declare function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker;
|
|
3
503
|
|
|
4
504
|
/**
|
|
5
505
|
* @private
|
|
@@ -193,7 +693,7 @@ type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;
|
|
|
193
693
|
*
|
|
194
694
|
* @category Components
|
|
195
695
|
*/
|
|
196
|
-
declare function Route
|
|
696
|
+
declare function Route(_props: RouteProps): React.ReactElement | null;
|
|
197
697
|
/**
|
|
198
698
|
* @category Types
|
|
199
699
|
*/
|
|
@@ -411,139 +911,40 @@ declare let createRoutesFromElements: typeof createRoutesFromChildren;
|
|
|
411
911
|
* @category Utils
|
|
412
912
|
*/
|
|
413
913
|
declare function renderMatches(matches: RouteMatch[] | null): React.ReactElement | null;
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
}
|
|
449
|
-
interface HandleDocumentRequestFunction {
|
|
450
|
-
(request: Request, responseStatusCode: number, responseHeaders: Headers, context: EntryContext, loadContext: MiddlewareEnabled extends true ? unstable_RouterContextProvider : AppLoadContext): Promise<Response> | Response;
|
|
451
|
-
}
|
|
452
|
-
interface HandleDataRequestFunction {
|
|
453
|
-
(response: Response, args: LoaderFunctionArgs | ActionFunctionArgs): Promise<Response> | Response;
|
|
454
|
-
}
|
|
455
|
-
interface HandleErrorFunction {
|
|
456
|
-
(error: unknown, args: LoaderFunctionArgs | ActionFunctionArgs): void;
|
|
457
|
-
}
|
|
458
|
-
/**
|
|
459
|
-
* A module that serves as the entry point for a Remix app during server
|
|
460
|
-
* rendering.
|
|
461
|
-
*/
|
|
462
|
-
interface ServerEntryModule {
|
|
463
|
-
default: HandleDocumentRequestFunction;
|
|
464
|
-
handleDataRequest?: HandleDataRequestFunction;
|
|
465
|
-
handleError?: HandleErrorFunction;
|
|
466
|
-
streamTimeout?: number;
|
|
467
|
-
}
|
|
468
|
-
|
|
469
|
-
type SerializedError = {
|
|
470
|
-
message: string;
|
|
471
|
-
stack?: string;
|
|
472
|
-
};
|
|
473
|
-
interface FrameworkContextObject {
|
|
474
|
-
manifest: AssetsManifest;
|
|
475
|
-
routeModules: RouteModules;
|
|
476
|
-
criticalCss?: CriticalCss;
|
|
477
|
-
serverHandoffString?: string;
|
|
478
|
-
future: FutureConfig;
|
|
479
|
-
ssr: boolean;
|
|
480
|
-
isSpaMode: boolean;
|
|
481
|
-
routeDiscovery: ServerBuild["routeDiscovery"];
|
|
482
|
-
serializeError?(error: Error): SerializedError;
|
|
483
|
-
renderMeta?: {
|
|
484
|
-
didRenderScripts?: boolean;
|
|
485
|
-
streamCache?: Record<number, Promise<void> & {
|
|
486
|
-
result?: {
|
|
487
|
-
done: boolean;
|
|
488
|
-
value: string;
|
|
489
|
-
};
|
|
490
|
-
error?: unknown;
|
|
491
|
-
}>;
|
|
492
|
-
};
|
|
493
|
-
}
|
|
494
|
-
interface EntryContext extends FrameworkContextObject {
|
|
495
|
-
staticHandlerContext: StaticHandlerContext;
|
|
496
|
-
serverHandoffStream?: ReadableStream<Uint8Array>;
|
|
497
|
-
}
|
|
498
|
-
interface FutureConfig {
|
|
499
|
-
unstable_subResourceIntegrity: boolean;
|
|
500
|
-
unstable_middleware: boolean;
|
|
501
|
-
}
|
|
502
|
-
type CriticalCss = string | {
|
|
503
|
-
rel: "stylesheet";
|
|
504
|
-
href: string;
|
|
505
|
-
};
|
|
506
|
-
interface AssetsManifest {
|
|
507
|
-
entry: {
|
|
508
|
-
imports: string[];
|
|
509
|
-
module: string;
|
|
510
|
-
};
|
|
511
|
-
routes: RouteManifest<EntryRoute>;
|
|
512
|
-
url: string;
|
|
513
|
-
version: string;
|
|
514
|
-
hmr?: {
|
|
515
|
-
timestamp?: number;
|
|
516
|
-
runtime: string;
|
|
517
|
-
};
|
|
518
|
-
sri?: Record<string, string> | true;
|
|
519
|
-
}
|
|
520
|
-
|
|
521
|
-
interface Route {
|
|
522
|
-
index?: boolean;
|
|
523
|
-
caseSensitive?: boolean;
|
|
524
|
-
id: string;
|
|
525
|
-
parentId?: string;
|
|
526
|
-
path?: string;
|
|
527
|
-
}
|
|
528
|
-
interface EntryRoute extends Route {
|
|
529
|
-
hasAction: boolean;
|
|
530
|
-
hasLoader: boolean;
|
|
531
|
-
hasClientAction: boolean;
|
|
532
|
-
hasClientLoader: boolean;
|
|
533
|
-
hasClientMiddleware: boolean;
|
|
534
|
-
hasErrorBoundary: boolean;
|
|
535
|
-
imports?: string[];
|
|
536
|
-
css?: string[];
|
|
537
|
-
module: string;
|
|
538
|
-
clientActionModule: string | undefined;
|
|
539
|
-
clientLoaderModule: string | undefined;
|
|
540
|
-
clientMiddlewareModule: string | undefined;
|
|
541
|
-
hydrateFallbackModule: string | undefined;
|
|
542
|
-
parentId?: string;
|
|
543
|
-
}
|
|
544
|
-
declare function createClientRoutesWithHMRRevalidationOptOut(needsRevalidation: Set<string>, manifest: RouteManifest<EntryRoute>, routeModulesCache: RouteModules, initialState: HydrationState, ssr: boolean, isSpaMode: boolean): DataRouteObject[];
|
|
545
|
-
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[];
|
|
546
|
-
declare function shouldHydrateRouteLoader(routeId: string, clientLoader: ClientLoaderFunction | undefined, hasLoader: boolean, isSpaMode: boolean): boolean;
|
|
914
|
+
type RouteComponentType = React.ComponentType<{
|
|
915
|
+
params: ReturnType<typeof useParams>;
|
|
916
|
+
loaderData: ReturnType<typeof useLoaderData>;
|
|
917
|
+
actionData: ReturnType<typeof useActionData>;
|
|
918
|
+
matches: ReturnType<typeof useMatches>;
|
|
919
|
+
}>;
|
|
920
|
+
declare function withComponentProps(Component: RouteComponentType): () => React.ReactElement<{
|
|
921
|
+
params: Readonly<Partial<string | Record<string, string | undefined>>>;
|
|
922
|
+
loaderData: unknown;
|
|
923
|
+
actionData: unknown;
|
|
924
|
+
matches: UIMatch<unknown, unknown>[];
|
|
925
|
+
}, string | React.JSXElementConstructor<any>>;
|
|
926
|
+
type HydrateFallbackType = React.ComponentType<{
|
|
927
|
+
params: ReturnType<typeof useParams>;
|
|
928
|
+
loaderData: ReturnType<typeof useLoaderData>;
|
|
929
|
+
actionData: ReturnType<typeof useActionData>;
|
|
930
|
+
}>;
|
|
931
|
+
declare function withHydrateFallbackProps(HydrateFallback: HydrateFallbackType): () => React.ReactElement<{
|
|
932
|
+
params: Readonly<Partial<string | Record<string, string | undefined>>>;
|
|
933
|
+
loaderData: unknown;
|
|
934
|
+
actionData: unknown;
|
|
935
|
+
}, string | React.JSXElementConstructor<any>>;
|
|
936
|
+
type ErrorBoundaryType = React.ComponentType<{
|
|
937
|
+
params: ReturnType<typeof useParams>;
|
|
938
|
+
loaderData: ReturnType<typeof useLoaderData>;
|
|
939
|
+
actionData: ReturnType<typeof useActionData>;
|
|
940
|
+
error: ReturnType<typeof useRouteError>;
|
|
941
|
+
}>;
|
|
942
|
+
declare function withErrorBoundaryProps(ErrorBoundary: ErrorBoundaryType): () => React.ReactElement<{
|
|
943
|
+
params: Readonly<Partial<string | Record<string, string | undefined>>>;
|
|
944
|
+
loaderData: unknown;
|
|
945
|
+
actionData: unknown;
|
|
946
|
+
error: unknown;
|
|
947
|
+
}, string | React.JSXElementConstructor<any>>;
|
|
547
948
|
|
|
548
949
|
type ParamKeyValuePair = [string, string];
|
|
549
950
|
type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams;
|
|
@@ -1811,4 +2212,4 @@ declare global {
|
|
|
1811
2212
|
}
|
|
1812
2213
|
declare function getServerStream(): ReadableStream<any>;
|
|
1813
2214
|
|
|
1814
|
-
export {
|
|
2215
|
+
export { useRoutes as $, type AssetsManifest as A, useInRouterContext as B, useLoaderData as C, useLocation as D, type EntryContext as E, type FutureConfig as F, useMatch as G, type HydrateFallbackType as H, type IndexRouteProps as I, useMatches as J, useNavigate as K, type LayoutRouteProps as L, type MemoryRouterOpts as M, type NavigateProps as N, type OutletProps as O, type PathRouteProps as P, useNavigation as Q, type RouterProviderProps as R, type ServerBuild as S, useNavigationType as T, useOutlet as U, useOutletContext as V, useParams as W, useResolvedPath as X, useRevalidator as Y, useRouteError as Z, useRouteLoaderData as _, type RouteComponentType as a, type BrowserRouterProps as a0, type DOMRouterOpts as a1, type HashRouterProps as a2, type HistoryRouterProps as a3, type LinkProps as a4, type NavLinkProps as a5, type NavLinkRenderProps as a6, type FetcherFormProps as a7, type FormProps as a8, type ScrollRestorationProps as a9, type SubmitTarget as aA, createSearchParams as aB, Meta as aC, Links as aD, Scripts as aE, PrefetchPageLinks as aF, type ScriptsProps as aG, type HandleDataRequestFunction as aH, type HandleDocumentRequestFunction as aI, type HandleErrorFunction as aJ, type ServerEntryModule as aK, type DecodeServerResponseFunction as aL, type EncodeActionFunction as aM, createCallServer as aN, RSCHydratedRouter as aO, getServerStream as aP, hydrationRouteProperties as aQ, mapRouteProperties as aR, withComponentProps as aS, withHydrateFallbackProps as aT, withErrorBoundaryProps as aU, FrameworkContext as aV, createClientRoutes as aW, createClientRoutesWithHMRRevalidationOptOut as aX, shouldHydrateRouteLoader as aY, useScrollRestoration as aZ, type SetURLSearchParams as aa, type SubmitFunction as ab, type FetcherSubmitFunction as ac, type FetcherWithComponents as ad, createBrowserRouter as ae, createHashRouter as af, BrowserRouter as ag, HashRouter as ah, Link as ai, HistoryRouter as aj, NavLink as ak, Form as al, ScrollRestoration as am, useLinkClickHandler as an, useSearchParams as ao, useSubmit as ap, useFormAction as aq, useFetcher as ar, useFetchers as as, useBeforeUnload as at, usePrompt as au, useViewTransitionState as av, type FetcherSubmitOptions as aw, type ParamKeyValuePair as ax, type SubmitOptions as ay, type URLSearchParamsInit as az, type ErrorBoundaryType as b, type ServerPayload as c, type AwaitProps as d, type MemoryRouterProps as e, type RouteProps as f, type RouterProps as g, type RoutesProps as h, Await as i, MemoryRouter as j, Navigate as k, Outlet as l, Route as m, Router as n, RouterProvider as o, Routes as p, createMemoryRouter as q, createRoutesFromChildren as r, createRoutesFromElements as s, renderMatches as t, type NavigateFunction as u, useBlocker as v, useActionData as w, useAsyncError as x, useAsyncValue as y, useHref as z };
|