UNPKG

react-router/dist/development/lib/components.d.ts

Version:
34.7 kBTypeScriptView Raw
1
2import { Action, InitialEntry, Location, To } from "./router/history.js";
3import { DataStrategyFunction, IndexRouteObject, LazyRouteFunction, NonIndexRouteObject, Params, PatchRoutesOnNavigationFunction, RouteMatch, RouteObject, UIMatch } from "./router/utils.js";
4import { FutureConfig, HydrationState, RelativeRoutingType, Router as Router$1, RouterInit } from "./router/router.js";
5import { Navigator } from "./context.js";
6import { ClientInstrumentation } from "./router/instrumentation.js";
7import * as React$1 from "react";
8
9//#region lib/components.d.ts
10declare const hydrationRouteProperties: (keyof RouteObject)[];
11/**
* @category Data Routers
*/
14interface MemoryRouterOpts {
/**
 * Basename path for the application.
 */
basename?: string;
/**
 * A function that returns an {@link RouterContextProvider} instance
 * which is provided as the `context` argument to client [`action`](../../start/data/route-object#action)s,
 * [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
 * This function is called to generate a fresh `context` instance on each
 * navigation or fetcher call.
 */
getContext?: RouterInit["getContext"];
/**
 * Future flags to enable for the router.
 */
future?: Partial<FutureConfig>;
/**
 * Hydration data to initialize the router with if you have already performed
 * data loading on the server.
 */
hydrationData?: HydrationState;
/**
 * Initial entries in the in-memory history stack
 */
initialEntries?: InitialEntry[];
/**
 * Index of `initialEntries` the application should initialize to
 */
initialIndex?: number;
/**
 * Array of instrumentation objects allowing you to instrument the router and
 * individual routes prior to router initialization (and on any subsequently
 * added routes via `route.lazy` or `patchRoutesOnNavigation`).  This is
 * mostly useful for observability such as wrapping navigations, fetches,
 * as well as route loaders/actions/middlewares with logging and/or performance
 * tracing.  See the [docs](../../how-to/instrumentation) for more information.
 *
 * ```tsx
 * let router = createBrowserRouter(routes, {
 *   instrumentations: [logging]
 * });
 *
 *
 * let logging = {
 *   router({ instrument }) {
 *     instrument({
 *       navigate: (impl, info) => logExecution(`navigate ${info.to}`, impl),
 *       fetch: (impl, info) => logExecution(`fetch ${info.to}`, impl)
 *     });
 *   },
 *   route({ instrument, id }) {
 *     instrument({
 *       middleware: (impl, info) => logExecution(
 *         `middleware ${info.request.url} (route ${id})`,
 *         impl
 *       ),
 *       loader: (impl, info) => logExecution(
 *         `loader ${info.request.url} (route ${id})`,
 *         impl
 *       ),
 *       action: (impl, info) => logExecution(
 *         `action ${info.request.url} (route ${id})`,
 *         impl
 *       ),
 *     })
 *   }
 * };
 *
 * async function logExecution(label: string, impl: () => Promise<void>) {
 *   let start = performance.now();
 *   console.log(`start ${label}`);
 *   await impl();
 *   let duration = Math.round(performance.now() - start);
 *   console.log(`end ${label} (${duration}ms)`);
 * }
 * ```
 */
instrumentations?: ClientInstrumentation[];
/**
 * Override the default data strategy of running loaders in parallel -
 * see the [docs](../../how-to/data-strategy) for more information.
 *
 * ```tsx
 * let router = createBrowserRouter(routes, {
 *   async dataStrategy({
 *     matches,
 *     request,
 *     runClientMiddleware,
 *   }) {
 *     const matchesToLoad = matches.filter((m) =>
 *       m.shouldCallHandler(),
 *     );
 *
 *     const results: Record<string, DataStrategyResult> = {};
 *     await runClientMiddleware(() =>
 *       Promise.all(
 *         matchesToLoad.map(async (match) => {
 *           results[match.route.id] = await match.resolve();
 *         }),
 *       ),
 *     );
 *     return results;
 *   },
 * });
 * ```
 */
dataStrategy?: DataStrategyFunction;
/**
 * Lazily define portions of the route tree on navigations.
 */
patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
126}
127/**
* Create a new {@link DataRouter} that manages the application path using an
* in-memory [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
* stack. Useful for non-browser environments without a DOM API.
*
* Data Routers should not be held in React state. You should create your router
* once outside of the React tree and pass it to {@link RouterProvider | `<RouterProvider>`}.
* You can use `patchRoutesOnNavigation` to add additional routes programmatically.
*
* @public
* @category Data Routers
* @mode data
* @param routes Application routes
* @param opts Options
* @param {MemoryRouterOpts.basename} opts.basename n/a
* @param {MemoryRouterOpts.dataStrategy} opts.dataStrategy n/a
* @param {MemoryRouterOpts.future} opts.future n/a
* @param {MemoryRouterOpts.getContext} opts.getContext n/a
* @param {MemoryRouterOpts.hydrationData} opts.hydrationData n/a
* @param {MemoryRouterOpts.initialEntries} opts.initialEntries n/a
* @param {MemoryRouterOpts.initialIndex} opts.initialIndex n/a
* @param {MemoryRouterOpts.instrumentations} opts.instrumentations n/a
* @param {MemoryRouterOpts.patchRoutesOnNavigation} opts.patchRoutesOnNavigation n/a
* @returns An initialized {@link DataRouter} to pass to {@link RouterProvider | `<RouterProvider>`}
*/
152declare function createMemoryRouter(routes: RouteObject[], opts?: MemoryRouterOpts): Router$1;
153/**
* Function signature for client side error handling for loader/actions errors
* and rendering errors via `componentDidCatch`
*/
157interface ClientOnErrorFunction {
(error: unknown, info: {
  location: Location;
  params: Params;
  pattern: string;
  errorInfo?: React$1.ErrorInfo;
}): void;
164}
165/**
* @category Types
*/
168interface RouterProviderProps {
/**
 * The {@link DataRouter} instance to use for navigation and data fetching. The
 * router prop should be a single router instance created outside of the React
 * tree. Avoid creating new routers during React renders/re-renders.
 */
router: Router$1;
/**
 * The [`ReactDOM.flushSync`](https://react.dev/reference/react-dom/flushSync)
 * implementation to use for flushing updates.
 *
 * You usually don't have to worry about this:
 * - The `RouterProvider` exported from `react-router/dom` handles this internally for you
 * - If you are rendering in a non-DOM environment, you can import
 *   `RouterProvider` from `react-router` and ignore this prop
 */
flushSync?: <R>(fn: () => R) => R;
/**
 * An error handler function that will be called for any middleware, loader, action,
 * or render errors that are encountered in your application.  This is useful for
 * logging or reporting errors instead of in the {@link ErrorBoundary} because it's not
 * subject to re-rendering and will only run one time per error.
 *
 * The `errorInfo` parameter is passed along from
 * [`componentDidCatch`](https://react.dev/reference/react/Component#componentdidcatch)
 * and is only present for render errors.
 *
 * ```tsx
 * <RouterProvider onError={(error, info) => {
 *   let { location, params, pattern, errorInfo } = info;
 *   console.error(error, location, errorInfo);
 *   reportToErrorService(error, location, errorInfo);
 * }} />
 * ```
 */
onError?: ClientOnErrorFunction;
/**
 * Control whether router state updates are internally wrapped in
 * [`React.startTransition`](https://react.dev/reference/react/startTransition).
 *
 * - When left `undefined`, all state updates are wrapped in
 *   `React.startTransition`
 *   - This can lead to buggy behaviors if you are wrapping your own
 *     navigations/fetchers in `startTransition`.
 * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
 *   in `React.startTransition` and router state changes will be wrapped in
 *   `React.startTransition` and also sent through
 *   [`useOptimistic`](https://react.dev/reference/react/useOptimistic) to
 *   surface mid-navigation router state changes to the UI.
 * - When set to `false`, the router will not leverage `React.startTransition` or
 *   `React.useOptimistic` on any navigations or state changes.
 *
 * For more information, please see the [docs](../../explanation/react-transitions).
 */
useTransitions?: boolean;
223}
224/**
* Render the UI for the given {@link DataRouter}. This component should
* typically be at the top of an app's element tree. The router prop should
* be a single router instance created outside of the React tree. Avoid
* creating new routers during React renders/re-renders.
*
* ```tsx
* import { createBrowserRouter } from "react-router";
* import { RouterProvider } from "react-router/dom";
* import { createRoot } from "react-dom/client";
*
* const router = createBrowserRouter(routes);
* createRoot(document.getElementById("root")).render(
*   <RouterProvider router={router} />
* );
* ```
*
* <docs-info>Please note that this component is exported both from
* `react-router` and `react-router/dom` with the only difference being that the
* latter automatically wires up `react-dom`'s [`flushSync`](https://react.dev/reference/react-dom/flushSync)
* implementation. You _almost always_ want to use the version from
* `react-router/dom` unless you're running in a non-DOM environment.</docs-info>
*
*
* @public
* @category Data Routers
* @mode data
* @param props Props
* @param {RouterProviderProps.flushSync} props.flushSync n/a
* @param {RouterProviderProps.onError} props.onError n/a
* @param {RouterProviderProps.router} props.router n/a
* @param {RouterProviderProps.useTransitions} props.useTransitions n/a
* @returns React element for the rendered router
*/
258declare function RouterProvider({
router,
flushSync: reactDomFlushSyncImpl,
onError,
useTransitions
263}: RouterProviderProps): React$1.ReactElement;
264/**
* @category Types
*/
267interface MemoryRouterProps {
/**
 * Application basename
 */
basename?: string;
/**
 * Nested {@link Route} elements describing the route tree
 */
children?: React$1.ReactNode;
/**
 * Initial entries in the in-memory history stack
 */
initialEntries?: InitialEntry[];
/**
 * Index of `initialEntries` the application should initialize to
 */
initialIndex?: number;
/**
 * Control whether router state updates are internally wrapped in
 * [`React.startTransition`](https://react.dev/reference/react/startTransition).
 *
 * - When left `undefined`, all router state updates are wrapped in
 *   `React.startTransition`
 * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
 *   in `React.startTransition` and all router state updates are wrapped in
 *   `React.startTransition`
 * - When set to `false`, the router will not leverage `React.startTransition`
 *   on any navigations or state changes.
 *
 * For more information, please see the [docs](../../explanation/react-transitions).
 */
useTransitions?: boolean;
299}
300/**
* A declarative {@link Router | `<Router>`} that stores all entries in memory.
*
* @public
* @category Declarative Routers
* @mode declarative
* @param props Props
* @param {MemoryRouterProps.basename} props.basename n/a
* @param {MemoryRouterProps.children} props.children n/a
* @param {MemoryRouterProps.initialEntries} props.initialEntries n/a
* @param {MemoryRouterProps.initialIndex} props.initialIndex n/a
* @param {MemoryRouterProps.useTransitions} props.useTransitions n/a
* @returns A declarative in-memory {@link Router | `<Router>`} for client-side
* routing.
*/
315declare function MemoryRouter({
basename,
children,
initialEntries,
initialIndex,
useTransitions
321}: MemoryRouterProps): React$1.ReactElement;
322/**
* @category Types
*/
325interface NavigateProps {
/**
 * The path to navigate to. This can be a string or a {@link Path} object
 */
to: To;
/**
 * Whether to replace the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
 * stack
 */
replace?: boolean;
/**
 * State to pass to the new {@link Location} to store in [`history.state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state).
 */
state?: any;
/**
 * How to interpret relative routing in the `to` prop.
 * See {@link RelativeRoutingType}.
 */
relative?: RelativeRoutingType;
344}
345/**
* A component-based version of {@link useNavigate} to use in a
* [`React.Component` class](https://react.dev/reference/react/Component) where
* hooks cannot be used.
*
* It's recommended to avoid using this component in favor of {@link useNavigate}.
*
* @example
* <Navigate to="/tasks" />
*
* @public
* @category Components
* @param props Props
* @param {NavigateProps.relative} props.relative n/a
* @param {NavigateProps.replace} props.replace n/a
* @param {NavigateProps.state} props.state n/a
* @param {NavigateProps.to} props.to n/a
* @returns {void}
*
*/
365declare function Navigate({
to,
replace,
state,
relative
370}: NavigateProps): null;
371/**
* @category Types
*/
374interface OutletProps {
/**
 * Provides a context value to the element tree below the outlet. Use when
 * the parent route needs to provide values to child routes.
 *
 * ```tsx
 * <Outlet context={myContextValue} />
 * ```
 *
 * Access the context with {@link useOutletContext}.
 */
context?: unknown;
386}
387/**
* Renders the matching child route of a parent route or nothing if no child
* route matches.
*
* @example
* import { Outlet } from "react-router";
*
* export default function SomeParent() {
*   return (
*     <div>
*       <h1>Parent Content</h1>
*       <Outlet />
*     </div>
*   );
* }
*
* @public
* @category Components
* @param props Props
* @param {OutletProps.context} props.context n/a
* @returns React element for the rendered outlet or `null` if no child route matches.
*/
409declare function Outlet(props: OutletProps): React$1.ReactElement | null;
410/**
* @category Types
*/
413interface PathRouteProps {
/**
 * Whether the path should be case-sensitive. Defaults to `false`.
 */
caseSensitive?: NonIndexRouteObject["caseSensitive"];
/**
 * The path pattern to match. If unspecified or empty, then this becomes a
 * layout route.
 */
path?: NonIndexRouteObject["path"];
/**
 * The unique identifier for this route (for use with {@link DataRouter}s)
 */
id?: NonIndexRouteObject["id"];
/**
 * 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?: LazyRouteFunction<NonIndexRouteObject>;
/**
 * The route middleware.
 * See [`middleware`](../../start/data/route-object#middleware).
 */
middleware?: NonIndexRouteObject["middleware"];
/**
 * The route loader.
 * See [`loader`](../../start/data/route-object#loader).
 */
loader?: NonIndexRouteObject["loader"];
/**
 * The route action.
 * See [`action`](../../start/data/route-object#action).
 */
action?: NonIndexRouteObject["action"];
/**
 * The route shouldRevalidate function.
 * See [`shouldRevalidate`](../../start/data/route-object#shouldRevalidate).
 */
shouldRevalidate?: NonIndexRouteObject["shouldRevalidate"];
/**
 * The route handle.
 */
handle?: NonIndexRouteObject["handle"];
/**
 * Whether this is an index route.
 */
index?: false;
/**
 * Child Route components
 */
children?: React$1.ReactNode;
/**
 * The React element to render when this Route matches.
 * Mutually exclusive with `Component`.
 */
element?: React$1.ReactNode | null;
/**
 * The React element to render while this router is loading data.
 * Mutually exclusive with `HydrateFallback`.
 */
hydrateFallbackElement?: React$1.ReactNode | null;
/**
 * The React element to render at this route if an error occurs.
 * Mutually exclusive with `ErrorBoundary`.
 */
errorElement?: React$1.ReactNode | null;
/**
 * The React Component to render when this route matches.
 * Mutually exclusive with `element`.
 */
Component?: React$1.ComponentType | null;
/**
 * The React Component to render while this router is loading data.
 * Mutually exclusive with `hydrateFallbackElement`.
 */
HydrateFallback?: React$1.ComponentType | null;
/**
 * The React Component to render at this route if an error occurs.
 * Mutually exclusive with `errorElement`.
 */
ErrorBoundary?: React$1.ComponentType | null;
495}
496/**
* @category Types
*/
499interface LayoutRouteProps extends PathRouteProps {}
500/**
* @category Types
*/
503interface IndexRouteProps {
/**
 * Whether the path should be case-sensitive. Defaults to `false`.
 */
caseSensitive?: IndexRouteObject["caseSensitive"];
/**
 * The path pattern to match. If unspecified or empty, then this becomes a
 * layout route.
 */
path?: IndexRouteObject["path"];
/**
 * The unique identifier for this route (for use with {@link DataRouter}s)
 */
id?: IndexRouteObject["id"];
/**
 * 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?: LazyRouteFunction<IndexRouteObject>;
/**
 * The route middleware.
 * See [`middleware`](../../start/data/route-object#middleware).
 */
middleware?: IndexRouteObject["middleware"];
/**
 * The route loader.
 * See [`loader`](../../start/data/route-object#loader).
 */
loader?: IndexRouteObject["loader"];
/**
 * The route action.
 * See [`action`](../../start/data/route-object#action).
 */
action?: IndexRouteObject["action"];
/**
 * The route shouldRevalidate function.
 * See [`shouldRevalidate`](../../start/data/route-object#shouldRevalidate).
 */
shouldRevalidate?: IndexRouteObject["shouldRevalidate"];
/**
 * The route handle.
 */
handle?: IndexRouteObject["handle"];
/**
 * Whether this is an index route.
 */
index: true;
/**
 * Child Route components
 */
children?: undefined;
/**
 * The React element to render when this Route matches.
 * Mutually exclusive with `Component`.
 */
element?: React$1.ReactNode | null;
/**
 * The React element to render while this router is loading data.
 * Mutually exclusive with `HydrateFallback`.
 */
hydrateFallbackElement?: React$1.ReactNode | null;
/**
 * The React element to render at this route if an error occurs.
 * Mutually exclusive with `ErrorBoundary`.
 */
errorElement?: React$1.ReactNode | null;
/**
 * The React Component to render when this route matches.
 * Mutually exclusive with `element`.
 */
Component?: React$1.ComponentType | null;
/**
 * The React Component to render while this router is loading data.
 * Mutually exclusive with `hydrateFallbackElement`.
 */
HydrateFallback?: React$1.ComponentType | null;
/**
 * The React Component to render at this route if an error occurs.
 * Mutually exclusive with `errorElement`.
 */
ErrorBoundary?: React$1.ComponentType | null;
585}
586/**
* @category Types
*/
589type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;
590/**
* Configures an element to render when a pattern matches the current location.
* It must be rendered within a {@link Routes} element. Note that these routes
* do not participate in data loading, actions, code splitting, or any other
* route module features.
*
* @example
* // Usually used in a declarative router
* function App() {
*   return (
*     <BrowserRouter>
*       <Routes>
*         <Route index element={<StepOne />} />
*         <Route path="step-2" element={<StepTwo />} />
*         <Route path="step-3" element={<StepThree />} />
*       </Routes>
*    </BrowserRouter>
*   );
* }
*
* // But can be used with a data router as well if you prefer the JSX notation
* const routes = createRoutesFromElements(
*   <>
*     <Route index loader={step1Loader} Component={StepOne} />
*     <Route path="step-2" loader={step2Loader} Component={StepTwo} />
*     <Route path="step-3" loader={step3Loader} Component={StepThree} />
*   </>
* );
*
* const router = createBrowserRouter(routes);
*
* function App() {
*   return <RouterProvider router={router} />;
* }
*
* @public
* @category Components
* @param props Props
* @param {PathRouteProps.action} props.action n/a
* @param {PathRouteProps.caseSensitive} props.caseSensitive n/a
* @param {PathRouteProps.Component} props.Component n/a
* @param {PathRouteProps.children} props.children n/a
* @param {PathRouteProps.element} props.element n/a
* @param {PathRouteProps.ErrorBoundary} props.ErrorBoundary n/a
* @param {PathRouteProps.errorElement} props.errorElement n/a
* @param {PathRouteProps.handle} props.handle n/a
* @param {PathRouteProps.HydrateFallback} props.HydrateFallback n/a
* @param {PathRouteProps.hydrateFallbackElement} props.hydrateFallbackElement n/a
* @param {PathRouteProps.id} props.id n/a
* @param {PathRouteProps.index} props.index n/a
* @param {PathRouteProps.lazy} props.lazy n/a
* @param {PathRouteProps.loader} props.loader n/a
* @param {PathRouteProps.path} props.path n/a
* @param {PathRouteProps.shouldRevalidate} props.shouldRevalidate n/a
* @returns {void}
*/
646declare function Route(props: RouteProps): React$1.ReactElement | null;
647/**
* @category Types
*/
650interface RouterProps {
/**
 * The base path for the application. This is prepended to all locations
 */
basename?: string;
/**
 * Nested {@link Route} elements describing the route tree
 */
children?: React$1.ReactNode;
/**
 * The location to match against. Defaults to the current location.
 * This can be a string or a {@link Location} object.
 */
location: Partial<Location> | string;
/**
 * The type of navigation that triggered this `location` change.
 * Defaults to {@link NavigationType.Pop}.
 */
navigationType?: Action;
/**
 * The navigator to use for navigation. This is usually a history object
 * or a custom navigator that implements the {@link Navigator} interface.
 */
navigator: Navigator;
/**
 * Whether this router is static or not (used for SSR). If `true`, the router
 * will not be reactive to location changes.
 */
static?: boolean;
/**
 * Control whether router state updates are internally wrapped in
 * [`React.startTransition`](https://react.dev/reference/react/startTransition).
 *
 * - When left `undefined`, all router state updates are wrapped in
 *   `React.startTransition`
 * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
 *   in `React.startTransition` and all router state updates are wrapped in
 *   `React.startTransition`
 * - When set to `false`, the router will not leverage `React.startTransition`
 *   on any navigations or state changes.
 *
 * For more information, please see the [docs](../../explanation/react-transitions).
 */
useTransitions?: boolean;
694}
695/**
* Provides location context for the rest of the app.
*
* Note: You usually won't render a `<Router>` directly. Instead, you'll render a
* router that is more specific to your environment such as a {@link BrowserRouter}
* in web browsers or a {@link ServerRouter} for server rendering.
*
* @public
* @category Declarative Routers
* @mode declarative
* @param props Props
* @param {RouterProps.basename} props.basename n/a
* @param {RouterProps.children} props.children n/a
* @param {RouterProps.location} props.location n/a
* @param {RouterProps.navigationType} props.navigationType n/a
* @param {RouterProps.navigator} props.navigator n/a
* @param {RouterProps.static} props.static n/a
* @param {RouterProps.useTransitions} props.useTransitions n/a
* @returns React element for the rendered router or `null` if the location does
* not match the {@link props.basename}
*/
716declare function Router({
basename: basenameProp,
children,
location: locationProp,
navigationType,
navigator,
static: staticProp,
useTransitions
724}: RouterProps): React$1.ReactElement | null;
725/**
* @category Types
*/
728interface RoutesProps {
/**
 * Nested {@link Route} elements
 */
children?: React$1.ReactNode;
/**
 * The {@link Location} to match against. Defaults to the current location.
 */
location?: Partial<Location> | string;
737}
738/**
* Renders a branch of {@link Route | `<Route>`s} that best matches the current
* location. Note that these routes do not participate in [data loading](../../start/framework/route-module#loader),
* [`action`](../../start/framework/route-module#action), code splitting, or
* any other [route module](../../start/framework/route-module) features.
*
* @example
* import { Route, Routes } from "react-router";
*
* <Routes>
*   <Route index element={<StepOne />} />
*   <Route path="step-2" element={<StepTwo />} />
*   <Route path="step-3" element={<StepThree />} />
* </Routes>
*
* @public
* @category Components
* @param props Props
* @param {RoutesProps.children} props.children n/a
* @param {RoutesProps.location} props.location n/a
* @returns React element for the rendered routes or `null` if no route matches
*/
760declare function Routes({
children,
location
763}: RoutesProps): React$1.ReactElement | null;
764interface AwaitResolveRenderFunction<Resolve = any> {
(data: Awaited<Resolve>): React$1.ReactNode;
766}
767/**
* @category Types
*/
770interface 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$1.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$1.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;
871}
872/**
* 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
*/
919declare function Await<Resolve>({
children,
errorElement,
resolve
923}: AwaitProps<Resolve>): React$1.JSX.Element;
924/**
* Creates a route config from a React "children" object, which is usually
* either a `<Route>` element or an array of them. Used internally by
* `<Routes>` to create a route config from its children.
*
* @category Utils
* @mode data
* @param children The React children to convert into a route config
* @param parentPath The path of the parent route, used to generate unique IDs.
* @returns An array of {@link RouteObject}s that can be used with a {@link DataRouter}
*/
935declare function createRoutesFromChildren(children: React$1.ReactNode, parentPath?: number[]): RouteObject[];
936/**
* Create route objects from JSX elements instead of arrays of objects.
*
* @example
* const routes = createRoutesFromElements(
*   <>
*     <Route index loader={step1Loader} Component={StepOne} />
*     <Route path="step-2" loader={step2Loader} Component={StepTwo} />
*     <Route path="step-3" loader={step3Loader} Component={StepThree} />
*   </>
* );
*
* const router = createBrowserRouter(routes);
*
* function App() {
*   return <RouterProvider router={router} />;
* }
*
* @name createRoutesFromElements
* @public
* @category Utils
* @mode data
* @param children The React children to convert into a route config
* @param parentPath The path of the parent route, used to generate unique IDs.
* This is used for internal recursion and is not intended to be used by the
* application developer.
* @returns An array of {@link RouteObject}s that can be used with a {@link DataRouter}
*/
964declare const createRoutesFromElements: typeof createRoutesFromChildren;
965/**
* Renders the result of {@link matchRoutes} into a React element.
*
* @public
* @category Utils
* @param matches The array of {@link RouteMatch | route matches} to render
* @returns A React element that renders the matched routes or `null` if no matches
*/
973declare function renderMatches(matches: RouteMatch[] | null): React$1.ReactElement | null;
974declare function useRouteComponentProps(): {
params: Readonly<Params<string>>;
loaderData: any;
actionData: any;
matches: UIMatch<unknown, unknown>[];
979};
980type RouteComponentProps = ReturnType<typeof useRouteComponentProps>;
981type RouteComponentType = React$1.ComponentType<RouteComponentProps>;
982declare function WithComponentProps({
children
984}: {
children: React$1.ReactElement;
986}): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
987declare function withComponentProps(Component: RouteComponentType): () => React$1.ReactElement<{
params: Readonly<Params<string>>;
loaderData: any;
actionData: any;
matches: UIMatch<unknown, unknown>[];
992}, string | React$1.JSXElementConstructor<any>>;
993declare function useHydrateFallbackProps(): {
params: Readonly<Params<string>>;
loaderData: any;
actionData: any;
997};
998type HydrateFallbackProps = ReturnType<typeof useHydrateFallbackProps>;
999type HydrateFallbackType = React$1.ComponentType<HydrateFallbackProps>;
1000declare function WithHydrateFallbackProps({
children
1002}: {
children: React$1.ReactElement;
1004}): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
1005declare function withHydrateFallbackProps(HydrateFallback: HydrateFallbackType): () => React$1.ReactElement<{
params: Readonly<Params<string>>;
loaderData: any;
actionData: any;
1009}, string | React$1.JSXElementConstructor<any>>;
1010declare function useErrorBoundaryProps(): {
params: Readonly<Params<string>>;
loaderData: any;
actionData: any;
error: unknown;
1015};
1016type ErrorBoundaryProps = ReturnType<typeof useErrorBoundaryProps>;
1017type ErrorBoundaryType = React$1.ComponentType<ErrorBoundaryProps>;
1018declare function WithErrorBoundaryProps({
children
1020}: {
children: React$1.ReactElement;
1022}): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
1023declare function withErrorBoundaryProps(ErrorBoundary: ErrorBoundaryType): () => React$1.ReactElement<{
params: Readonly<Params<string>>;
loaderData: any;
actionData: any;
error: unknown;
1028}, string | React$1.JSXElementConstructor<any>>;
1029//#endregion
1030export { Await, AwaitProps, ClientOnErrorFunction, IndexRouteProps, LayoutRouteProps, MemoryRouter, MemoryRouterOpts, MemoryRouterProps, Navigate, NavigateProps, Outlet, OutletProps, PathRouteProps, Route, RouteProps, Router, RouterProps, RouterProvider, RouterProviderProps, Routes, RoutesProps, WithComponentProps, WithErrorBoundaryProps, WithHydrateFallbackProps, createMemoryRouter, createRoutesFromChildren, createRoutesFromElements, hydrationRouteProperties, renderMatches, withComponentProps, withErrorBoundaryProps, withHydrateFallbackProps };
\No newline at end of file