react-router 7.18.0 → 8.0.0-pre.1

package/dist/production/lib/components.d.ts

@@ -0,0 +1,1030 @@
+
+import { Action, InitialEntry, Location, To } from "./router/history.js";
+import { DataStrategyFunction, IndexRouteObject, LazyRouteFunction, NonIndexRouteObject, Params, PatchRoutesOnNavigationFunction, RouteMatch, RouteObject, UIMatch } from "./router/utils.js";
+import { FutureConfig, HydrationState, RelativeRoutingType, Router as Router$1, RouterInit } from "./router/router.js";
+import { Navigator } from "./context.js";
+import { ClientInstrumentation } from "./router/instrumentation.js";
+import * as React$1 from "react";
+
+//#region lib/components.d.ts
+declare const hydrationRouteProperties: (keyof RouteObject)[];
+/**
+ * @category Data Routers
+ */
+interface 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;
+}
+/**
+ * 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>`}
+ */
+declare function createMemoryRouter(routes: RouteObject[], opts?: MemoryRouterOpts): Router$1;
+/**
+ * Function signature for client side error handling for loader/actions errors
+ * and rendering errors via `componentDidCatch`
+ */
+interface ClientOnErrorFunction {
+  (error: unknown, info: {
+    location: Location;
+    params: Params;
+    pattern: string;
+    errorInfo?: React$1.ErrorInfo;
+  }): void;
+}
+/**
+ * @category Types
+ */
+interface 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;
+}
+/**
+ * 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
+ */
+declare function RouterProvider({
+  router,
+  flushSync: reactDomFlushSyncImpl,
+  onError,
+  useTransitions
+}: RouterProviderProps): React$1.ReactElement;
+/**
+ * @category Types
+ */
+interface 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;
+}
+/**
+ * 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.
+ */
+declare function MemoryRouter({
+  basename,
+  children,
+  initialEntries,
+  initialIndex,
+  useTransitions
+}: MemoryRouterProps): React$1.ReactElement;
+/**
+ * @category Types
+ */
+interface 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;
+}
+/**
+ * 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}
+ *
+ */
+declare function Navigate({
+  to,
+  replace,
+  state,
+  relative
+}: NavigateProps): null;
+/**
+ * @category Types
+ */
+interface 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;
+}
+/**
+ * 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.
+ */
+declare function Outlet(props: OutletProps): React$1.ReactElement | null;
+/**
+ * @category Types
+ */
+interface 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;
+}
+/**
+ * @category Types
+ */
+interface LayoutRouteProps extends PathRouteProps {}
+/**
+ * @category Types
+ */
+interface 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;
+}
+/**
+ * @category Types
+ */
+type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;
+/**
+ * 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}
+ */
+declare function Route(props: RouteProps): React$1.ReactElement | null;
+/**
+ * @category Types
+ */
+interface 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;
+}
+/**
+ * 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}
+ */
+declare function Router({
+  basename: basenameProp,
+  children,
+  location: locationProp,
+  navigationType,
+  navigator,
+  static: staticProp,
+  useTransitions
+}: RouterProps): React$1.ReactElement | null;
+/**
+ * @category Types
+ */
+interface RoutesProps {
+  /**
+   * Nested {@link Route} elements
+   */
+  children?: React$1.ReactNode;
+  /**
+   * The {@link Location} to match against. Defaults to the current location.
+   */
+  location?: Partial<Location> | string;
+}
+/**
+ * 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
+ */
+declare function Routes({
+  children,
+  location
+}: RoutesProps): React$1.ReactElement | null;
+interface AwaitResolveRenderFunction<Resolve = any> {
+  (data: Awaited<Resolve>): React$1.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$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;
+}
+/**
+ * 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<Resolve>({
+  children,
+  errorElement,
+  resolve
+}: AwaitProps<Resolve>): React$1.JSX.Element;
+/**
+ * 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}
+ */
+declare function createRoutesFromChildren(children: React$1.ReactNode, parentPath?: number[]): RouteObject[];
+/**
+ * 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}
+ */
+declare const createRoutesFromElements: typeof createRoutesFromChildren;
+/**
+ * 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
+ */
+declare function renderMatches(matches: RouteMatch[] | null): React$1.ReactElement | null;
+declare function useRouteComponentProps(): {
+  params: Readonly<Params<string>>;
+  loaderData: any;
+  actionData: any;
+  matches: UIMatch<unknown, unknown>[];
+};
+type RouteComponentProps = ReturnType<typeof useRouteComponentProps>;
+type RouteComponentType = React$1.ComponentType<RouteComponentProps>;
+declare function WithComponentProps({
+  children
+}: {
+  children: React$1.ReactElement;
+}): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function withComponentProps(Component: RouteComponentType): () => React$1.ReactElement<{
+  params: Readonly<Params<string>>;
+  loaderData: any;
+  actionData: any;
+  matches: UIMatch<unknown, unknown>[];
+}, string | React$1.JSXElementConstructor<any>>;
+declare function useHydrateFallbackProps(): {
+  params: Readonly<Params<string>>;
+  loaderData: any;
+  actionData: any;
+};
+type HydrateFallbackProps = ReturnType<typeof useHydrateFallbackProps>;
+type HydrateFallbackType = React$1.ComponentType<HydrateFallbackProps>;
+declare function WithHydrateFallbackProps({
+  children
+}: {
+  children: React$1.ReactElement;
+}): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function withHydrateFallbackProps(HydrateFallback: HydrateFallbackType): () => React$1.ReactElement<{
+  params: Readonly<Params<string>>;
+  loaderData: any;
+  actionData: any;
+}, string | React$1.JSXElementConstructor<any>>;
+declare function useErrorBoundaryProps(): {
+  params: Readonly<Params<string>>;
+  loaderData: any;
+  actionData: any;
+  error: unknown;
+};
+type ErrorBoundaryProps = ReturnType<typeof useErrorBoundaryProps>;
+type ErrorBoundaryType = React$1.ComponentType<ErrorBoundaryProps>;
+declare function WithErrorBoundaryProps({
+  children
+}: {
+  children: React$1.ReactElement;
+}): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function withErrorBoundaryProps(ErrorBoundary: ErrorBoundaryType): () => React$1.ReactElement<{
+  params: Readonly<Params<string>>;
+  loaderData: any;
+  actionData: any;
+  error: unknown;
+}, string | React$1.JSXElementConstructor<any>>;
+//#endregion
+export { 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 };