react-router 7.7.0 → 7.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/CHANGELOG.md +11 -23
  2. package/dist/development/{browser-CcxeZJcQ.d.mts → browser-7LYX59NK.d.mts} +97 -1
  3. package/dist/development/{chunk-EF7DTUVF.mjs → chunk-C37GKA54.mjs} +83 -80
  4. package/dist/development/{chunk-V6PEDDZI.js → chunk-K7YFBME3.js} +79 -76
  5. package/dist/{production/chunk-GNZILI6H.mjs → development/chunk-KIUJAIYX.mjs} +3 -5
  6. package/dist/{production/chunk-2TYFPE3B.js → development/chunk-R73PQUJU.js} +132 -132
  7. package/dist/development/components-CjQijYga.d.mts +802 -0
  8. package/dist/development/dom-export.d.mts +13 -6
  9. package/dist/development/dom-export.d.ts +10 -3
  10. package/dist/development/dom-export.js +3 -3
  11. package/dist/development/dom-export.mjs +3 -3
  12. package/dist/development/index-react-server-client-Bi_fx8qz.d.ts +3163 -0
  13. package/dist/development/index-react-server-client-KLg-U4nr.d.mts +2366 -0
  14. package/dist/development/index-react-server-client.d.mts +3 -3
  15. package/dist/development/index-react-server-client.d.ts +2 -2
  16. package/dist/development/index-react-server-client.js +4 -4
  17. package/dist/development/index-react-server-client.mjs +2 -2
  18. package/dist/development/index-react-server.d.mts +109 -2
  19. package/dist/development/index-react-server.d.ts +109 -2
  20. package/dist/development/index-react-server.js +28 -20
  21. package/dist/development/index-react-server.mjs +29 -21
  22. package/dist/development/index.d.mts +918 -287
  23. package/dist/development/index.d.ts +1010 -283
  24. package/dist/development/index.js +98 -100
  25. package/dist/development/index.mjs +3 -3
  26. package/dist/development/lib/types/internal.d.mts +1 -1
  27. package/dist/development/lib/types/internal.d.ts +1 -1
  28. package/dist/development/lib/types/internal.js +1 -1
  29. package/dist/development/lib/types/internal.mjs +1 -1
  30. package/dist/{production/route-data-DjzmHYNR.d.mts → development/route-data-CqEmXQub.d.mts} +48 -2
  31. package/dist/{production/routeModules-g5PTiDfO.d.ts → development/routeModules-BR2FO0ix.d.ts} +48 -2
  32. package/dist/production/{browser-CcxeZJcQ.d.mts → browser-7LYX59NK.d.mts} +97 -1
  33. package/dist/{development/chunk-4ADB4KIO.js → production/chunk-4DGLNKXF.js} +132 -132
  34. package/dist/production/{chunk-5KHO4FML.js → chunk-7OQROU2D.js} +79 -76
  35. package/dist/production/{chunk-WPPIQDYG.mjs → chunk-IZ57JD2V.mjs} +83 -80
  36. package/dist/{development/chunk-T3VM44WY.mjs → production/chunk-K3SBCRK4.mjs} +3 -5
  37. package/dist/production/components-CjQijYga.d.mts +802 -0
  38. package/dist/production/dom-export.d.mts +13 -6
  39. package/dist/production/dom-export.d.ts +10 -3
  40. package/dist/production/dom-export.js +3 -3
  41. package/dist/production/dom-export.mjs +3 -3
  42. package/dist/production/index-react-server-client-Bi_fx8qz.d.ts +3163 -0
  43. package/dist/production/index-react-server-client-KLg-U4nr.d.mts +2366 -0
  44. package/dist/production/index-react-server-client.d.mts +3 -3
  45. package/dist/production/index-react-server-client.d.ts +2 -2
  46. package/dist/production/index-react-server-client.js +4 -4
  47. package/dist/production/index-react-server-client.mjs +2 -2
  48. package/dist/production/index-react-server.d.mts +109 -2
  49. package/dist/production/index-react-server.d.ts +109 -2
  50. package/dist/production/index-react-server.js +28 -20
  51. package/dist/production/index-react-server.mjs +29 -21
  52. package/dist/production/index.d.mts +918 -287
  53. package/dist/production/index.d.ts +1010 -283
  54. package/dist/production/index.js +98 -100
  55. package/dist/production/index.mjs +3 -3
  56. package/dist/production/lib/types/internal.d.mts +1 -1
  57. package/dist/production/lib/types/internal.d.ts +1 -1
  58. package/dist/production/lib/types/internal.js +1 -1
  59. package/dist/production/lib/types/internal.mjs +1 -1
  60. package/dist/{development/route-data-DjzmHYNR.d.mts → production/route-data-CqEmXQub.d.mts} +48 -2
  61. package/dist/{development/routeModules-g5PTiDfO.d.ts → production/routeModules-BR2FO0ix.d.ts} +48 -2
  62. package/package.json +1 -1
  63. package/dist/development/components-DzqPLVI1.d.mts +0 -464
  64. package/dist/development/index-react-server-client-CUidsuu_.d.mts +0 -1360
  65. package/dist/development/index-react-server-client-kY8DvDF3.d.ts +0 -1819
  66. package/dist/production/components-DzqPLVI1.d.mts +0 -464
  67. package/dist/production/index-react-server-client-CUidsuu_.d.mts +0 -1360
  68. package/dist/production/index-react-server-client-kY8DvDF3.d.ts +0 -1819
@@ -1,5 +1,5 @@
1
1
  /**
2
- * react-router v7.7.0
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-GNZILI6H.mjs";
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-WPPIQDYG.mjs";
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-DjzmHYNR.mjs';
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-g5PTiDfO.js';
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
 
@@ -1,5 +1,5 @@
1
1
  "use strict";/**
2
- * react-router v7.7.0
2
+ * react-router v7.7.1
3
3
  *
4
4
  * Copyright (c) Remix Software Inc.
5
5
  *
@@ -1,5 +1,5 @@
1
1
  /**
2
- * react-router v7.7.0
2
+ * react-router v7.7.1
3
3
  *
4
4
  * Copyright (c) Remix Software Inc.
5
5
  *
@@ -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
- - "route": relative to the route hierarchy so `..` means remove all segments of the current route even if it has many. For example, a `route("posts/:id")` would have both `:id` and `posts` removed from the url.
1096
- - "path": relative to the pathname so `..` means remove one segment of the pathname. For example, a `route("posts/:id")` would have only `:id` removed from the url.
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 = {
@@ -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
- - "route": relative to the route hierarchy so `..` means remove all segments of the current route even if it has many. For example, a `route("posts/:id")` would have both `:id` and `posts` removed from the url.
1096
- - "path": relative to the pathname so `..` means remove one segment of the pathname. For example, a `route("posts/:id")` would have only `:id` removed from the url.
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,6 +1,6 @@
1
1
  {
2
2
  "name": "react-router",
3
- "version": "7.7.0",
3
+ "version": "7.7.1",
4
4
  "description": "Declarative routing for React",
5
5
  "keywords": [
6
6
  "react",
@@ -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 };