react-router 7.6.1-pre.2 → 7.6.2

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