react-router 7.7.0 → 7.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -23
- package/dist/development/{browser-CcxeZJcQ.d.mts → browser-7LYX59NK.d.mts} +97 -1
- package/dist/development/{chunk-EF7DTUVF.mjs → chunk-C37GKA54.mjs} +83 -80
- package/dist/development/{chunk-V6PEDDZI.js → chunk-K7YFBME3.js} +79 -76
- package/dist/{production/chunk-GNZILI6H.mjs → development/chunk-KIUJAIYX.mjs} +3 -5
- package/dist/{production/chunk-2TYFPE3B.js → development/chunk-R73PQUJU.js} +132 -132
- package/dist/development/components-CjQijYga.d.mts +802 -0
- package/dist/development/dom-export.d.mts +13 -6
- package/dist/development/dom-export.d.ts +10 -3
- package/dist/development/dom-export.js +3 -3
- package/dist/development/dom-export.mjs +3 -3
- package/dist/development/index-react-server-client-Bi_fx8qz.d.ts +3163 -0
- package/dist/development/index-react-server-client-KLg-U4nr.d.mts +2366 -0
- package/dist/development/index-react-server-client.d.mts +3 -3
- package/dist/development/index-react-server-client.d.ts +2 -2
- package/dist/development/index-react-server-client.js +4 -4
- package/dist/development/index-react-server-client.mjs +2 -2
- package/dist/development/index-react-server.d.mts +109 -2
- package/dist/development/index-react-server.d.ts +109 -2
- package/dist/development/index-react-server.js +28 -20
- package/dist/development/index-react-server.mjs +29 -21
- package/dist/development/index.d.mts +918 -287
- package/dist/development/index.d.ts +1010 -283
- package/dist/development/index.js +98 -100
- package/dist/development/index.mjs +3 -3
- package/dist/development/lib/types/internal.d.mts +1 -1
- package/dist/development/lib/types/internal.d.ts +1 -1
- package/dist/development/lib/types/internal.js +1 -1
- package/dist/development/lib/types/internal.mjs +1 -1
- package/dist/{production/route-data-DjzmHYNR.d.mts → development/route-data-CqEmXQub.d.mts} +48 -2
- package/dist/{production/routeModules-g5PTiDfO.d.ts → development/routeModules-BR2FO0ix.d.ts} +48 -2
- package/dist/production/{browser-CcxeZJcQ.d.mts → browser-7LYX59NK.d.mts} +97 -1
- package/dist/{development/chunk-4ADB4KIO.js → production/chunk-4DGLNKXF.js} +132 -132
- package/dist/production/{chunk-5KHO4FML.js → chunk-7OQROU2D.js} +79 -76
- package/dist/production/{chunk-WPPIQDYG.mjs → chunk-IZ57JD2V.mjs} +83 -80
- package/dist/{development/chunk-T3VM44WY.mjs → production/chunk-K3SBCRK4.mjs} +3 -5
- package/dist/production/components-CjQijYga.d.mts +802 -0
- package/dist/production/dom-export.d.mts +13 -6
- package/dist/production/dom-export.d.ts +10 -3
- package/dist/production/dom-export.js +3 -3
- package/dist/production/dom-export.mjs +3 -3
- package/dist/production/index-react-server-client-Bi_fx8qz.d.ts +3163 -0
- package/dist/production/index-react-server-client-KLg-U4nr.d.mts +2366 -0
- package/dist/production/index-react-server-client.d.mts +3 -3
- package/dist/production/index-react-server-client.d.ts +2 -2
- package/dist/production/index-react-server-client.js +4 -4
- package/dist/production/index-react-server-client.mjs +2 -2
- package/dist/production/index-react-server.d.mts +109 -2
- package/dist/production/index-react-server.d.ts +109 -2
- package/dist/production/index-react-server.js +28 -20
- package/dist/production/index-react-server.mjs +29 -21
- package/dist/production/index.d.mts +918 -287
- package/dist/production/index.d.ts +1010 -283
- package/dist/production/index.js +98 -100
- package/dist/production/index.mjs +3 -3
- package/dist/production/lib/types/internal.d.mts +1 -1
- package/dist/production/lib/types/internal.d.ts +1 -1
- package/dist/production/lib/types/internal.js +1 -1
- package/dist/production/lib/types/internal.mjs +1 -1
- package/dist/{development/route-data-DjzmHYNR.d.mts → production/route-data-CqEmXQub.d.mts} +48 -2
- package/dist/{development/routeModules-g5PTiDfO.d.ts → production/routeModules-BR2FO0ix.d.ts} +48 -2
- package/package.json +1 -1
- package/dist/development/components-DzqPLVI1.d.mts +0 -464
- package/dist/development/index-react-server-client-CUidsuu_.d.mts +0 -1360
- package/dist/development/index-react-server-client-kY8DvDF3.d.ts +0 -1819
- package/dist/production/components-DzqPLVI1.d.mts +0 -464
- package/dist/production/index-react-server-client-CUidsuu_.d.mts +0 -1360
- package/dist/production/index-react-server-client-kY8DvDF3.d.ts +0 -1819
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* react-router v7.7.
|
|
2
|
+
* react-router v7.7.1
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Remix Software Inc.
|
|
5
5
|
*
|
|
@@ -31,7 +31,7 @@ import {
|
|
|
31
31
|
isSession,
|
|
32
32
|
routeRSCServerRequest,
|
|
33
33
|
setDevServerHooks
|
|
34
|
-
} from "./chunk-
|
|
34
|
+
} from "./chunk-K3SBCRK4.mjs";
|
|
35
35
|
import {
|
|
36
36
|
Action,
|
|
37
37
|
Await,
|
|
@@ -140,7 +140,7 @@ import {
|
|
|
140
140
|
withComponentProps,
|
|
141
141
|
withErrorBoundaryProps,
|
|
142
142
|
withHydrateFallbackProps
|
|
143
|
-
} from "./chunk-
|
|
143
|
+
} from "./chunk-IZ57JD2V.mjs";
|
|
144
144
|
export {
|
|
145
145
|
Await,
|
|
146
146
|
BrowserRouter,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as RouteModule, o as LinkDescriptor, c as Location, p as Pretty, q as MetaDescriptor, G as GetLoaderData, r as ServerDataFunctionArgs, s as unstable_MiddlewareNextFunction, t as ClientDataFunctionArgs, v as ServerDataFrom, w as Normalize, x as GetActionData } from '../../route-data-
|
|
1
|
+
import { n as RouteModule, o as LinkDescriptor, c as Location, p as Pretty, q as MetaDescriptor, G as GetLoaderData, r as ServerDataFunctionArgs, s as unstable_MiddlewareNextFunction, t as ClientDataFunctionArgs, v as ServerDataFrom, w as Normalize, x as GetActionData } from '../../route-data-CqEmXQub.mjs';
|
|
2
2
|
import { R as RouteFiles, P as Pages } from '../../register-DiOIlEq5.mjs';
|
|
3
3
|
import 'react';
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { R as RouteModule, L as LinkDescriptor, a as Location, P as Pretty, M as MetaDescriptor, G as GetLoaderData, S as ServerDataFunctionArgs, u as unstable_MiddlewareNextFunction, C as ClientDataFunctionArgs, b as ServerDataFrom, N as Normalize, c as GetActionData } from '../../routeModules-
|
|
1
|
+
import { R as RouteModule, L as LinkDescriptor, a as Location, P as Pretty, M as MetaDescriptor, G as GetLoaderData, S as ServerDataFunctionArgs, u as unstable_MiddlewareNextFunction, C as ClientDataFunctionArgs, b as ServerDataFrom, N as Normalize, c as GetActionData } from '../../routeModules-BR2FO0ix.js';
|
|
2
2
|
import { R as RouteFiles, P as Pages } from '../../register-DiOIlEq5.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
|
|
@@ -448,14 +448,56 @@ interface DataStrategyMatch extends AgnosticRouteMatch<string, AgnosticDataRoute
|
|
|
448
448
|
handler: Promise<void> | undefined;
|
|
449
449
|
route: Promise<void> | undefined;
|
|
450
450
|
};
|
|
451
|
+
/**
|
|
452
|
+
* A boolean value indicating whether this route handler should be called in this pass.
|
|
453
|
+
*
|
|
454
|
+
* The `matches` array always includes _all_ matched routes even when only _some_
|
|
455
|
+
* route handlers need to be called so that things like middleware can be implemented.
|
|
456
|
+
*
|
|
457
|
+
* `shouldLoad` is usually only interesting if you are skipping the route handler
|
|
458
|
+
* entirely and implementing custom handler logic - since it lets you determine
|
|
459
|
+
* if that custom logic should run for this route or not.
|
|
460
|
+
*
|
|
461
|
+
* For example:
|
|
462
|
+
* - If you are on `/parent/child/a` and you navigate to `/parent/child/b` -
|
|
463
|
+
* you'll get an array of three matches (`[parent, child, b]`), but only `b`
|
|
464
|
+
* will have `shouldLoad=true` because the data for `parent` and `child` is
|
|
465
|
+
* already loaded
|
|
466
|
+
* - If you are on `/parent/child/a` and you submit to `a`'s `action`, then only
|
|
467
|
+
* `a` will have `shouldLoad=true` for the action execution of `dataStrategy`
|
|
468
|
+
* - After the `action`, `dataStrategy` will be called again for the `loader`
|
|
469
|
+
* revalidation, and all matches will have `shouldLoad=true` (assuming no custom
|
|
470
|
+
* `shouldRevalidate` implementations)
|
|
471
|
+
*/
|
|
451
472
|
shouldLoad: boolean;
|
|
452
473
|
unstable_shouldRevalidateArgs: ShouldRevalidateFunctionArgs | null;
|
|
453
474
|
unstable_shouldCallHandler(defaultShouldRevalidate?: boolean): boolean;
|
|
475
|
+
/**
|
|
476
|
+
* An async function that will resolve any `route.lazy` implementations and
|
|
477
|
+
* execute the route's handler (if necessary), returning a `DataStrategyResult`
|
|
478
|
+
*
|
|
479
|
+
* - Calling `match.resolve` does not mean you're calling the `loader`/`action`
|
|
480
|
+
* (the "handler") - `resolve` will only call the `handler` internally if
|
|
481
|
+
* needed _and_ if you don't pass your own `handlerOverride` function parameter
|
|
482
|
+
* - It is safe to call `match.resolve` for all matches, even if they have
|
|
483
|
+
* `shouldLoad=false`, and it will no-op if no loading is required
|
|
484
|
+
* - You should generally always call `match.resolve()` for `shouldLoad:true`
|
|
485
|
+
* routes to ensure that any `route.lazy` implementations are processed
|
|
486
|
+
* - See the examples below for how to implement custom handler execution via
|
|
487
|
+
* `match.resolve`
|
|
488
|
+
*/
|
|
454
489
|
resolve: (handlerOverride?: (handler: (ctx?: unknown) => DataFunctionReturnValue) => DataFunctionReturnValue) => Promise<DataStrategyResult>;
|
|
455
490
|
}
|
|
456
491
|
interface DataStrategyFunctionArgs<Context = DefaultContext> extends DataFunctionArgs<Context> {
|
|
492
|
+
/**
|
|
493
|
+
* Matches for this route extended with Data strategy APIs
|
|
494
|
+
*/
|
|
457
495
|
matches: DataStrategyMatch[];
|
|
458
496
|
unstable_runClientMiddleware: (cb: DataStrategyFunction<Context>) => Promise<Record<string, DataStrategyResult>>;
|
|
497
|
+
/**
|
|
498
|
+
* The key of the fetcher we are calling `dataStrategy` for, otherwise `null`
|
|
499
|
+
* for navigational executions
|
|
500
|
+
*/
|
|
459
501
|
fetcherKey: string | null;
|
|
460
502
|
}
|
|
461
503
|
/**
|
|
@@ -1092,8 +1134,12 @@ interface GetScrollPositionFunction {
|
|
|
1092
1134
|
(): number;
|
|
1093
1135
|
}
|
|
1094
1136
|
/**
|
|
1095
|
-
|
|
1096
|
-
|
|
1137
|
+
* - "route": relative to the route hierarchy so `..` means remove all segments
|
|
1138
|
+
* of the current route even if it has many. For example, a `route("posts/:id")`
|
|
1139
|
+
* would have both `:id` and `posts` removed from the url.
|
|
1140
|
+
* - "path": relative to the pathname so `..` means remove one segment of the
|
|
1141
|
+
* pathname. For example, a `route("posts/:id")` would have only `:id` removed
|
|
1142
|
+
* from the url.
|
|
1097
1143
|
*/
|
|
1098
1144
|
type RelativeRoutingType = "route" | "path";
|
|
1099
1145
|
type BaseNavigateOrFetchOptions = {
|
package/dist/{development/routeModules-g5PTiDfO.d.ts → production/routeModules-BR2FO0ix.d.ts}
RENAMED
|
@@ -448,14 +448,56 @@ interface DataStrategyMatch extends AgnosticRouteMatch<string, AgnosticDataRoute
|
|
|
448
448
|
handler: Promise<void> | undefined;
|
|
449
449
|
route: Promise<void> | undefined;
|
|
450
450
|
};
|
|
451
|
+
/**
|
|
452
|
+
* A boolean value indicating whether this route handler should be called in this pass.
|
|
453
|
+
*
|
|
454
|
+
* The `matches` array always includes _all_ matched routes even when only _some_
|
|
455
|
+
* route handlers need to be called so that things like middleware can be implemented.
|
|
456
|
+
*
|
|
457
|
+
* `shouldLoad` is usually only interesting if you are skipping the route handler
|
|
458
|
+
* entirely and implementing custom handler logic - since it lets you determine
|
|
459
|
+
* if that custom logic should run for this route or not.
|
|
460
|
+
*
|
|
461
|
+
* For example:
|
|
462
|
+
* - If you are on `/parent/child/a` and you navigate to `/parent/child/b` -
|
|
463
|
+
* you'll get an array of three matches (`[parent, child, b]`), but only `b`
|
|
464
|
+
* will have `shouldLoad=true` because the data for `parent` and `child` is
|
|
465
|
+
* already loaded
|
|
466
|
+
* - If you are on `/parent/child/a` and you submit to `a`'s `action`, then only
|
|
467
|
+
* `a` will have `shouldLoad=true` for the action execution of `dataStrategy`
|
|
468
|
+
* - After the `action`, `dataStrategy` will be called again for the `loader`
|
|
469
|
+
* revalidation, and all matches will have `shouldLoad=true` (assuming no custom
|
|
470
|
+
* `shouldRevalidate` implementations)
|
|
471
|
+
*/
|
|
451
472
|
shouldLoad: boolean;
|
|
452
473
|
unstable_shouldRevalidateArgs: ShouldRevalidateFunctionArgs | null;
|
|
453
474
|
unstable_shouldCallHandler(defaultShouldRevalidate?: boolean): boolean;
|
|
475
|
+
/**
|
|
476
|
+
* An async function that will resolve any `route.lazy` implementations and
|
|
477
|
+
* execute the route's handler (if necessary), returning a `DataStrategyResult`
|
|
478
|
+
*
|
|
479
|
+
* - Calling `match.resolve` does not mean you're calling the `loader`/`action`
|
|
480
|
+
* (the "handler") - `resolve` will only call the `handler` internally if
|
|
481
|
+
* needed _and_ if you don't pass your own `handlerOverride` function parameter
|
|
482
|
+
* - It is safe to call `match.resolve` for all matches, even if they have
|
|
483
|
+
* `shouldLoad=false`, and it will no-op if no loading is required
|
|
484
|
+
* - You should generally always call `match.resolve()` for `shouldLoad:true`
|
|
485
|
+
* routes to ensure that any `route.lazy` implementations are processed
|
|
486
|
+
* - See the examples below for how to implement custom handler execution via
|
|
487
|
+
* `match.resolve`
|
|
488
|
+
*/
|
|
454
489
|
resolve: (handlerOverride?: (handler: (ctx?: unknown) => DataFunctionReturnValue) => DataFunctionReturnValue) => Promise<DataStrategyResult>;
|
|
455
490
|
}
|
|
456
491
|
interface DataStrategyFunctionArgs<Context = DefaultContext> extends DataFunctionArgs<Context> {
|
|
492
|
+
/**
|
|
493
|
+
* Matches for this route extended with Data strategy APIs
|
|
494
|
+
*/
|
|
457
495
|
matches: DataStrategyMatch[];
|
|
458
496
|
unstable_runClientMiddleware: (cb: DataStrategyFunction<Context>) => Promise<Record<string, DataStrategyResult>>;
|
|
497
|
+
/**
|
|
498
|
+
* The key of the fetcher we are calling `dataStrategy` for, otherwise `null`
|
|
499
|
+
* for navigational executions
|
|
500
|
+
*/
|
|
459
501
|
fetcherKey: string | null;
|
|
460
502
|
}
|
|
461
503
|
/**
|
|
@@ -1092,8 +1134,12 @@ interface GetScrollPositionFunction {
|
|
|
1092
1134
|
(): number;
|
|
1093
1135
|
}
|
|
1094
1136
|
/**
|
|
1095
|
-
|
|
1096
|
-
|
|
1137
|
+
* - "route": relative to the route hierarchy so `..` means remove all segments
|
|
1138
|
+
* of the current route even if it has many. For example, a `route("posts/:id")`
|
|
1139
|
+
* would have both `:id` and `posts` removed from the url.
|
|
1140
|
+
* - "path": relative to the pathname so `..` means remove one segment of the
|
|
1141
|
+
* pathname. For example, a `route("posts/:id")` would have only `:id` removed
|
|
1142
|
+
* from the url.
|
|
1097
1143
|
*/
|
|
1098
1144
|
type RelativeRoutingType = "route" | "path";
|
|
1099
1145
|
type BaseNavigateOrFetchOptions = {
|
package/package.json
CHANGED
|
@@ -1,464 +0,0 @@
|
|
|
1
|
-
import { R as Router$1, I as InitialEntry, T as To, a as RelativeRoutingType, N as NonIndexRouteObject, L as LazyRouteFunction, b as IndexRouteObject, c as Location, A as Action, d as Navigator, e as RouterInit, F as FutureConfig, H as HydrationState, D as DataStrategyFunction, P as PatchRoutesOnNavigationFunction, f as RouteObject, g as RouteMatch, h as Params, U as UIMatch } from './route-data-DjzmHYNR.mjs';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* @private
|
|
6
|
-
*/
|
|
7
|
-
declare function mapRouteProperties(route: RouteObject): Partial<RouteObject> & {
|
|
8
|
-
hasErrorBoundary: boolean;
|
|
9
|
-
};
|
|
10
|
-
declare const hydrationRouteProperties: (keyof RouteObject)[];
|
|
11
|
-
interface MemoryRouterOpts {
|
|
12
|
-
/**
|
|
13
|
-
* Basename path for the application.
|
|
14
|
-
*/
|
|
15
|
-
basename?: string;
|
|
16
|
-
/**
|
|
17
|
-
* Function to provide the initial context values for all client side navigations/fetches
|
|
18
|
-
*/
|
|
19
|
-
unstable_getContext?: RouterInit["unstable_getContext"];
|
|
20
|
-
/**
|
|
21
|
-
* Future flags to enable for the router.
|
|
22
|
-
*/
|
|
23
|
-
future?: Partial<FutureConfig>;
|
|
24
|
-
/**
|
|
25
|
-
* Hydration data to initialize the router with if you have already performed
|
|
26
|
-
* data loading on the server.
|
|
27
|
-
*/
|
|
28
|
-
hydrationData?: HydrationState;
|
|
29
|
-
/**
|
|
30
|
-
* Initial entires in the in-memory history stack
|
|
31
|
-
*/
|
|
32
|
-
initialEntries?: InitialEntry[];
|
|
33
|
-
/**
|
|
34
|
-
* Index of `initialEntries` the application should initialize to
|
|
35
|
-
*/
|
|
36
|
-
initialIndex?: number;
|
|
37
|
-
/**
|
|
38
|
-
* Override the default data strategy of loading in parallel.
|
|
39
|
-
* Only intended for advanced usage.
|
|
40
|
-
*/
|
|
41
|
-
dataStrategy?: DataStrategyFunction;
|
|
42
|
-
/**
|
|
43
|
-
* Lazily define portions of the route tree on navigations.
|
|
44
|
-
*/
|
|
45
|
-
patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
|
|
46
|
-
}
|
|
47
|
-
/**
|
|
48
|
-
* Create a new data router that manages the application path using an in-memory
|
|
49
|
-
* history stack. Useful for non-browser environments without a DOM API.
|
|
50
|
-
*
|
|
51
|
-
* @category Data Routers
|
|
52
|
-
*/
|
|
53
|
-
declare function createMemoryRouter(
|
|
54
|
-
/**
|
|
55
|
-
* Application routes
|
|
56
|
-
*/
|
|
57
|
-
routes: RouteObject[],
|
|
58
|
-
/**
|
|
59
|
-
* Router options
|
|
60
|
-
*/
|
|
61
|
-
opts?: MemoryRouterOpts): Router$1;
|
|
62
|
-
interface RouterProviderProps {
|
|
63
|
-
router: Router$1;
|
|
64
|
-
flushSync?: (fn: () => unknown) => undefined;
|
|
65
|
-
}
|
|
66
|
-
/**
|
|
67
|
-
* Given a Remix Router instance, render the appropriate UI
|
|
68
|
-
*/
|
|
69
|
-
declare function RouterProvider({ router, flushSync: reactDomFlushSyncImpl, }: RouterProviderProps): React.ReactElement;
|
|
70
|
-
/**
|
|
71
|
-
* @category Types
|
|
72
|
-
*/
|
|
73
|
-
interface MemoryRouterProps {
|
|
74
|
-
basename?: string;
|
|
75
|
-
children?: React.ReactNode;
|
|
76
|
-
initialEntries?: InitialEntry[];
|
|
77
|
-
initialIndex?: number;
|
|
78
|
-
}
|
|
79
|
-
/**
|
|
80
|
-
* A `<Router>` that stores all entries in memory.
|
|
81
|
-
*
|
|
82
|
-
* @category Component Routers
|
|
83
|
-
*/
|
|
84
|
-
declare function MemoryRouter({ basename, children, initialEntries, initialIndex, }: MemoryRouterProps): React.ReactElement;
|
|
85
|
-
/**
|
|
86
|
-
* @category Types
|
|
87
|
-
*/
|
|
88
|
-
interface NavigateProps {
|
|
89
|
-
to: To;
|
|
90
|
-
replace?: boolean;
|
|
91
|
-
state?: any;
|
|
92
|
-
relative?: RelativeRoutingType;
|
|
93
|
-
}
|
|
94
|
-
/**
|
|
95
|
-
* A component-based version of {@link useNavigate} to use in a [`React.Component
|
|
96
|
-
* Class`](https://reactjs.org/docs/react-component.html) where hooks are not
|
|
97
|
-
* able to be used.
|
|
98
|
-
*
|
|
99
|
-
* It's recommended to avoid using this component in favor of {@link useNavigate}
|
|
100
|
-
*
|
|
101
|
-
* @category Components
|
|
102
|
-
*/
|
|
103
|
-
declare function Navigate({ to, replace, state, relative, }: NavigateProps): null;
|
|
104
|
-
/**
|
|
105
|
-
* @category Types
|
|
106
|
-
*/
|
|
107
|
-
interface OutletProps {
|
|
108
|
-
/**
|
|
109
|
-
Provides a context value to the element tree below the outlet. Use when the parent route needs to provide values to child routes.
|
|
110
|
-
|
|
111
|
-
```tsx
|
|
112
|
-
<Outlet context={myContextValue} />
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
Access the context with {@link useOutletContext}.
|
|
116
|
-
*/
|
|
117
|
-
context?: unknown;
|
|
118
|
-
}
|
|
119
|
-
/**
|
|
120
|
-
Renders the matching child route of a parent route or nothing if no child route matches.
|
|
121
|
-
|
|
122
|
-
```tsx
|
|
123
|
-
import { Outlet } from "react-router"
|
|
124
|
-
|
|
125
|
-
export default function SomeParent() {
|
|
126
|
-
return (
|
|
127
|
-
<div>
|
|
128
|
-
<h1>Parent Content</h1>
|
|
129
|
-
<Outlet />
|
|
130
|
-
</div>
|
|
131
|
-
);
|
|
132
|
-
}
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
@category Components
|
|
136
|
-
*/
|
|
137
|
-
declare function Outlet(props: OutletProps): React.ReactElement | null;
|
|
138
|
-
/**
|
|
139
|
-
* @category Types
|
|
140
|
-
*/
|
|
141
|
-
interface PathRouteProps {
|
|
142
|
-
caseSensitive?: NonIndexRouteObject["caseSensitive"];
|
|
143
|
-
path?: NonIndexRouteObject["path"];
|
|
144
|
-
id?: NonIndexRouteObject["id"];
|
|
145
|
-
lazy?: LazyRouteFunction<NonIndexRouteObject>;
|
|
146
|
-
loader?: NonIndexRouteObject["loader"];
|
|
147
|
-
action?: NonIndexRouteObject["action"];
|
|
148
|
-
hasErrorBoundary?: NonIndexRouteObject["hasErrorBoundary"];
|
|
149
|
-
shouldRevalidate?: NonIndexRouteObject["shouldRevalidate"];
|
|
150
|
-
handle?: NonIndexRouteObject["handle"];
|
|
151
|
-
index?: false;
|
|
152
|
-
children?: React.ReactNode;
|
|
153
|
-
element?: React.ReactNode | null;
|
|
154
|
-
hydrateFallbackElement?: React.ReactNode | null;
|
|
155
|
-
errorElement?: React.ReactNode | null;
|
|
156
|
-
Component?: React.ComponentType | null;
|
|
157
|
-
HydrateFallback?: React.ComponentType | null;
|
|
158
|
-
ErrorBoundary?: React.ComponentType | null;
|
|
159
|
-
}
|
|
160
|
-
/**
|
|
161
|
-
* @category Types
|
|
162
|
-
*/
|
|
163
|
-
interface LayoutRouteProps extends PathRouteProps {
|
|
164
|
-
}
|
|
165
|
-
/**
|
|
166
|
-
* @category Types
|
|
167
|
-
*/
|
|
168
|
-
interface IndexRouteProps {
|
|
169
|
-
caseSensitive?: IndexRouteObject["caseSensitive"];
|
|
170
|
-
path?: IndexRouteObject["path"];
|
|
171
|
-
id?: IndexRouteObject["id"];
|
|
172
|
-
lazy?: LazyRouteFunction<IndexRouteObject>;
|
|
173
|
-
loader?: IndexRouteObject["loader"];
|
|
174
|
-
action?: IndexRouteObject["action"];
|
|
175
|
-
hasErrorBoundary?: IndexRouteObject["hasErrorBoundary"];
|
|
176
|
-
shouldRevalidate?: IndexRouteObject["shouldRevalidate"];
|
|
177
|
-
handle?: IndexRouteObject["handle"];
|
|
178
|
-
index: true;
|
|
179
|
-
children?: undefined;
|
|
180
|
-
element?: React.ReactNode | null;
|
|
181
|
-
hydrateFallbackElement?: React.ReactNode | null;
|
|
182
|
-
errorElement?: React.ReactNode | null;
|
|
183
|
-
Component?: React.ComponentType | null;
|
|
184
|
-
HydrateFallback?: React.ComponentType | null;
|
|
185
|
-
ErrorBoundary?: React.ComponentType | null;
|
|
186
|
-
}
|
|
187
|
-
type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;
|
|
188
|
-
/**
|
|
189
|
-
* Configures an element to render when a pattern matches the current location.
|
|
190
|
-
* It must be rendered within a {@link Routes} element. Note that these routes
|
|
191
|
-
* do not participate in data loading, actions, code splitting, or any other
|
|
192
|
-
* route module features.
|
|
193
|
-
*
|
|
194
|
-
* @category Components
|
|
195
|
-
*/
|
|
196
|
-
declare function Route(_props: RouteProps): React.ReactElement | null;
|
|
197
|
-
/**
|
|
198
|
-
* @category Types
|
|
199
|
-
*/
|
|
200
|
-
interface RouterProps {
|
|
201
|
-
basename?: string;
|
|
202
|
-
children?: React.ReactNode;
|
|
203
|
-
location: Partial<Location> | string;
|
|
204
|
-
navigationType?: Action;
|
|
205
|
-
navigator: Navigator;
|
|
206
|
-
static?: boolean;
|
|
207
|
-
}
|
|
208
|
-
/**
|
|
209
|
-
* Provides location context for the rest of the app.
|
|
210
|
-
*
|
|
211
|
-
* Note: You usually won't render a `<Router>` directly. Instead, you'll render a
|
|
212
|
-
* router that is more specific to your environment such as a `<BrowserRouter>`
|
|
213
|
-
* in web browsers or a `<StaticRouter>` for server rendering.
|
|
214
|
-
*
|
|
215
|
-
* @category Components
|
|
216
|
-
*/
|
|
217
|
-
declare function Router({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp, }: RouterProps): React.ReactElement | null;
|
|
218
|
-
/**
|
|
219
|
-
* @category Types
|
|
220
|
-
*/
|
|
221
|
-
interface RoutesProps {
|
|
222
|
-
/**
|
|
223
|
-
* Nested {@link Route} elements
|
|
224
|
-
*/
|
|
225
|
-
children?: React.ReactNode;
|
|
226
|
-
/**
|
|
227
|
-
* The location to match against. Defaults to the current location.
|
|
228
|
-
*/
|
|
229
|
-
location?: Partial<Location> | string;
|
|
230
|
-
}
|
|
231
|
-
/**
|
|
232
|
-
Renders a branch of {@link Route | `<Routes>`} that best matches the current
|
|
233
|
-
location. Note that these routes do not participate in data loading, actions,
|
|
234
|
-
code splitting, or any other route module features.
|
|
235
|
-
|
|
236
|
-
```tsx
|
|
237
|
-
import { Routes, Route } from "react-router"
|
|
238
|
-
|
|
239
|
-
<Routes>
|
|
240
|
-
<Route index element={<StepOne />} />
|
|
241
|
-
<Route path="step-2" element={<StepTwo />} />
|
|
242
|
-
<Route path="step-3" element={<StepThree />}>
|
|
243
|
-
</Routes>
|
|
244
|
-
```
|
|
245
|
-
|
|
246
|
-
@category Components
|
|
247
|
-
*/
|
|
248
|
-
declare function Routes({ children, location, }: RoutesProps): React.ReactElement | null;
|
|
249
|
-
interface AwaitResolveRenderFunction<Resolve = any> {
|
|
250
|
-
(data: Awaited<Resolve>): React.ReactNode;
|
|
251
|
-
}
|
|
252
|
-
/**
|
|
253
|
-
* @category Types
|
|
254
|
-
*/
|
|
255
|
-
interface AwaitProps<Resolve> {
|
|
256
|
-
/**
|
|
257
|
-
When using a function, the resolved value is provided as the parameter.
|
|
258
|
-
|
|
259
|
-
```tsx [2]
|
|
260
|
-
<Await resolve={reviewsPromise}>
|
|
261
|
-
{(resolvedReviews) => <Reviews items={resolvedReviews} />}
|
|
262
|
-
</Await>
|
|
263
|
-
```
|
|
264
|
-
|
|
265
|
-
When using React elements, {@link useAsyncValue} will provide the
|
|
266
|
-
resolved value:
|
|
267
|
-
|
|
268
|
-
```tsx [2]
|
|
269
|
-
<Await resolve={reviewsPromise}>
|
|
270
|
-
<Reviews />
|
|
271
|
-
</Await>
|
|
272
|
-
|
|
273
|
-
function Reviews() {
|
|
274
|
-
const resolvedReviews = useAsyncValue()
|
|
275
|
-
return <div>...</div>
|
|
276
|
-
}
|
|
277
|
-
```
|
|
278
|
-
*/
|
|
279
|
-
children: React.ReactNode | AwaitResolveRenderFunction<Resolve>;
|
|
280
|
-
/**
|
|
281
|
-
The error element renders instead of the children when the promise rejects.
|
|
282
|
-
|
|
283
|
-
```tsx
|
|
284
|
-
<Await
|
|
285
|
-
errorElement={<div>Oops</div>}
|
|
286
|
-
resolve={reviewsPromise}
|
|
287
|
-
>
|
|
288
|
-
<Reviews />
|
|
289
|
-
</Await>
|
|
290
|
-
```
|
|
291
|
-
|
|
292
|
-
To provide a more contextual error, you can use the {@link useAsyncError} in a
|
|
293
|
-
child component
|
|
294
|
-
|
|
295
|
-
```tsx
|
|
296
|
-
<Await
|
|
297
|
-
errorElement={<ReviewsError />}
|
|
298
|
-
resolve={reviewsPromise}
|
|
299
|
-
>
|
|
300
|
-
<Reviews />
|
|
301
|
-
</Await>
|
|
302
|
-
|
|
303
|
-
function ReviewsError() {
|
|
304
|
-
const error = useAsyncError()
|
|
305
|
-
return <div>Error loading reviews: {error.message}</div>
|
|
306
|
-
}
|
|
307
|
-
```
|
|
308
|
-
|
|
309
|
-
If you do not provide an errorElement, the rejected value will bubble up to
|
|
310
|
-
the nearest route-level {@link NonIndexRouteObject#ErrorBoundary | ErrorBoundary} and be accessible
|
|
311
|
-
via {@link useRouteError} hook.
|
|
312
|
-
*/
|
|
313
|
-
errorElement?: React.ReactNode;
|
|
314
|
-
/**
|
|
315
|
-
Takes a promise returned from a {@link LoaderFunction | loader} value to be resolved and rendered.
|
|
316
|
-
|
|
317
|
-
```jsx
|
|
318
|
-
import { useLoaderData, Await } from "react-router"
|
|
319
|
-
|
|
320
|
-
export async function loader() {
|
|
321
|
-
let reviews = getReviews() // not awaited
|
|
322
|
-
let book = await getBook()
|
|
323
|
-
return {
|
|
324
|
-
book,
|
|
325
|
-
reviews, // this is a promise
|
|
326
|
-
}
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
export default function Book() {
|
|
330
|
-
const {
|
|
331
|
-
book,
|
|
332
|
-
reviews, // this is the same promise
|
|
333
|
-
} = useLoaderData()
|
|
334
|
-
|
|
335
|
-
return (
|
|
336
|
-
<div>
|
|
337
|
-
<h1>{book.title}</h1>
|
|
338
|
-
<p>{book.description}</p>
|
|
339
|
-
<React.Suspense fallback={<ReviewsSkeleton />}>
|
|
340
|
-
<Await
|
|
341
|
-
// and is the promise we pass to Await
|
|
342
|
-
resolve={reviews}
|
|
343
|
-
>
|
|
344
|
-
<Reviews />
|
|
345
|
-
</Await>
|
|
346
|
-
</React.Suspense>
|
|
347
|
-
</div>
|
|
348
|
-
);
|
|
349
|
-
}
|
|
350
|
-
```
|
|
351
|
-
*/
|
|
352
|
-
resolve: Resolve;
|
|
353
|
-
}
|
|
354
|
-
/**
|
|
355
|
-
Used to render promise values with automatic error handling.
|
|
356
|
-
|
|
357
|
-
```tsx
|
|
358
|
-
import { Await, useLoaderData } from "react-router";
|
|
359
|
-
|
|
360
|
-
export function loader() {
|
|
361
|
-
// not awaited
|
|
362
|
-
const reviews = getReviews()
|
|
363
|
-
// awaited (blocks the transition)
|
|
364
|
-
const book = await fetch("/api/book").then((res) => res.json())
|
|
365
|
-
return { book, reviews }
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
function Book() {
|
|
369
|
-
const { book, reviews } = useLoaderData();
|
|
370
|
-
return (
|
|
371
|
-
<div>
|
|
372
|
-
<h1>{book.title}</h1>
|
|
373
|
-
<p>{book.description}</p>
|
|
374
|
-
<React.Suspense fallback={<ReviewsSkeleton />}>
|
|
375
|
-
<Await
|
|
376
|
-
resolve={reviews}
|
|
377
|
-
errorElement={
|
|
378
|
-
<div>Could not load reviews 😬</div>
|
|
379
|
-
}
|
|
380
|
-
children={(resolvedReviews) => (
|
|
381
|
-
<Reviews items={resolvedReviews} />
|
|
382
|
-
)}
|
|
383
|
-
/>
|
|
384
|
-
</React.Suspense>
|
|
385
|
-
</div>
|
|
386
|
-
);
|
|
387
|
-
}
|
|
388
|
-
```
|
|
389
|
-
|
|
390
|
-
**Note:** `<Await>` expects to be rendered inside of a `<React.Suspense>`
|
|
391
|
-
|
|
392
|
-
@category Components
|
|
393
|
-
|
|
394
|
-
*/
|
|
395
|
-
declare function Await<Resolve>({ children, errorElement, resolve, }: AwaitProps<Resolve>): React.JSX.Element;
|
|
396
|
-
/**
|
|
397
|
-
* Creates a route config from a React "children" object, which is usually
|
|
398
|
-
* either a `<Route>` element or an array of them. Used internally by
|
|
399
|
-
* `<Routes>` to create a route config from its children.
|
|
400
|
-
*
|
|
401
|
-
* @category Utils
|
|
402
|
-
*/
|
|
403
|
-
declare function createRoutesFromChildren(children: React.ReactNode, parentPath?: number[]): RouteObject[];
|
|
404
|
-
/**
|
|
405
|
-
* Create route objects from JSX elements instead of arrays of objects
|
|
406
|
-
*/
|
|
407
|
-
declare let createRoutesFromElements: typeof createRoutesFromChildren;
|
|
408
|
-
/**
|
|
409
|
-
* Renders the result of `matchRoutes()` into a React element.
|
|
410
|
-
*
|
|
411
|
-
* @category Utils
|
|
412
|
-
*/
|
|
413
|
-
declare function renderMatches(matches: RouteMatch[] | null): React.ReactElement | null;
|
|
414
|
-
declare function useRouteComponentProps(): {
|
|
415
|
-
params: Readonly<Params<string>>;
|
|
416
|
-
loaderData: any;
|
|
417
|
-
actionData: any;
|
|
418
|
-
matches: UIMatch<unknown, unknown>[];
|
|
419
|
-
};
|
|
420
|
-
type RouteComponentProps = ReturnType<typeof useRouteComponentProps>;
|
|
421
|
-
type RouteComponentType = React.ComponentType<RouteComponentProps>;
|
|
422
|
-
declare function WithComponentProps({ children, }: {
|
|
423
|
-
children: React.ReactElement;
|
|
424
|
-
}): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
425
|
-
declare function withComponentProps(Component: RouteComponentType): () => React.ReactElement<{
|
|
426
|
-
params: Readonly<Params<string>>;
|
|
427
|
-
loaderData: any;
|
|
428
|
-
actionData: any;
|
|
429
|
-
matches: UIMatch<unknown, unknown>[];
|
|
430
|
-
}, string | React.JSXElementConstructor<any>>;
|
|
431
|
-
declare function useHydrateFallbackProps(): {
|
|
432
|
-
params: Readonly<Params<string>>;
|
|
433
|
-
loaderData: any;
|
|
434
|
-
actionData: any;
|
|
435
|
-
};
|
|
436
|
-
type HydrateFallbackProps = ReturnType<typeof useHydrateFallbackProps>;
|
|
437
|
-
type HydrateFallbackType = React.ComponentType<HydrateFallbackProps>;
|
|
438
|
-
declare function WithHydrateFallbackProps({ children, }: {
|
|
439
|
-
children: React.ReactElement;
|
|
440
|
-
}): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
441
|
-
declare function withHydrateFallbackProps(HydrateFallback: HydrateFallbackType): () => React.ReactElement<{
|
|
442
|
-
params: Readonly<Params<string>>;
|
|
443
|
-
loaderData: any;
|
|
444
|
-
actionData: any;
|
|
445
|
-
}, string | React.JSXElementConstructor<any>>;
|
|
446
|
-
declare function useErrorBoundaryProps(): {
|
|
447
|
-
params: Readonly<Params<string>>;
|
|
448
|
-
loaderData: any;
|
|
449
|
-
actionData: any;
|
|
450
|
-
error: unknown;
|
|
451
|
-
};
|
|
452
|
-
type ErrorBoundaryProps = ReturnType<typeof useErrorBoundaryProps>;
|
|
453
|
-
type ErrorBoundaryType = React.ComponentType<ErrorBoundaryProps>;
|
|
454
|
-
declare function WithErrorBoundaryProps({ children, }: {
|
|
455
|
-
children: React.ReactElement;
|
|
456
|
-
}): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
457
|
-
declare function withErrorBoundaryProps(ErrorBoundary: ErrorBoundaryType): () => React.ReactElement<{
|
|
458
|
-
params: Readonly<Params<string>>;
|
|
459
|
-
loaderData: any;
|
|
460
|
-
actionData: any;
|
|
461
|
-
error: unknown;
|
|
462
|
-
}, string | React.JSXElementConstructor<any>>;
|
|
463
|
-
|
|
464
|
-
export { type AwaitProps as A, type ErrorBoundaryType as E, type HydrateFallbackType as H, type IndexRouteProps as I, type LayoutRouteProps as L, type MemoryRouterOpts as M, type NavigateProps as N, type OutletProps as O, type PathRouteProps as P, type RouterProviderProps as R, WithComponentProps as W, type RouteComponentType as a, type MemoryRouterProps as b, type RouteProps as c, type RouterProps as d, type RoutesProps as e, Await as f, MemoryRouter as g, Navigate as h, Outlet as i, Route as j, Router as k, RouterProvider as l, Routes as m, createMemoryRouter as n, createRoutesFromChildren as o, createRoutesFromElements as p, hydrationRouteProperties as q, renderMatches as r, mapRouteProperties as s, WithHydrateFallbackProps as t, withHydrateFallbackProps as u, WithErrorBoundaryProps as v, withComponentProps as w, withErrorBoundaryProps as x };
|