react-router 7.13.1 → 7.13.2

package/dist/development/index-react-server.d.ts

@@ -356,6 +356,15 @@ type DefaultContext = MiddlewareEnabled extends true ? Readonly<RouterContextPro
 interface DataFunctionArgs<Context> {
     /** A {@link https://developer.mozilla.org/en-US/docs/Web/API/Request Fetch Request instance} which you can use to read headers (like cookies, and {@link https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams URLSearchParams} from the request. */
     request: Request;
+    /**
+     * A URL instance representing the application location being navigated to or fetched.
+     * Without `future.unstable_passThroughRequests` enabled, this matches `request.url`.
+     * With `future.unstable_passThroughRequests` enabled, this is a normalized
+     * URL with React-Router-specific implementation details removed (`.data`
+     * suffixes, `index`/`_routes` search params).
+     * The URL includes the origin from the request for convenience.
+     */
+    unstable_url: URL;
     /**
      * Matched un-interpolated route pattern for the current path (i.e., /blog/:slug).
      * Mostly useful as a identifier to aggregate on for logging/tracing/etc.
@@ -433,11 +442,11 @@ interface ShouldRevalidateFunctionArgs {
     /** This is the url the navigation started from. You can compare it with `nextUrl` to decide if you need to revalidate this route's data. */
     currentUrl: URL;
     /** These are the {@link https://reactrouter.com/start/framework/routing#dynamic-segments dynamic route params} from the URL that can be compared to the `nextParams` to decide if you need to reload or not. Perhaps you're using only a partial piece of the param for data loading, you don't need to revalidate if a superfluous part of the param changed. */
-    currentParams: AgnosticDataRouteMatch["params"];
+    currentParams: DataRouteMatch["params"];
     /** In the case of navigation, this the URL the user is requesting. Some revalidations are not navigation, so it will simply be the same as currentUrl. */
     nextUrl: URL;
     /** In the case of navigation, these are the {@link https://reactrouter.com/start/framework/routing#dynamic-segments dynamic route params}  from the next location the user is requesting. Some revalidations are not navigation, so it will simply be the same as currentParams. */
-    nextParams: AgnosticDataRouteMatch["params"];
+    nextParams: DataRouteMatch["params"];
     /** The method (probably `"GET"` or `"POST"`) used in the form submission that triggered the revalidation. */
     formMethod?: Submission["formMethod"];
     /** The form action (`<Form action="/somewhere">`) that triggered the revalidation. */
@@ -492,7 +501,7 @@ interface ShouldRevalidateFunctionArgs {
 interface ShouldRevalidateFunction {
     (args: ShouldRevalidateFunctionArgs): boolean;
 }
-interface DataStrategyMatch extends AgnosticRouteMatch<string, AgnosticDataRouteObject> {
+interface DataStrategyMatch extends RouteMatch<string, DataRouteObject> {
     /**
      * @private
      */
@@ -582,20 +591,19 @@ interface DataStrategyResult {
 interface DataStrategyFunction<Context = DefaultContext> {
     (args: DataStrategyFunctionArgs<Context>): Promise<Record<string, DataStrategyResult>>;
 }
-type AgnosticPatchRoutesOnNavigationFunctionArgs<O extends AgnosticRouteObject = AgnosticRouteObject, M extends AgnosticRouteMatch = AgnosticRouteMatch> = {
+type PatchRoutesOnNavigationFunctionArgs = {
     signal: AbortSignal;
     path: string;
-    matches: M[];
+    matches: RouteMatch[];
     fetcherKey: string | undefined;
-    patch: (routeId: string | null, children: O[]) => void;
+    patch: (routeId: string | null, children: RouteObject[]) => void;
 };
-type AgnosticPatchRoutesOnNavigationFunction<O extends AgnosticRouteObject = AgnosticRouteObject, M extends AgnosticRouteMatch = AgnosticRouteMatch> = (opts: AgnosticPatchRoutesOnNavigationFunctionArgs<O, M>) => MaybePromise<void>;
+type PatchRoutesOnNavigationFunction = (opts: PatchRoutesOnNavigationFunctionArgs) => MaybePromise<void>;
 /**
- * Function provided by the framework-aware layers to set any framework-specific
- * properties from framework-agnostic properties
+ * Function provided to set route-specific properties from route objects
  */
 interface MapRoutePropertiesFunction {
-    (route: AgnosticDataRouteObject): {
+    (route: DataRouteObject): {
         hasErrorBoundary: boolean;
     } & Record<string, any>;
 }
@@ -615,62 +623,139 @@ type UnsupportedLazyRouteFunctionKey = UnsupportedLazyRouteObjectKey | "middlewa
  * lazy object to load route properties, which can add non-matching
  * related properties to a route
  */
-type LazyRouteObject<R extends AgnosticRouteObject> = {
+type LazyRouteObject<R extends RouteObject> = {
     [K in keyof R as K extends UnsupportedLazyRouteObjectKey ? never : K]?: () => Promise<R[K] | null | undefined>;
 };
 /**
  * lazy() function to load a route definition, which can add non-matching
  * related properties to a route
  */
-interface LazyRouteFunction<R extends AgnosticRouteObject> {
+interface LazyRouteFunction<R extends RouteObject> {
     (): Promise<Omit<R, UnsupportedLazyRouteFunctionKey> & Partial<Record<UnsupportedLazyRouteFunctionKey, never>>>;
 }
-type LazyRouteDefinition<R extends AgnosticRouteObject> = LazyRouteObject<R> | LazyRouteFunction<R>;
+type LazyRouteDefinition<R extends RouteObject> = LazyRouteObject<R> | LazyRouteFunction<R>;
 /**
  * Base RouteObject with common props shared by all types of routes
+ * @internal
  */
-type AgnosticBaseRouteObject = {
+type BaseRouteObject = {
+    /**
+     * Whether the path should be case-sensitive. Defaults to `false`.
+     */
     caseSensitive?: boolean;
+    /**
+     * The path pattern to match. If unspecified or empty, then this becomes a
+     * layout route.
+     */
     path?: string;
+    /**
+     * The unique identifier for this route (for use with {@link DataRouter}s)
+     */
     id?: string;
+    /**
+     * The route middleware.
+     * See [`middleware`](../../start/data/route-object#middleware).
+     */
     middleware?: MiddlewareFunction[];
+    /**
+     * The route loader.
+     * See [`loader`](../../start/data/route-object#loader).
+     */
     loader?: LoaderFunction | boolean;
+    /**
+     * The route action.
+     * See [`action`](../../start/data/route-object#action).
+     */
     action?: ActionFunction | boolean;
     hasErrorBoundary?: boolean;
+    /**
+     * The route shouldRevalidate function.
+     * See [`shouldRevalidate`](../../start/data/route-object#shouldRevalidate).
+     */
     shouldRevalidate?: ShouldRevalidateFunction;
+    /**
+     * The route handle.
+     */
     handle?: any;
-    lazy?: LazyRouteDefinition<AgnosticBaseRouteObject>;
+    /**
+     * A function that returns a promise that resolves to the route object.
+     * Used for code-splitting routes.
+     * See [`lazy`](../../start/data/route-object#lazy).
+     */
+    lazy?: LazyRouteDefinition<BaseRouteObject>;
+    /**
+     * The React Component to render when this route matches.
+     * Mutually exclusive with `element`.
+     */
+    Component?: React.ComponentType | null;
+    /**
+     * The React element to render when this Route matches.
+     * Mutually exclusive with `Component`.
+     */
+    element?: React.ReactNode | null;
+    /**
+     * The React Component to render at this route if an error occurs.
+     * Mutually exclusive with `errorElement`.
+     */
+    ErrorBoundary?: React.ComponentType | null;
+    /**
+     * The React element to render at this route if an error occurs.
+     * Mutually exclusive with `ErrorBoundary`.
+     */
+    errorElement?: React.ReactNode | null;
+    /**
+     * The React Component to render while this router is loading data.
+     * Mutually exclusive with `hydrateFallbackElement`.
+     */
+    HydrateFallback?: React.ComponentType | null;
+    /**
+     * The React element to render while this router is loading data.
+     * Mutually exclusive with `HydrateFallback`.
+     */
+    hydrateFallbackElement?: React.ReactNode | null;
 };
 /**
  * Index routes must not have children
  */
-type AgnosticIndexRouteObject = AgnosticBaseRouteObject & {
+type IndexRouteObject = BaseRouteObject & {
+    /**
+     * Child Route objects - not valid on index routes.
+     */
     children?: undefined;
+    /**
+     * Whether this is an index route.
+     */
     index: true;
 };
 /**
- * Non-index routes may have children, but cannot have index
+ * Non-index routes may have children, but cannot have `index` set to `true`.
  */
-type AgnosticNonIndexRouteObject = AgnosticBaseRouteObject & {
-    children?: AgnosticRouteObject[];
+type NonIndexRouteObject = BaseRouteObject & {
+    /**
+     * Child Route objects.
+     */
+    children?: RouteObject[];
+    /**
+     * Whether this is an index route - must be `false` or undefined on non-index routes.
+     */
     index?: false;
 };
 /**
  * A route object represents a logical route, with (optionally) its child
  * routes organized in a tree-like structure.
  */
-type AgnosticRouteObject = AgnosticIndexRouteObject | AgnosticNonIndexRouteObject;
-type AgnosticDataIndexRouteObject = AgnosticIndexRouteObject & {
+type RouteObject = IndexRouteObject | NonIndexRouteObject;
+type DataIndexRouteObject = IndexRouteObject & {
     id: string;
 };
-type AgnosticDataNonIndexRouteObject = AgnosticNonIndexRouteObject & {
-    children?: AgnosticDataRouteObject[];
+type DataNonIndexRouteObject = NonIndexRouteObject & {
+    children?: DataRouteObject[];
     id: string;
 };
 /**
  * A data route object, which is just a RouteObject with a required unique ID
  */
-type AgnosticDataRouteObject = AgnosticDataIndexRouteObject | AgnosticDataNonIndexRouteObject;
+type DataRouteObject = DataIndexRouteObject | DataNonIndexRouteObject;
 /**
  * The parameters that were parsed from the URL path.
  */
@@ -680,7 +765,7 @@ type Params<Key extends string = string> = {
 /**
  * A RouteMatch contains info about how a route matched a URL.
  */
-interface AgnosticRouteMatch<ParamKey extends string = string, RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject> {
+interface RouteMatch<ParamKey extends string = string, RouteObjectType extends RouteObject = RouteObject> {
     /**
      * The names and values of dynamic parameters in the URL.
      */
@@ -698,7 +783,7 @@ interface AgnosticRouteMatch<ParamKey extends string = string, RouteObjectType e
      */
     route: RouteObjectType;
 }
-interface AgnosticDataRouteMatch extends AgnosticRouteMatch<string, AgnosticDataRouteObject> {
+interface DataRouteMatch extends RouteMatch<string, DataRouteObject> {
 }
 /**
  * Matches the given routes to a location and returns the match data.
@@ -726,14 +811,14 @@ interface AgnosticDataRouteMatch extends AgnosticRouteMatch<string, AgnosticData
  * Defaults to `/`.
  * @returns An array of matched routes, or `null` if no matches were found.
  */
-declare function matchRoutes<RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject>(routes: RouteObjectType[], locationArg: Partial<Location> | string, basename?: string): AgnosticRouteMatch<string, RouteObjectType>[] | null;
+declare function matchRoutes<RouteObjectType extends RouteObject = RouteObject>(routes: RouteObjectType[], locationArg: Partial<Location> | string, basename?: string): RouteMatch<string, RouteObjectType>[] | null;
 interface UIMatch<Data = unknown, Handle = unknown> {
     id: string;
     pathname: string;
     /**
      * {@link https://reactrouter.com/start/framework/routing#dynamic-segments Dynamic route params} for the matched route.
      */
-    params: AgnosticRouteMatch["params"];
+    params: RouteMatch["params"];
     /**
      * The return value from the matched route's loader or clientLoader. This might
      * be `undefined` if this route's `loader` (or a deeper route's `loader`) threw
@@ -1034,7 +1119,7 @@ interface Router {
      *
      * Return the routes for this router instance
      */
-    get routes(): AgnosticDataRouteObject[];
+    get routes(): DataRouteObject[];
     /**
      * @private
      * PRIVATE - DO NOT USE
@@ -1184,7 +1269,7 @@ interface Router {
      *                                       existing routes. Intended for RSC-usage
      *                                       only.
      */
-    patchRoutes(routeId: string | null, children: AgnosticRouteObject[], unstable_allowElementMutations?: boolean): void;
+    patchRoutes(routeId: string | null, children: RouteObject[], unstable_allowElementMutations?: boolean): void;
     /**
      * @private
      * PRIVATE - DO NOT USE
@@ -1192,7 +1277,7 @@ interface Router {
      * HMR needs to pass in-flight route updates to React Router
      * TODO: Replace this with granular route update APIs (addRoute, updateRoute, deleteRoute)
      */
-    _internalSetRoutes(routes: AgnosticRouteObject[]): void;
+    _internalSetRoutes(routes: RouteObject[]): void;
     /**
      * @private
      * PRIVATE - DO NOT USE
@@ -1224,7 +1309,7 @@ interface RouterState {
     /**
      * The current set of route matches
      */
-    matches: AgnosticDataRouteMatch[];
+    matches: DataRouteMatch[];
     /**
      * Tracks whether we've completed our initial data load
      */
@@ -1282,12 +1367,13 @@ type HydrationState = Partial<Pick<RouterState, "loaderData" | "actionData" | "e
  * Future flags to toggle new feature behavior
  */
 interface FutureConfig {
+    unstable_passThroughRequests: boolean;
 }
 /**
  * Initialization options for createRouter
  */
 interface RouterInit {
-    routes: AgnosticRouteObject[];
+    routes: RouteObject[];
     history: History;
     basename?: string;
     getContext?: () => MaybePromise<RouterContextProvider>;
@@ -1298,7 +1384,7 @@ interface RouterInit {
     hydrationData?: HydrationState;
     window?: Window;
     dataStrategy?: DataStrategyFunction;
-    patchRoutesOnNavigation?: AgnosticPatchRoutesOnNavigationFunction;
+    patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
 }
 /**
  * State returned from a server-side query() call
@@ -1319,22 +1405,24 @@ interface StaticHandlerContext {
  * A StaticHandler instance manages a singular SSR navigation/fetch event
  */
 interface StaticHandler {
-    dataRoutes: AgnosticDataRouteObject[];
+    dataRoutes: DataRouteObject[];
     query(request: Request, opts?: {
         requestContext?: unknown;
-        filterMatchesToLoad?: (match: AgnosticDataRouteMatch) => boolean;
+        filterMatchesToLoad?: (match: DataRouteMatch) => boolean;
         skipLoaderErrorBubbling?: boolean;
         skipRevalidation?: boolean;
         dataStrategy?: DataStrategyFunction<unknown>;
         generateMiddlewareResponse?: (query: (r: Request, args?: {
-            filterMatchesToLoad?: (match: AgnosticDataRouteMatch) => boolean;
+            filterMatchesToLoad?: (match: DataRouteMatch) => boolean;
         }) => Promise<StaticHandlerContext | Response>) => MaybePromise<Response>;
+        unstable_normalizePath?: (request: Request) => Path;
     }): Promise<StaticHandlerContext | Response>;
     queryRoute(request: Request, opts?: {
         routeId?: string;
         requestContext?: unknown;
         dataStrategy?: DataStrategyFunction<unknown>;
         generateMiddlewareResponse?: (queryRoute: (r: Request) => Promise<Response>) => MaybePromise<Response>;
+        unstable_normalizePath?: (request: Request) => Path;
     }): Promise<any>;
 }
 type ViewTransitionOpts = {
@@ -1562,216 +1650,9 @@ interface CreateStaticHandlerOptions {
     basename?: string;
     mapRouteProperties?: MapRoutePropertiesFunction;
     unstable_instrumentations?: Pick<unstable_ServerInstrumentation, "route">[];
-    future?: {};
-}
-declare function createStaticHandler(routes: AgnosticRouteObject[], opts?: CreateStaticHandlerOptions): StaticHandler;
-
-interface AwaitResolveRenderFunction<Resolve = any> {
-    (data: Awaited<Resolve>): React.ReactNode;
-}
-/**
- * @category Types
- */
-interface AwaitProps<Resolve> {
-    /**
-     * When using a function, the resolved value is provided as the parameter.
-     *
-     * ```tsx [2]
-     * <Await resolve={reviewsPromise}>
-     *   {(resolvedReviews) => <Reviews items={resolvedReviews} />}
-     * </Await>
-     * ```
-     *
-     * When using React elements, {@link useAsyncValue} will provide the
-     * resolved value:
-     *
-     * ```tsx [2]
-     * <Await resolve={reviewsPromise}>
-     *   <Reviews />
-     * </Await>
-     *
-     * function Reviews() {
-     *   const resolvedReviews = useAsyncValue();
-     *   return <div>...</div>;
-     * }
-     * ```
-     */
-    children: React.ReactNode | AwaitResolveRenderFunction<Resolve>;
-    /**
-     * The error element renders instead of the `children` when the [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
-     * rejects.
-     *
-     * ```tsx
-     * <Await
-     *   errorElement={<div>Oops</div>}
-     *   resolve={reviewsPromise}
-     * >
-     *   <Reviews />
-     * </Await>
-     * ```
-     *
-     * To provide a more contextual error, you can use the {@link useAsyncError} in a
-     * child component
-     *
-     * ```tsx
-     * <Await
-     *   errorElement={<ReviewsError />}
-     *   resolve={reviewsPromise}
-     * >
-     *   <Reviews />
-     * </Await>
-     *
-     * function ReviewsError() {
-     *   const error = useAsyncError();
-     *   return <div>Error loading reviews: {error.message}</div>;
-     * }
-     * ```
-     *
-     * If you do not provide an `errorElement`, the rejected value will bubble up
-     * to the nearest route-level [`ErrorBoundary`](../../start/framework/route-module#errorboundary)
-     * and be accessible via the {@link useRouteError} hook.
-     */
-    errorElement?: React.ReactNode;
-    /**
-     * Takes a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
-     * returned from a [`loader`](../../start/framework/route-module#loader) to be
-     * resolved and rendered.
-     *
-     * ```tsx
-     * import { Await, useLoaderData } from "react-router";
-     *
-     * export async function loader() {
-     *   let reviews = getReviews(); // not awaited
-     *   let book = await getBook();
-     *   return {
-     *     book,
-     *     reviews, // this is a promise
-     *   };
-     * }
-     *
-     * export default function Book() {
-     *   const {
-     *     book,
-     *     reviews, // this is the same promise
-     *   } = useLoaderData();
-     *
-     *   return (
-     *     <div>
-     *       <h1>{book.title}</h1>
-     *       <p>{book.description}</p>
-     *       <React.Suspense fallback={<ReviewsSkeleton />}>
-     *         <Await
-     *           // and is the promise we pass to Await
-     *           resolve={reviews}
-     *         >
-     *           <Reviews />
-     *         </Await>
-     *       </React.Suspense>
-     *     </div>
-     *   );
-     * }
-     * ```
-     */
-    resolve: Resolve;
-}
-/**
- * Used to render promise values with automatic error handling.
- *
- * **Note:** `<Await>` expects to be rendered inside a [`<React.Suspense>`](https://react.dev/reference/react/Suspense)
- *
- * @example
- * import { Await, useLoaderData } from "react-router";
- *
- * export async function loader() {
- *   // not awaited
- *   const reviews = getReviews();
- *   // awaited (blocks the transition)
- *   const book = await fetch("/api/book").then((res) => res.json());
- *   return { book, reviews };
- * }
- *
- * function Book() {
- *   const { book, reviews } = useLoaderData();
- *   return (
- *     <div>
- *       <h1>{book.title}</h1>
- *       <p>{book.description}</p>
- *       <React.Suspense fallback={<ReviewsSkeleton />}>
- *         <Await
- *           resolve={reviews}
- *           errorElement={
- *             <div>Could not load reviews 😬</div>
- *           }
- *           children={(resolvedReviews) => (
- *             <Reviews items={resolvedReviews} />
- *           )}
- *         />
- *       </React.Suspense>
- *     </div>
- *   );
- * }
- *
- * @public
- * @category Components
- * @mode framework
- * @mode data
- * @param props Props
- * @param {AwaitProps.children} props.children n/a
- * @param {AwaitProps.errorElement} props.errorElement n/a
- * @param {AwaitProps.resolve} props.resolve n/a
- * @returns React element for the rendered awaited value
- */
-declare function Await$1<Resolve>({ children, errorElement, resolve, }: AwaitProps<Resolve>): React.JSX.Element;
-
-interface IndexRouteObject {
-    caseSensitive?: AgnosticIndexRouteObject["caseSensitive"];
-    path?: AgnosticIndexRouteObject["path"];
-    id?: AgnosticIndexRouteObject["id"];
-    middleware?: AgnosticIndexRouteObject["middleware"];
-    loader?: AgnosticIndexRouteObject["loader"];
-    action?: AgnosticIndexRouteObject["action"];
-    hasErrorBoundary?: AgnosticIndexRouteObject["hasErrorBoundary"];
-    shouldRevalidate?: AgnosticIndexRouteObject["shouldRevalidate"];
-    handle?: AgnosticIndexRouteObject["handle"];
-    index: true;
-    children?: undefined;
-    element?: React.ReactNode | null;
-    hydrateFallbackElement?: React.ReactNode | null;
-    errorElement?: React.ReactNode | null;
-    Component?: React.ComponentType | null;
-    HydrateFallback?: React.ComponentType | null;
-    ErrorBoundary?: React.ComponentType | null;
-    lazy?: LazyRouteDefinition<RouteObject>;
-}
-interface NonIndexRouteObject {
-    caseSensitive?: AgnosticNonIndexRouteObject["caseSensitive"];
-    path?: AgnosticNonIndexRouteObject["path"];
-    id?: AgnosticNonIndexRouteObject["id"];
-    middleware?: AgnosticNonIndexRouteObject["middleware"];
-    loader?: AgnosticNonIndexRouteObject["loader"];
-    action?: AgnosticNonIndexRouteObject["action"];
-    hasErrorBoundary?: AgnosticNonIndexRouteObject["hasErrorBoundary"];
-    shouldRevalidate?: AgnosticNonIndexRouteObject["shouldRevalidate"];
-    handle?: AgnosticNonIndexRouteObject["handle"];
-    index?: false;
-    children?: RouteObject[];
-    element?: React.ReactNode | null;
-    hydrateFallbackElement?: React.ReactNode | null;
-    errorElement?: React.ReactNode | null;
-    Component?: React.ComponentType | null;
-    HydrateFallback?: React.ComponentType | null;
-    ErrorBoundary?: React.ComponentType | null;
-    lazy?: LazyRouteDefinition<RouteObject>;
-}
-type RouteObject = IndexRouteObject | NonIndexRouteObject;
-type DataRouteObject = RouteObject & {
-    children?: DataRouteObject[];
-    id: string;
-};
-interface RouteMatch<ParamKey extends string = string, RouteObjectType extends RouteObject = RouteObject> extends AgnosticRouteMatch<ParamKey, RouteObjectType> {
-}
-interface DataRouteMatch extends RouteMatch<string, DataRouteObject> {
+    future?: Partial<FutureConfig>;
 }
+declare function createStaticHandler(routes: RouteObject[], opts?: CreateStaticHandlerOptions): StaticHandler;
 
 type Primitive = null | undefined | string | number | boolean | symbol | bigint;
 type LiteralUnion<LiteralType, BaseType extends Primitive> = LiteralType | (BaseType & Record<never, never>);
@@ -1917,6 +1798,15 @@ type ClientDataFunctionArgs<Params> = {
      * @note Because client data functions are called before a network request is made, the Request object does not include the headers which the browser automatically adds. React Router infers the "content-type" header from the enc-type of the form that performed the submission.
      **/
     request: Request;
+    /**
+     * A URL instance representing the application location being navigated to or fetched.
+     * Without `future.unstable_passThroughRequests` enabled, this matches `request.url`.
+     * With `future.unstable_passThroughRequests` enabled, this is a normalized
+     * URL with React-Router-specific implementation details removed (`.data`
+     * pathnames, `index`/`_routes` search params).
+     * The URL includes the origin from the request for convenience.
+     */
+    unstable_url: URL;
     /**
      * {@link https://reactrouter.com/start/framework/routing#dynamic-segments Dynamic route params} for the current route.
      * @example
@@ -2107,6 +1997,163 @@ type LdJsonValue = LdJsonPrimitive | LdJsonObject | LdJsonArray;
  */
 type RouteHandle = unknown;
 
+interface AwaitResolveRenderFunction<Resolve = any> {
+    (data: Awaited<Resolve>): React.ReactNode;
+}
+/**
+ * @category Types
+ */
+interface AwaitProps<Resolve> {
+    /**
+     * When using a function, the resolved value is provided as the parameter.
+     *
+     * ```tsx [2]
+     * <Await resolve={reviewsPromise}>
+     *   {(resolvedReviews) => <Reviews items={resolvedReviews} />}
+     * </Await>
+     * ```
+     *
+     * When using React elements, {@link useAsyncValue} will provide the
+     * resolved value:
+     *
+     * ```tsx [2]
+     * <Await resolve={reviewsPromise}>
+     *   <Reviews />
+     * </Await>
+     *
+     * function Reviews() {
+     *   const resolvedReviews = useAsyncValue();
+     *   return <div>...</div>;
+     * }
+     * ```
+     */
+    children: React.ReactNode | AwaitResolveRenderFunction<Resolve>;
+    /**
+     * The error element renders instead of the `children` when the [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+     * rejects.
+     *
+     * ```tsx
+     * <Await
+     *   errorElement={<div>Oops</div>}
+     *   resolve={reviewsPromise}
+     * >
+     *   <Reviews />
+     * </Await>
+     * ```
+     *
+     * To provide a more contextual error, you can use the {@link useAsyncError} in a
+     * child component
+     *
+     * ```tsx
+     * <Await
+     *   errorElement={<ReviewsError />}
+     *   resolve={reviewsPromise}
+     * >
+     *   <Reviews />
+     * </Await>
+     *
+     * function ReviewsError() {
+     *   const error = useAsyncError();
+     *   return <div>Error loading reviews: {error.message}</div>;
+     * }
+     * ```
+     *
+     * If you do not provide an `errorElement`, the rejected value will bubble up
+     * to the nearest route-level [`ErrorBoundary`](../../start/framework/route-module#errorboundary)
+     * and be accessible via the {@link useRouteError} hook.
+     */
+    errorElement?: React.ReactNode;
+    /**
+     * Takes a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+     * returned from a [`loader`](../../start/framework/route-module#loader) to be
+     * resolved and rendered.
+     *
+     * ```tsx
+     * import { Await, useLoaderData } from "react-router";
+     *
+     * export async function loader() {
+     *   let reviews = getReviews(); // not awaited
+     *   let book = await getBook();
+     *   return {
+     *     book,
+     *     reviews, // this is a promise
+     *   };
+     * }
+     *
+     * export default function Book() {
+     *   const {
+     *     book,
+     *     reviews, // this is the same promise
+     *   } = useLoaderData();
+     *
+     *   return (
+     *     <div>
+     *       <h1>{book.title}</h1>
+     *       <p>{book.description}</p>
+     *       <React.Suspense fallback={<ReviewsSkeleton />}>
+     *         <Await
+     *           // and is the promise we pass to Await
+     *           resolve={reviews}
+     *         >
+     *           <Reviews />
+     *         </Await>
+     *       </React.Suspense>
+     *     </div>
+     *   );
+     * }
+     * ```
+     */
+    resolve: Resolve;
+}
+/**
+ * Used to render promise values with automatic error handling.
+ *
+ * **Note:** `<Await>` expects to be rendered inside a [`<React.Suspense>`](https://react.dev/reference/react/Suspense)
+ *
+ * @example
+ * import { Await, useLoaderData } from "react-router";
+ *
+ * export async function loader() {
+ *   // not awaited
+ *   const reviews = getReviews();
+ *   // awaited (blocks the transition)
+ *   const book = await fetch("/api/book").then((res) => res.json());
+ *   return { book, reviews };
+ * }
+ *
+ * function Book() {
+ *   const { book, reviews } = useLoaderData();
+ *   return (
+ *     <div>
+ *       <h1>{book.title}</h1>
+ *       <p>{book.description}</p>
+ *       <React.Suspense fallback={<ReviewsSkeleton />}>
+ *         <Await
+ *           resolve={reviews}
+ *           errorElement={
+ *             <div>Could not load reviews 😬</div>
+ *           }
+ *           children={(resolvedReviews) => (
+ *             <Reviews items={resolvedReviews} />
+ *           )}
+ *         />
+ *       </React.Suspense>
+ *     </div>
+ *   );
+ * }
+ *
+ * @public
+ * @category Components
+ * @mode framework
+ * @mode data
+ * @param props Props
+ * @param {AwaitProps.children} props.children n/a
+ * @param {AwaitProps.errorElement} props.errorElement n/a
+ * @param {AwaitProps.resolve} props.resolve n/a
+ * @returns React element for the rendered awaited value
+ */
+declare function Await$1<Resolve>({ children, errorElement, resolve, }: AwaitProps<Resolve>): React.JSX.Element;
+
 declare function getRequest(): Request;
 declare const redirect: typeof redirect$1;
 declare const redirectDocument: typeof redirectDocument$1;