react-router 7.15.1 → 8.3.0

package/dist/development/lib/dom/lib.d.ts

@@ -0,0 +1,2054 @@
+
+import { History, To } from "../router/history.js";
+import { DataStrategyFunction, HTMLFormMethod, PatchRoutesOnNavigationFunction, RouteObject } from "../router/utils.js";
+import { BlockerFunction, Fetcher, FutureConfig, GetScrollRestorationKeyFunction, HydrationState, RelativeRoutingType, Router, RouterInit } from "../router/router.js";
+import { NavigateOptions } from "../context.js";
+import { FetcherSubmitOptions, SubmitOptions, SubmitTarget, URLSearchParamsInit } from "./dom.js";
+import { DiscoverBehavior, PrefetchBehavior, ScriptsProps } from "./ssr/components.js";
+import { SerializeFrom } from "../types/route-data.js";
+import { ClientInstrumentation } from "../router/instrumentation.js";
+import * as React$1 from "react";
+
+//#region lib/dom/lib.d.ts
+/**
+ * @category Data Routers
+ */
+interface DOMRouterOpts {
+  /**
+   * 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.
+   *
+   * ```tsx
+   * import {
+   *   createContext,
+   *   RouterContextProvider,
+   * } from "react-router";
+   *
+   * const apiClientContext = createContext<APIClient>();
+   *
+   * function createBrowserRouter(routes, {
+   *   getContext() {
+   *     let context = new RouterContextProvider();
+   *     context.set(apiClientContext, getApiClient());
+   *     return context;
+   *   }
+   * })
+   * ```
+   */
+  getContext?: RouterInit["getContext"];
+  /**
+   * Future flags to enable for the router.
+   */
+  future?: Partial<FutureConfig>;
+  /**
+   * When Server-Rendering and opting-out of automatic hydration, the
+   * `hydrationData` option allows you to pass in hydration data from your
+   * server-render. This will almost always be a subset of data from the
+   * {@link StaticHandlerContext} value you get back from the {@link StaticHandler}'s
+   * `query` method:
+   *
+   * ```tsx
+   * const router = createBrowserRouter(routes, {
+   *   hydrationData: {
+   *     loaderData: {
+   *       // [routeId]: serverLoaderData
+   *     },
+   *     // may also include `errors` and/or `actionData`
+   *   },
+   * });
+   * ```
+   *
+   * **Partial Hydration Data**
+   *
+   * You will almost always include a complete set of `loaderData` to hydrate a
+   * server-rendered app. But in advanced use-cases (such as Framework Mode's
+   * [`clientLoader`](../../start/framework/route-module#clientLoader)), you may
+   * want to include `loaderData` for only some routes that were loaded/rendered
+   * on the server. This allows you to hydrate _some_ of the routes (such as the
+   * app layout/shell) while showing a `HydrateFallback` component and running
+   * the [`loader`](../../start/data/route-object#loader)s for other routes
+   * during hydration.
+   *
+   * A route [`loader`](../../start/data/route-object#loader) will run during
+   * hydration in two scenarios:
+   *
+   *  1. No hydration data is provided
+   *     In these cases the `HydrateFallback` component will render on initial
+   *     hydration
+   *  2. The `loader.hydrate` property is set to `true`
+   *     This allows you to run the [`loader`](../../start/data/route-object#loader)
+   *     even if you did not render a fallback on initial hydration (i.e., to
+   *     prime a cache with hydration data)
+   *
+   * ```tsx
+   * const router = createBrowserRouter(
+   *   [
+   *     {
+   *       id: "root",
+   *       loader: rootLoader,
+   *       Component: Root,
+   *       children: [
+   *         {
+   *           id: "index",
+   *           loader: indexLoader,
+   *           HydrateFallback: IndexSkeleton,
+   *           Component: Index,
+   *         },
+   *       ],
+   *     },
+   *   ],
+   *   {
+   *     hydrationData: {
+   *       loaderData: {
+   *         root: "ROOT DATA",
+   *         // No index data provided
+   *       },
+   *     },
+   *   }
+   * );
+   * ```
+   */
+  hydrationData?: HydrationState;
+  /**
+   * 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.
+   * See {@link PatchRoutesOnNavigationFunction}.
+   *
+   * By default, React Router wants you to provide a full route tree up front via
+   * `createBrowserRouter(routes)`. This allows React Router to perform synchronous
+   * route matching, execute loaders, and then render route components in the most
+   * optimistic manner without introducing waterfalls. The tradeoff is that your
+   * initial JS bundle is larger by definition — which may slow down application
+   * start-up times as your application grows.
+   *
+   * To combat this, we introduced [`route.lazy`](../../start/data/route-object#lazy)
+   * in [v6.9.0](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v690)
+   * which lets you lazily load the route _implementation_ ([`loader`](../../start/data/route-object#loader),
+   * [`Component`](../../start/data/route-object#Component), etc.) while still
+   * providing the route _definition_ aspects up front (`path`, `index`, etc.).
+   * This is a good middle ground. React Router still knows about your route
+   * definitions (the lightweight part) up front and can perform synchronous
+   * route matching, but then delay loading any of the route implementation
+   * aspects (the heavier part) until the route is actually navigated to.
+   *
+   * In some cases, even this doesn't go far enough. For huge applications,
+   * providing all route definitions up front can be prohibitively expensive.
+   * Additionally, it might not even be possible to provide all route definitions
+   * up front in certain Micro-Frontend or Module-Federation architectures.
+   *
+   * This is where `patchRoutesOnNavigation` comes in ([RFC](https://github.com/remix-run/react-router/discussions/11113)).
+   * This API is for advanced use-cases where you are unable to provide the full
+   * route tree up-front and need a way to lazily "discover" portions of the route
+   * tree at runtime. This feature is often referred to as ["Fog of War"](https://en.wikipedia.org/wiki/Fog_of_war),
+   * because similar to how video games expand the "world" as you move around -
+   * the router would be expanding its routing tree as the user navigated around
+   * the app - but would only ever end up loading portions of the tree that the
+   * user visited.
+   *
+   * `patchRoutesOnNavigation` will be called anytime React Router is unable to
+   * match a `path`. The arguments include the `path`, any partial `matches`,
+   * and a `patch` function you can call to patch new routes into the tree at a
+   * specific location. This method is executed during the `loading` portion of
+   * the navigation for `GET` requests and during the `submitting` portion of
+   * the navigation for non-`GET` requests.
+   *
+   * <details>
+   *   <summary><b>Example <code>patchRoutesOnNavigation</code> Use Cases</b></summary>
+   *
+   *   **Patching children into an existing route**
+   *
+   *   ```tsx
+   *   const router = createBrowserRouter(
+   *     [
+   *       {
+   *         id: "root",
+   *         path: "/",
+   *         Component: RootComponent,
+   *       },
+   *     ],
+   *     {
+   *       async patchRoutesOnNavigation({ patch, path }) {
+   *         if (path === "/a") {
+   *           // Load/patch the `a` route as a child of the route with id `root`
+   *           let route = await getARoute();
+   *           //  ^ { path: 'a', Component: A }
+   *           patch("root", [route]);
+   *         }
+   *       },
+   *     }
+   *   );
+   *   ```
+   *
+   *   In the above example, if the user clicks a link to `/a`, React Router
+   *   won't match any routes initially and will call `patchRoutesOnNavigation`
+   *   with a `path = "/a"` and a `matches` array containing the root route
+   *   match. By calling `patch('root', [route])`, the new route will be added
+   *   to the route tree as a child of the `root` route and React Router will
+   *   perform matching on the updated routes. This time it will successfully
+   *   match the `/a` path and the navigation will complete successfully.
+   *
+   *   **Patching new root-level routes**
+   *
+   *   If you need to patch a new route to the top of the tree (i.e., it doesn't
+   *   have a parent), you can pass `null` as the `routeId`:
+   *
+   *   ```tsx
+   *   const router = createBrowserRouter(
+   *     [
+   *       {
+   *         id: "root",
+   *         path: "/",
+   *         Component: RootComponent,
+   *       },
+   *     ],
+   *     {
+   *       async patchRoutesOnNavigation({ patch, path }) {
+   *         if (path === "/root-sibling") {
+   *           // Load/patch the `/root-sibling` route as a sibling of the root route
+   *           let route = await getRootSiblingRoute();
+   *           //  ^ { path: '/root-sibling', Component: RootSibling }
+   *           patch(null, [route]);
+   *         }
+   *       },
+   *     }
+   *   );
+   *   ```
+   *
+   *   **Patching subtrees asynchronously**
+   *
+   *   You can also perform asynchronous matching to lazily fetch entire sections
+   *   of your application:
+   *
+   *   ```tsx
+   *   let router = createBrowserRouter(
+   *     [
+   *       {
+   *         path: "/",
+   *         Component: Home,
+   *       },
+   *     ],
+   *     {
+   *       async patchRoutesOnNavigation({ patch, path }) {
+   *         if (path.startsWith("/dashboard")) {
+   *           let children = await import("./dashboard");
+   *           patch(null, children);
+   *         }
+   *         if (path.startsWith("/account")) {
+   *           let children = await import("./account");
+   *           patch(null, children);
+   *         }
+   *       },
+   *     }
+   *   );
+   *   ```
+   *
+   *   <docs-info>If in-progress execution of `patchRoutesOnNavigation` is
+   *   interrupted by a later navigation, then any remaining `patch` calls in
+   *   the interrupted execution will not update the route tree because the
+   *   operation was cancelled.</docs-info>
+   *
+   *   **Co-locating route discovery with route definition**
+   *
+   *   If you don't wish to perform your own pseudo-matching, you can leverage
+   *   the partial `matches` array and the [`handle`](../../start/data/route-object#handle)
+   *   field on a route to keep the children definitions co-located:
+   *
+   *   ```tsx
+   *   let router = createBrowserRouter(
+   *     [
+   *       {
+   *         path: "/",
+   *         Component: Home,
+   *       },
+   *       {
+   *         path: "/dashboard",
+   *         children: [
+   *           {
+   *             // If we want to include /dashboard in the critical routes, we need to
+   *             // also include it's index route since patchRoutesOnNavigation will not be
+   *             // called on a navigation to `/dashboard` because it will have successfully
+   *             // matched the `/dashboard` parent route
+   *             index: true,
+   *             // ...
+   *           },
+   *         ],
+   *         handle: {
+   *           lazyChildren: () => import("./dashboard"),
+   *         },
+   *       },
+   *       {
+   *         path: "/account",
+   *         children: [
+   *           {
+   *             index: true,
+   *             // ...
+   *           },
+   *         ],
+   *         handle: {
+   *           lazyChildren: () => import("./account"),
+   *         },
+   *       },
+   *     ],
+   *     {
+   *       async patchRoutesOnNavigation({ matches, patch }) {
+   *         let leafRoute = matches[matches.length - 1]?.route;
+   *         if (leafRoute?.handle?.lazyChildren) {
+   *           let children =
+   *             await leafRoute.handle.lazyChildren();
+   *           patch(leafRoute.id, children);
+   *         }
+   *       },
+   *     }
+   *   );
+   *   ```
+   *
+   *   **A note on routes with parameters**
+   *
+   *   Because React Router uses ranked routes to find the best match for a
+   *   given path, there is an interesting ambiguity introduced when only a
+   *   partial route tree is known at any given point in time. If we match a
+   *   fully static route such as `path: "/about/contact-us"` then we know we've
+   *   found the right match since it's composed entirely of static URL segments.
+   *   Thus, we do not need to bother asking for any other potentially
+   *   higher-scoring routes.
+   *
+   *   However, routes with parameters (dynamic or splat) can't make this
+   *   assumption because there might be a not-yet-discovered route that scores
+   *   higher. Consider a full route tree such as:
+   *
+   *   ```tsx
+   *   // Assume this is the full route tree for your app
+   *   const routes = [
+   *     {
+   *       path: "/",
+   *       Component: Home,
+   *     },
+   *     {
+   *       id: "blog",
+   *       path: "/blog",
+   *       Component: BlogLayout,
+   *       children: [
+   *         { path: "new", Component: NewPost },
+   *         { path: ":slug", Component: BlogPost },
+   *       ],
+   *     },
+   *   ];
+   *   ```
+   *
+   *   And then assume we want to use `patchRoutesOnNavigation` to fill this in
+   *   as the user navigates around:
+   *
+   *   ```tsx
+   *   // Start with only the index route
+   *   const router = createBrowserRouter(
+   *     [
+   *       {
+   *         path: "/",
+   *         Component: Home,
+   *       },
+   *     ],
+   *     {
+   *       async patchRoutesOnNavigation({ patch, path }) {
+   *         if (path === "/blog/new") {
+   *           patch("blog", [
+   *             {
+   *               path: "new",
+   *               Component: NewPost,
+   *             },
+   *           ]);
+   *         } else if (path.startsWith("/blog")) {
+   *           patch("blog", [
+   *             {
+   *               path: ":slug",
+   *               Component: BlogPost,
+   *             },
+   *           ]);
+   *         }
+   *       },
+   *     }
+   *   );
+   *   ```
+   *
+   *   If the user were to a blog post first (i.e., `/blog/my-post`) we would
+   *   patch in the `:slug` route. Then, if the user navigated to `/blog/new` to
+   *   write a new post, we'd match `/blog/:slug` but it wouldn't be the _right_
+   *   match! We need to call `patchRoutesOnNavigation` just in case there
+   *   exists a higher-scoring route we've not yet discovered, which in this
+   *   case there is.
+   *
+   *   So, anytime React Router matches a path that contains at least one param,
+   *   it will call `patchRoutesOnNavigation` and match routes again just to
+   *   confirm it has found the best match.
+   *
+   *   If your `patchRoutesOnNavigation` implementation is expensive or making
+   *   side effect [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch)
+   *   calls to a backend server, you may want to consider tracking previously
+   *   seen routes to avoid over-fetching in cases where you know the proper
+   *   route has already been found. This can usually be as simple as
+   *   maintaining a small cache of prior `path` values for which you've already
+   *   patched in the right routes:
+   *
+   *   ```tsx
+   *   let discoveredRoutes = new Set();
+   *
+   *   const router = createBrowserRouter(routes, {
+   *     async patchRoutesOnNavigation({ patch, path }) {
+   *       if (discoveredRoutes.has(path)) {
+   *         // We've seen this before so nothing to patch in and we can let the router
+   *         // use the routes it already knows about
+   *         return;
+   *       }
+   *
+   *       discoveredRoutes.add(path);
+   *
+   *       // ... patch routes in accordingly
+   *     },
+   *   });
+   *   ```
+   * </details>
+   */
+  patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
+  /**
+   * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
+   * override. Defaults to the global `window` instance.
+   */
+  window?: Window;
+}
+/**
+ * Create a new {@link DataRouter| data router} that manages the application
+ * path via [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState)
+ * and [`history.replaceState`](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState).
+ *
+ * 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 {DOMRouterOpts.basename} opts.basename n/a
+ * @param {DOMRouterOpts.dataStrategy} opts.dataStrategy n/a
+ * @param {DOMRouterOpts.future} opts.future n/a
+ * @param {DOMRouterOpts.getContext} opts.getContext n/a
+ * @param {DOMRouterOpts.hydrationData} opts.hydrationData n/a
+ * @param {DOMRouterOpts.instrumentations} opts.instrumentations n/a
+ * @param {DOMRouterOpts.patchRoutesOnNavigation} opts.patchRoutesOnNavigation n/a
+ * @param {DOMRouterOpts.window} opts.window n/a
+ * @returns An initialized {@link DataRouter| data router} to pass to {@link RouterProvider | `<RouterProvider>`}
+ */
+declare function createBrowserRouter(routes: RouteObject[], opts?: DOMRouterOpts): Router;
+/**
+ * Create a new {@link DataRouter| data router} that manages the application
+ * path via the URL [`hash`](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash).
+ *
+ * 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 {DOMRouterOpts.basename} opts.basename n/a
+ * @param {DOMRouterOpts.future} opts.future n/a
+ * @param {DOMRouterOpts.getContext} opts.getContext n/a
+ * @param {DOMRouterOpts.hydrationData} opts.hydrationData n/a
+ * @param {DOMRouterOpts.instrumentations} opts.instrumentations n/a
+ * @param {DOMRouterOpts.dataStrategy} opts.dataStrategy n/a
+ * @param {DOMRouterOpts.patchRoutesOnNavigation} opts.patchRoutesOnNavigation n/a
+ * @param {DOMRouterOpts.window} opts.window n/a
+ * @returns An initialized {@link DataRouter| data router} to pass to {@link RouterProvider | `<RouterProvider>`}
+ */
+declare function createHashRouter(routes: RouteObject[], opts?: DOMRouterOpts): Router;
+/**
+ * @category Types
+ */
+interface BrowserRouterProps {
+  /**
+   * Application basename
+   */
+  basename?: string;
+  /**
+   * {@link Route | `<Route>`} components describing your route configuration
+   */
+  children?: React$1.ReactNode;
+  /**
+   * 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;
+  /**
+   * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
+   * override. Defaults to the global `window` instance
+   */
+  window?: Window;
+}
+/**
+ * A declarative {@link Router | `<Router>`} using the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
+ * API for client-side routing.
+ *
+ * @public
+ * @category Declarative Routers
+ * @mode declarative
+ * @param props Props
+ * @param {BrowserRouterProps.basename} props.basename n/a
+ * @param {BrowserRouterProps.children} props.children n/a
+ * @param {BrowserRouterProps.useTransitions} props.useTransitions n/a
+ * @param {BrowserRouterProps.window} props.window n/a
+ * @returns A declarative {@link Router | `<Router>`} using the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
+ * API for client-side routing.
+ */
+declare function BrowserRouter({
+  basename,
+  children,
+  useTransitions,
+  window
+}: BrowserRouterProps): React$1.JSX.Element;
+/**
+ * @category Types
+ */
+interface HashRouterProps {
+  /**
+   * Application basename
+   */
+  basename?: string;
+  /**
+   * {@link Route | `<Route>`} components describing your route configuration
+   */
+  children?: React$1.ReactNode;
+  /**
+   * 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;
+  /**
+   * [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object
+   * override. Defaults to the global `window` instance
+   */
+  window?: Window;
+}
+/**
+ * A declarative {@link Router | `<Router>`} that stores the location in the
+ * [`hash`](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash) portion
+ * of the URL so it is not sent to the server.
+ *
+ * @public
+ * @category Declarative Routers
+ * @mode declarative
+ * @param props Props
+ * @param {HashRouterProps.basename} props.basename n/a
+ * @param {HashRouterProps.children} props.children n/a
+ * @param {HashRouterProps.useTransitions} props.useTransitions n/a
+ * @param {HashRouterProps.window} props.window n/a
+ * @returns A declarative {@link Router | `<Router>`} using the URL [`hash`](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash)
+ * for client-side routing.
+ */
+declare function HashRouter({
+  basename,
+  children,
+  useTransitions,
+  window
+}: HashRouterProps): React$1.JSX.Element;
+/**
+ * @category Types
+ */
+interface HistoryRouterProps {
+  /**
+   * Application basename
+   */
+  basename?: string;
+  /**
+   * {@link Route | `<Route>`} components describing your route configuration
+   */
+  children?: React$1.ReactNode;
+  /**
+   *  A {@link History} implementation for use by the router
+   */
+  history: History;
+  /**
+   * 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 accepts a pre-instantiated
+ * `history` object.
+ * It's important to note that using your own `history` object is highly discouraged
+ * and may add two versions of the `history` library to your bundles unless you use
+ * the same version of the `history` library that React Router uses internally.
+ *
+ * @name unstable_HistoryRouter
+ * @public
+ * @category Declarative Routers
+ * @mode declarative
+ * @param props Props
+ * @param {HistoryRouterProps.basename} props.basename n/a
+ * @param {HistoryRouterProps.children} props.children n/a
+ * @param {HistoryRouterProps.history} props.history n/a
+ * @param {HistoryRouterProps.useTransitions} props.useTransitions n/a
+ * @returns A declarative {@link Router | `<Router>`} using the provided history
+ * implementation for client-side routing.
+ */
+declare function HistoryRouter({
+  basename,
+  children,
+  history,
+  useTransitions
+}: HistoryRouterProps): React$1.JSX.Element;
+declare namespace HistoryRouter {
+  var displayName: string;
+}
+/**
+ * @category Types
+ */
+interface LinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+  /**
+   * Defines the link [lazy route discovery](../../explanation/lazy-route-discovery) behavior.
+   *
+   * - **render** — default, discover the route when the link renders
+   * - **none** — don't eagerly discover, only discover if the link is clicked
+   *
+   * ```tsx
+   * <Link /> // default ("render")
+   * <Link discover="render" />
+   * <Link discover="none" />
+   * ```
+   */
+  discover?: DiscoverBehavior;
+  /**
+   * Defines the data and module prefetching behavior for the link.
+   *
+   * ```tsx
+   * <Link /> // default
+   * <Link prefetch="none" />
+   * <Link prefetch="intent" />
+   * <Link prefetch="render" />
+   * <Link prefetch="viewport" />
+   * ```
+   *
+   * - **none** — default, no prefetching
+   * - **intent** — prefetches when the user hovers or focuses the link
+   * - **render** — prefetches when the link renders
+   * - **viewport** — prefetches when the link is in the viewport, very useful for mobile
+   *
+   * Prefetching is done with HTML [`<link rel="prefetch">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
+   * tags. They are inserted after the link.
+   *
+   * ```tsx
+   * <a href="..." />
+   * <a href="..." />
+   * <link rel="prefetch" /> // might conditionally render
+   * ```
+   *
+   * Because of this, if you are using `nav :last-child` you will need to use
+   * `nav :last-of-type` so the styles don't conditionally fall off your last link
+   * (and any other similar selectors).
+   */
+  prefetch?: PrefetchBehavior;
+  /**
+   * Will use document navigation instead of client side routing when the link is
+   * clicked: the browser will handle the transition normally (as if it were an
+   * [`<a href>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)).
+   *
+   * ```tsx
+   * <Link to="/logout" reloadDocument />
+   * ```
+   */
+  reloadDocument?: boolean;
+  /**
+   * Replaces the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
+   * stack instead of pushing a new one onto it.
+   *
+   * ```tsx
+   * <Link replace />
+   * ```
+   *
+   * ```
+   * # with a history stack like this
+   * A -> B
+   *
+   * # normal link click pushes a new entry
+   * A -> B -> C
+   *
+   * # but with `replace`, B is replaced by C
+   * A -> C
+   * ```
+   */
+  replace?: boolean;
+  /**
+   * Adds persistent client side routing state to the next location.
+   *
+   * ```tsx
+   * <Link to="/somewhere/else" state={{ some: "value" }} />
+   * ```
+   *
+   * The location state is accessed from the `location`.
+   *
+   * ```tsx
+   * function SomeComp() {
+   *   const location = useLocation();
+   *   location.state; // { some: "value" }
+   * }
+   * ```
+   *
+   * This state is inaccessible on the server as it is implemented on top of
+   * [`history.state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state)
+   */
+  state?: any;
+  /**
+   * Prevents the scroll position from being reset to the top of the window when
+   * the link is clicked and the app is using {@link ScrollRestoration}. This only
+   * prevents new locations resetting scroll to the top, scroll position will be
+   * restored for back/forward button navigation.
+   *
+   * ```tsx
+   * <Link to="?tab=one" preventScrollReset />
+   * ```
+   */
+  preventScrollReset?: boolean;
+  /**
+   * Defines the relative path behavior for the link.
+   *
+   * ```tsx
+   * <Link to=".." /> // default: "route"
+   * <Link relative="route" />
+   * <Link relative="path" />
+   * ```
+   *
+   * Consider a route hierarchy where a parent route pattern is `"blog"` and a child
+   * route pattern is `"blog/:slug/edit"`.
+   *
+   * - **route** — default, resolves the link relative to the route pattern. In the
+   * example above, a relative link of `"..."` will remove both `:slug/edit` segments
+   * back to `"/blog"`.
+   * - **path** — relative to the path so `"..."` will only remove one URL segment up
+   * to `"/blog/:slug"`
+   *
+   * Note that index routes and layout routes do not have paths so they are not
+   * included in the relative path calculation.
+   */
+  relative?: RelativeRoutingType;
+  /**
+   * Can be a string or a partial {@link Path}:
+   *
+   * ```tsx
+   * <Link to="/some/path" />
+   *
+   * <Link
+   *   to={{
+   *     pathname: "/some/path",
+   *     search: "?query=string",
+   *     hash: "#hash",
+   *   }}
+   * />
+   * ```
+   */
+  to: To;
+  /**
+   * Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
+   * for this navigation.
+   *
+   * ```jsx
+   * <Link to={to} viewTransition>
+   *   Click me
+   * </Link>
+   * ```
+   *
+   * To apply specific styles for the transition, see {@link useViewTransitionState}
+   */
+  viewTransition?: boolean;
+  /**
+   * Specify the default revalidation behavior for the navigation.
+   *
+   * ```tsx
+   * <Link to="/some/path" defaultShouldRevalidate={false} />
+   * ```
+   *
+   * If no `shouldRevalidate` functions are present on the active routes, then this
+   * value will be used directly.  Otherwise it will be passed into `shouldRevalidate`
+   * so the route can make the final determination on revalidation. This can be
+   * useful when updating search params and you don't want to trigger a revalidation.
+   *
+   * By default (when not specified), loaders will revalidate according to the routers
+   * standard revalidation behavior.
+   */
+  defaultShouldRevalidate?: boolean;
+  /**
+   * Masked path for this navigation, when you want to navigate the router to
+   * one location but display a separate location in the URL bar.
+   *
+   * This is useful for contextual navigations such as opening an image in a modal
+   * on top of a gallery while keeping the underlying gallery active. If a user
+   * shares the masked URL, or opens the link in a new tab, they will only load
+   * the masked location without the underlying contextual location.
+   *
+   * This feature relies on `history.state` and is thus only intended for SPA uses
+   * and SSR renders will not respect the masking.
+   *
+   * ```tsx
+   * // routes/gallery.tsx
+   * export function clientLoader({ request }: Route.LoaderArgs) {
+   *   let sp = new URL(request.url).searchParams;
+   *   return {
+   *     images: getImages(),
+   *     modalImage: sp.has("image") ? getImage(sp.get("image")!) : null,
+   *   };
+   * }
+   *
+   * export default function Gallery({ loaderData }: Route.ComponentProps) {
+   *   return (
+   *     <>
+   *       <GalleryGrid>
+   *        {loaderData.images.map((image) => (
+   *          <Link
+   *            key={image.id}
+   *            to={`/gallery?image=${image.id}`}
+   *            mask={`/images/${image.id}`}
+   *          >
+   *            <img src={image.url} alt={image.alt} />
+   *          </Link>
+   *        ))}
+   *       </GalleryGrid>
+   *
+   *       {data.modalImage ? (
+   *         <dialog open>
+   *           <img src={data.modalImage.url} alt={data.modalImage.alt} />
+   *         </dialog>
+   *       ) : null}
+   *     </>
+   *   );
+   * }
+   * ```
+   */
+  mask?: To;
+}
+/**
+ * A progressively enhanced [`<a href>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
+ * wrapper to enable navigation with client-side routing.
+ *
+ * @example
+ * import { Link } from "react-router";
+ *
+ * <Link to="/dashboard">Dashboard</Link>;
+ *
+ * <Link
+ *   to={{
+ *     pathname: "/some/path",
+ *     search: "?query=string",
+ *     hash: "#hash",
+ *   }}
+ * />;
+ *
+ * @public
+ * @category Components
+ * @param {LinkProps.discover} props.discover [modes: framework] n/a
+ * @param {LinkProps.prefetch} props.prefetch [modes: framework] n/a
+ * @param {LinkProps.preventScrollReset} props.preventScrollReset [modes: framework, data] n/a
+ * @param {LinkProps.relative} props.relative n/a
+ * @param {LinkProps.reloadDocument} props.reloadDocument n/a
+ * @param {LinkProps.replace} props.replace n/a
+ * @param {LinkProps.state} props.state n/a
+ * @param {LinkProps.to} props.to n/a
+ * @param {LinkProps.viewTransition} props.viewTransition [modes: framework, data] n/a
+ * @param {LinkProps.defaultShouldRevalidate} props.defaultShouldRevalidate n/a
+ * @param {LinkProps.mask} props.mask [modes: framework, data] n/a
+ */
+declare const Link: React$1.ForwardRefExoticComponent<LinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
+/**
+ * The object passed to {@link NavLink} `children`, `className`, and `style` prop
+ * callbacks to render and style the link based on its state.
+ *
+ * ```
+ * // className
+ * <NavLink
+ *   to="/messages"
+ *   className={({ isActive, isPending }) =>
+ *     isPending ? "pending" : isActive ? "active" : ""
+ *   }
+ * >
+ *   Messages
+ * </NavLink>
+ *
+ * // style
+ * <NavLink
+ *   to="/messages"
+ *   style={({ isActive, isPending }) => {
+ *     return {
+ *       fontWeight: isActive ? "bold" : "",
+ *       color: isPending ? "red" : "black",
+ *     }
+ *   )}
+ * />
+ *
+ * // children
+ * <NavLink to="/tasks">
+ *   {({ isActive, isPending }) => (
+ *     <span className={isActive ? "active" : ""}>Tasks</span>
+ *   )}
+ * </NavLink>
+ * ```
+ *
+ */
+type NavLinkRenderProps = {
+  /**
+   * Indicates if the link's URL matches the current {@link Location}.
+   */
+  isActive: boolean;
+  /**
+   * Indicates if the pending {@link Location} matches the link's URL. Only
+   * available in Framework/Data modes.
+   */
+  isPending: boolean;
+  /**
+   * Indicates if a view transition to the link's URL is in progress.
+   * See {@link useViewTransitionState}
+   */
+  isTransitioning: boolean;
+};
+/**
+ * @category Types
+ */
+interface NavLinkProps extends Omit<LinkProps, "className" | "style" | "children"> {
+  /**
+   *  Can be regular React children or a function that receives an object with the
+   * `active` and `pending` states of the link.
+   *
+   *  ```tsx
+   *  <NavLink to="/tasks">
+   *    {({ isActive }) => (
+   *      <span className={isActive ? "active" : ""}>Tasks</span>
+   *    )}
+   *  </NavLink>
+   *  ```
+   */
+  children?: React$1.ReactNode | ((props: NavLinkRenderProps) => React$1.ReactNode);
+  /**
+   * Changes the matching logic to make it case-sensitive:
+   *
+   * | Link                                         | URL           | isActive |
+   * | -------------------------------------------- | ------------- | -------- |
+   * | `<NavLink to="/SpOnGe-bOB" />`               | `/sponge-bob` | true     |
+   * | `<NavLink to="/SpOnGe-bOB" caseSensitive />` | `/sponge-bob` | false    |
+   */
+  caseSensitive?: boolean;
+  /**
+   * Classes are automatically applied to `NavLink` that correspond to the state.
+   *
+   * ```css
+   * a.active {
+   *   color: red;
+   * }
+   * a.pending {
+   *   color: blue;
+   * }
+   * a.transitioning {
+   *   view-transition-name: my-transition;
+   * }
+   * ```
+   *
+   * Or you can specify a function that receives {@link NavLinkRenderProps} and
+   * returns the `className`:
+   *
+   * ```tsx
+   * <NavLink className={({ isActive, isPending }) => (
+   *   isActive ? "my-active-class" :
+   *   isPending ? "my-pending-class" :
+   *   ""
+   * )} />
+   * ```
+   */
+  className?: string | ((props: NavLinkRenderProps) => string | undefined);
+  /**
+   * Changes the matching logic for the `active` and `pending` states to only match
+   * to the "end" of the {@link NavLinkProps.to}. If the URL is longer, it will no
+   * longer be considered active.
+   *
+   * | Link                          | URL          | isActive |
+   * | ----------------------------- | ------------ | -------- |
+   * | `<NavLink to="/tasks" />`     | `/tasks`     | true     |
+   * | `<NavLink to="/tasks" />`     | `/tasks/123` | true     |
+   * | `<NavLink to="/tasks" end />` | `/tasks`     | true     |
+   * | `<NavLink to="/tasks" end />` | `/tasks/123` | false    |
+   *
+   * `<NavLink to="/">` is an exceptional case because _every_ URL matches `/`.
+   * To avoid this matching every single route by default, it effectively ignores
+   * the `end` prop and only matches when you're at the root route.
+   */
+  end?: boolean;
+  /**
+   * Styles can also be applied dynamically via a function that receives
+   * {@link NavLinkRenderProps} and returns the styles:
+   *
+   * ```tsx
+   * <NavLink to="/tasks" style={{ color: "red" }} />
+   * <NavLink to="/tasks" style={({ isActive, isPending }) => ({
+   *   color:
+   *     isActive ? "red" :
+   *     isPending ? "blue" : "black"
+   * })} />
+   * ```
+   */
+  style?: React$1.CSSProperties | ((props: NavLinkRenderProps) => React$1.CSSProperties | undefined);
+}
+/**
+ * Wraps {@link Link | `<Link>`} with additional props for styling active and
+ * pending states.
+ *
+ * - Automatically applies classes to the link based on its `active` and `pending`
+ * states, see {@link NavLinkProps.className}
+ *   - Note that `pending` is only available with Framework and Data modes.
+ * - Automatically applies `aria-current="page"` to the link when the link is active.
+ * See [`aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
+ * on MDN.
+ * - States are additionally available through the className, style, and children
+ * render props. See {@link NavLinkRenderProps}.
+ *
+ * @example
+ * <NavLink to="/message">Messages</NavLink>
+ *
+ * // Using render props
+ * <NavLink
+ *   to="/messages"
+ *   className={({ isActive, isPending }) =>
+ *     isPending ? "pending" : isActive ? "active" : ""
+ *   }
+ * >
+ *   Messages
+ * </NavLink>
+ *
+ * @public
+ * @category Components
+ * @param {NavLinkProps.caseSensitive} props.caseSensitive n/a
+ * @param {NavLinkProps.children} props.children n/a
+ * @param {NavLinkProps.className} props.className n/a
+ * @param {NavLinkProps.discover} props.discover [modes: framework] n/a
+ * @param {NavLinkProps.end} props.end n/a
+ * @param {NavLinkProps.prefetch} props.prefetch [modes: framework] n/a
+ * @param {NavLinkProps.preventScrollReset} props.preventScrollReset [modes: framework, data] n/a
+ * @param {NavLinkProps.relative} props.relative n/a
+ * @param {NavLinkProps.reloadDocument} props.reloadDocument n/a
+ * @param {NavLinkProps.replace} props.replace n/a
+ * @param {NavLinkProps.state} props.state n/a
+ * @param {NavLinkProps.style} props.style n/a
+ * @param {NavLinkProps.to} props.to n/a
+ * @param {NavLinkProps.viewTransition} props.viewTransition [modes: framework, data] n/a
+ */
+declare const NavLink: React$1.ForwardRefExoticComponent<NavLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Form props shared by navigations and fetchers
+ */
+interface SharedFormProps extends React$1.FormHTMLAttributes<HTMLFormElement> {
+  /**
+   * The HTTP verb to use when the form is submitted. Supports `"delete"`,
+   * `"get"`, `"patch"`, `"post"`, and `"put"`.
+   *
+   * Native [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
+   * only supports `"get"` and `"post"`, avoid the other verbs if you'd like to
+   * support progressive enhancement
+   */
+  method?: HTMLFormMethod;
+  /**
+   * The encoding type to use for the form submission.
+   *
+   * ```tsx
+   * <Form encType="application/x-www-form-urlencoded"/>  // Default
+   * <Form encType="multipart/form-data"/>
+   * <Form encType="text/plain"/>
+   * ```
+   */
+  encType?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
+  /**
+   * The URL to submit the form data to. If `undefined`, this defaults to the
+   * closest route in context.
+   */
+  action?: string;
+  /**
+   * Determines whether the form action is relative to the route hierarchy or
+   * the pathname. Use this if you want to opt out of navigating the route
+   * hierarchy and want to instead route based on slash-delimited URL segments.
+   * See {@link RelativeRoutingType}.
+   */
+  relative?: RelativeRoutingType;
+  /**
+   * Prevent the scroll position from resetting to the top of the viewport on
+   * completion of the navigation when using the
+   * {@link ScrollRestoration | `<ScrollRestoration>`} component
+   */
+  preventScrollReset?: boolean;
+  /**
+   * Specify the default revalidation behavior after this submission
+   *
+   * If no `shouldRevalidate` functions are present on the active routes, then this
+   * value will be used directly.  Otherwise it will be passed into `shouldRevalidate`
+   * so the route can make the final determination on revalidation. This can be
+   * useful when updating search params and you don't want to trigger a revalidation.
+   *
+   * By default (when not specified), loaders will revalidate according to the routers
+   * standard revalidation behavior.
+   */
+  defaultShouldRevalidate?: boolean;
+}
+/**
+ * Form props available to fetchers
+ * @category Types
+ */
+interface FetcherFormProps extends SharedFormProps {}
+/**
+ * Form props available to navigations
+ * @category Types
+ */
+interface FormProps extends SharedFormProps {
+  /**
+   * Defines the form [lazy route discovery](../../explanation/lazy-route-discovery) behavior.
+   *
+   * - **render** — default, discover the route when the form renders
+   * - **none** — don't eagerly discover, only discover if the form is submitted
+   *
+   * ```tsx
+   * <Form /> // default ("render")
+   * <Form discover="render" />
+   * <Form discover="none" />
+   * ```
+   */
+  discover?: DiscoverBehavior;
+  /**
+   * Indicates a specific fetcherKey to use when using `navigate={false}` so you
+   * can pick up the fetcher's state in a different component in a {@link useFetcher}.
+   */
+  fetcherKey?: string;
+  /**
+   * When `false`, skips the navigation and submits via a fetcher internally.
+   * This is essentially a shorthand for {@link useFetcher} + `<fetcher.Form>` where
+   * you don't care about the resulting data in this component.
+   */
+  navigate?: boolean;
+  /**
+   * Forces a full document navigation instead of client side routing and data
+   * fetch.
+   */
+  reloadDocument?: boolean;
+  /**
+   * Replaces the current entry in the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
+   * stack when the form navigates. Use this if you don't want the user to be
+   * able to click "back" to the page with the form on it.
+   */
+  replace?: boolean;
+  /**
+   * State object to add to the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
+   * stack entry for this navigation
+   */
+  state?: any;
+  /**
+   * Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
+   * for this navigation. To apply specific styles during the transition, see
+   * {@link useViewTransitionState}.
+   */
+  viewTransition?: boolean;
+}
+/**
+ * A progressively enhanced HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
+ * that submits data to actions via [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch),
+ * activating pending states in {@link useNavigation} which enables advanced
+ * user interfaces beyond a basic HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).
+ * After a form's `action` completes, all data on the page is automatically
+ * revalidated to keep the UI in sync with the data.
+ *
+ * Because it uses the HTML form API, server rendered pages are interactive at a
+ * basic level before JavaScript loads. Instead of React Router managing the
+ * submission, the browser manages the submission as well as the pending states
+ * (like the spinning favicon). After JavaScript loads, React Router takes over
+ * enabling web application user experiences.
+ *
+ * `Form` is most useful for submissions that should also change the URL or
+ * otherwise add an entry to the browser history stack. For forms that shouldn't
+ * manipulate the browser [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
+ * stack, use {@link FetcherWithComponents.Form | `<fetcher.Form>`}.
+ *
+ * @example
+ * import { Form } from "react-router";
+ *
+ * function NewEvent() {
+ *   return (
+ *     <Form action="/events" method="post">
+ *       <input name="title" type="text" />
+ *       <input name="description" type="text" />
+ *     </Form>
+ *   );
+ * }
+ *
+ * @public
+ * @category Components
+ * @mode framework
+ * @mode data
+ * @param {FormProps.action} action n/a
+ * @param {FormProps.discover} discover n/a
+ * @param {FormProps.encType} encType n/a
+ * @param {FormProps.fetcherKey} fetcherKey n/a
+ * @param {FormProps.method} method n/a
+ * @param {FormProps.navigate} navigate n/a
+ * @param {FormProps.preventScrollReset} preventScrollReset n/a
+ * @param {FormProps.relative} relative n/a
+ * @param {FormProps.reloadDocument} reloadDocument n/a
+ * @param {FormProps.replace} replace n/a
+ * @param {FormProps.state} state n/a
+ * @param {FormProps.viewTransition} viewTransition n/a
+ * @param {FormProps.defaultShouldRevalidate} defaultShouldRevalidate n/a
+ * @returns A progressively enhanced [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) component
+ */
+declare const Form: React$1.ForwardRefExoticComponent<FormProps & React$1.RefAttributes<HTMLFormElement>>;
+type ScrollRestorationProps = ScriptsProps & {
+  /**
+   * A function that returns a key to use for scroll restoration. This is useful
+   * for custom scroll restoration logic, such as using only the pathname so
+   * that later navigations to prior paths will restore the scroll. Defaults to
+   * `location.key`. See {@link GetScrollRestorationKeyFunction}.
+   *
+   * ```tsx
+   * <ScrollRestoration
+   *   getKey={(location, matches) => {
+   *     // Restore based on a unique location key (default behavior)
+   *     return location.key
+   *
+   *     // Restore based on pathname
+   *     return location.pathname
+   *   }}
+   * />
+   * ```
+   */
+  getKey?: GetScrollRestorationKeyFunction;
+  /**
+   * The key to use for storing scroll positions in [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage).
+   * Defaults to `"react-router-scroll-positions"`.
+   */
+  storageKey?: string;
+};
+/**
+ * Emulates the browser's scroll restoration on location changes. Apps should only render one of these, right before the {@link Scripts} component.
+ *
+ * ```tsx
+ * import { ScrollRestoration } from "react-router";
+ *
+ * export default function Root() {
+ *   return (
+ *     <html>
+ *       <body>
+ *         <ScrollRestoration />
+ *         <Scripts />
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ *
+ * This component renders an inline `<script>` to prevent scroll flashing. The
+ * `nonce` prop will be passed down to the script tag to allow CSP nonce usage.
+ * If not provided in Framework Mode, it will default to any
+ * {@link ServerRouter | `<ServerRouter nonce>`} prop.
+ *
+ * ```tsx
+ * <ScrollRestoration nonce={cspNonce} />
+ * ```
+ *
+ * @public
+ * @category Components
+ * @mode framework
+ * @mode data
+ * @param props Props
+ * @param {ScrollRestorationProps.getKey} props.getKey n/a
+ * @param {ScriptsProps.nonce} props.nonce n/a
+ * @param {ScrollRestorationProps.storageKey} props.storageKey n/a
+ * @returns A [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
+ * tag that restores scroll positions on navigation.
+ */
+declare function ScrollRestoration({
+  getKey,
+  storageKey,
+  ...props
+}: ScrollRestorationProps): React$1.JSX.Element | null;
+declare namespace ScrollRestoration {
+  var displayName: string;
+}
+/**
+ * Handles the click behavior for router {@link Link | `<Link>`} components.This
+ * is useful if you need to create custom {@link Link | `<Link>`} components with
+ * the same click behavior we use in our exported {@link Link | `<Link>`}.
+ *
+ * @public
+ * @category Hooks
+ * @param to The URL to navigate to, can be a string or a partial {@link Path}.
+ * @param options Options
+ * @param options.preventScrollReset Whether to prevent the scroll position from
+ * being reset to the top of the viewport on completion of the navigation when
+ * using the {@link ScrollRestoration} component. Defaults to `false`.
+ * @param options.relative The {@link RelativeRoutingType | relative routing type}
+ * to use for the link. Defaults to `"route"`.
+ * @param options.replace Whether to replace the current [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
+ * entry instead of pushing a new one. Defaults to `false`.
+ * @param options.state The state to add to the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
+ * entry for this navigation. Defaults to `undefined`.
+ * @param options.target The target attribute for the link. Defaults to `undefined`.
+ * @param options.viewTransition Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
+ * for this navigation. To apply specific styles during the transition, see
+ * {@link useViewTransitionState}. Defaults to `false`.
+ * @param options.defaultShouldRevalidate Specify the default revalidation
+ * behavior for the navigation. When not specified, loaders revalidate
+ * according to the router's standard revalidation behavior.
+ * @param options.mask Masked location to display in the browser instead
+ * of the router location. Defaults to `undefined`.
+ * @param options.useTransitions Wraps the navigation in
+ * [`React.startTransition`](https://react.dev/reference/react/startTransition)
+ * for concurrent rendering. Defaults to `false`.
+ * @returns A click handler function that can be used in a custom {@link Link} component.
+ */
+declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, {
+  target,
+  replace: replaceProp,
+  mask,
+  state,
+  preventScrollReset,
+  relative,
+  viewTransition,
+  defaultShouldRevalidate,
+  useTransitions
+}?: {
+  target?: React$1.HTMLAttributeAnchorTarget;
+  replace?: boolean;
+  mask?: To;
+  state?: any;
+  preventScrollReset?: boolean;
+  relative?: RelativeRoutingType;
+  viewTransition?: boolean;
+  defaultShouldRevalidate?: boolean;
+  useTransitions?: boolean;
+}): (event: React$1.MouseEvent<E, MouseEvent>) => void;
+/**
+ * Returns a tuple of the current URL's [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
+ * and a function to update them. Setting the search params causes a navigation.
+ *
+ * ```tsx
+ * import { useSearchParams } from "react-router";
+ *
+ * export function SomeComponent() {
+ *   const [searchParams, setSearchParams] = useSearchParams();
+ *   // ...
+ * }
+ * ```
+ *
+ * ### `setSearchParams` function
+ *
+ * The second element of the tuple is a function that can be used to update the
+ * search params. It accepts the same types as `defaultInit` and will cause a
+ * navigation to the new URL.
+ *
+ * ```tsx
+ * let [searchParams, setSearchParams] = useSearchParams();
+ *
+ * // a search param string
+ * setSearchParams("?tab=1");
+ *
+ * // a shorthand object
+ * setSearchParams({ tab: "1" });
+ *
+ * // object keys can be arrays for multiple values on the key
+ * setSearchParams({ brand: ["nike", "reebok"] });
+ *
+ * // an array of tuples
+ * setSearchParams([["tab", "1"]]);
+ *
+ * // a `URLSearchParams` object
+ * setSearchParams(new URLSearchParams("?tab=1"));
+ * ```
+ *
+ * It also supports a function callback like React's
+ * [`setState`](https://react.dev/reference/react/useState#setstate):
+ *
+ * ```tsx
+ * setSearchParams((searchParams) => {
+ *   searchParams.set("tab", "2");
+ *   return searchParams;
+ * });
+ * ```
+ *
+ * <docs-warning>The function callback version of `setSearchParams` does not support
+ * the [queueing](https://react.dev/reference/react/useState#setstate-parameters)
+ * logic that React's `setState` implements.  Multiple calls to `setSearchParams`
+ * in the same tick will not build on the prior value.  If you need this behavior,
+ * you can use `setState` manually.</docs-warning>
+ *
+ * ### Notes
+ *
+ * Note that `searchParams` is a stable reference, so you can reliably use it
+ * as a dependency in React's [`useEffect`](https://react.dev/reference/react/useEffect)
+ * hooks.
+ *
+ * ```tsx
+ * useEffect(() => {
+ *   console.log(searchParams.get("tab"));
+ * }, [searchParams]);
+ * ```
+ *
+ * However, this also means it's mutable. If you change the object without
+ * calling `setSearchParams`, its values will change between renders if some
+ * other state causes the component to re-render and URL will not reflect the
+ * values.
+ *
+ * @public
+ * @category Hooks
+ * @param defaultInit
+ * You can initialize the search params with a default value, though it **will
+ * not** change the URL on the first render.
+ *
+ * ```tsx
+ * // a search param string
+ * useSearchParams("?tab=1");
+ *
+ * // a shorthand object
+ * useSearchParams({ tab: "1" });
+ *
+ * // object keys can be arrays for multiple values on the key
+ * useSearchParams({ brand: ["nike", "reebok"] });
+ *
+ * // an array of tuples
+ * useSearchParams([["tab", "1"]]);
+ *
+ * // a `URLSearchParams` object
+ * useSearchParams(new URLSearchParams("?tab=1"));
+ * ```
+ * @returns A tuple of the current [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
+ * and a function to update them.
+ */
+declare function useSearchParams(defaultInit?: URLSearchParamsInit): [URLSearchParams, SetURLSearchParams];
+/**
+ *  Sets new search params and causes a navigation when called.
+ *
+ *  ```tsx
+ *  <button
+ *    onClick={() => {
+ *      const params = new URLSearchParams();
+ *      params.set("someKey", "someValue");
+ *      setSearchParams(params, {
+ *        preventScrollReset: true,
+ *      });
+ *    }}
+ *  />
+ *  ```
+ *
+ *  It also supports a function for setting new search params.
+ *
+ *  ```tsx
+ *  <button
+ *    onClick={() => {
+ *      setSearchParams((prev) => {
+ *        prev.set("someKey", "someValue");
+ *        return prev;
+ *      });
+ *    }}
+ *  />
+ *  ```
+ */
+type SetURLSearchParams = (nextInit?: URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions) => void;
+/**
+ * Submits a HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
+ * to the server without reloading the page.
+ */
+interface SubmitFunction {
+  (
+  /**
+   * Can be multiple types of elements and objects
+   *
+   * **[`HTMLFormElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)**
+   *
+   * ```tsx
+   * <Form
+   *   onSubmit={(event) => {
+   *     submit(event.currentTarget);
+   *   }}
+   * />
+   * ```
+   *
+   * **[`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)**
+   *
+   * ```tsx
+   * const formData = new FormData();
+   * formData.append("myKey", "myValue");
+   * submit(formData, { method: "post" });
+   * ```
+   *
+   * **Plain object that will be serialized as [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)**
+   *
+   * ```tsx
+   * submit({ myKey: "myValue" }, { method: "post" });
+   * ```
+   *
+   * **Plain object that will be serialized as JSON**
+   *
+   * ```tsx
+   * submit(
+   *   { myKey: "myValue" },
+   *   { method: "post", encType: "application/json" }
+   * );
+   * ```
+   */
+  target: SubmitTarget,
+  /**
+   * Options that override the [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)'s
+   * own attributes. Required when submitting arbitrary data without a backing
+   * [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).
+   */
+  options?: SubmitOptions): Promise<void>;
+}
+/**
+ * Submits a fetcher [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) to the server without reloading the page.
+ */
+interface FetcherSubmitFunction {
+  (
+  /**
+   * Can be multiple types of elements and objects
+   *
+   * **[`HTMLFormElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)**
+   *
+   * ```tsx
+   * <fetcher.Form
+   *   onSubmit={(event) => {
+   *     fetcher.submit(event.currentTarget);
+   *   }}
+   * />
+   * ```
+   *
+   * **[`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)**
+   *
+   * ```tsx
+   * const formData = new FormData();
+   * formData.append("myKey", "myValue");
+   * fetcher.submit(formData, { method: "post" });
+   * ```
+   *
+   * **Plain object that will be serialized as [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)**
+   *
+   * ```tsx
+   * fetcher.submit({ myKey: "myValue" }, { method: "post" });
+   * ```
+   *
+   * **Plain object that will be serialized as JSON**
+   *
+   * ```tsx
+   * fetcher.submit(
+   *   { myKey: "myValue" },
+   *   { method: "post", encType: "application/json" }
+   * );
+   * ```
+   */
+  target: SubmitTarget, options?: FetcherSubmitOptions): Promise<void>;
+}
+/**
+ * The imperative version of {@link Form | `<Form>`} that lets you submit a form
+ * from code instead of a user interaction.
+ *
+ * @example
+ * import { useSubmit } from "react-router";
+ *
+ * function SomeComponent() {
+ *   const submit = useSubmit();
+ *   return (
+ *     <Form onChange={(event) => submit(event.currentTarget)} />
+ *   );
+ * }
+ *
+ * @public
+ * @category Hooks
+ * @mode framework
+ * @mode data
+ * @returns A function that can be called to submit a {@link Form} imperatively.
+ */
+declare function useSubmit(): SubmitFunction;
+/**
+ * Resolves the URL to the closest route in the component hierarchy instead of
+ * the current URL of the app.
+ *
+ * This is used internally by {@link Form} to resolve the `action` to the closest
+ * route, but can be used generically as well.
+ *
+ * ```ts
+ * import { useFormAction } from "react-router";
+ *
+ * function SomeComponent() {
+ *   // closest route URL
+ *   let action = useFormAction();
+ *
+ *   // closest route URL + "destroy"
+ *   let destroyAction = useFormAction("destroy");
+ * }
+ * ```
+ *
+ * <docs-info>This hook adds a `basename` if your app specifies one, so that it
+ * can be used with raw `<form>` elements in a progressively enhanced way.  If
+ * you are using this to provide an `action` to `<Form>` or `fetcher.submit`, you
+ * will need to remove the `basename` since both of those will prepend it
+ * internally.</docs-info>
+ *
+ *
+ * @public
+ * @category Hooks
+ * @mode framework
+ * @mode data
+ * @param action The action to append to the closest route URL. Defaults to the
+ * closest route URL.
+ * @param options Options
+ * @param options.relative The relative routing type to use when resolving the
+ * action. Defaults to `"route"`.
+ * @returns The resolved action URL.
+ */
+declare function useFormAction(action?: string, {
+  relative
+}?: {
+  relative?: RelativeRoutingType;
+}): string;
+/**
+ * The return value {@link useFetcher} that keeps track of the state of a fetcher.
+ *
+ * ```tsx
+ * let fetcher = useFetcher();
+ * ```
+ */
+type FetcherWithComponents<TData> = Fetcher<TData> & {
+  /**
+   * Just like {@link Form} except it doesn't cause a navigation.
+   *
+   * ```tsx
+   * function SomeComponent() {
+   *   const fetcher = useFetcher()
+   *   return (
+   *     <fetcher.Form method="post" action="/some/route">
+   *       <input type="text" />
+   *     </fetcher.Form>
+   *   )
+   * }
+   * ```
+   */
+  Form: React$1.ForwardRefExoticComponent<FetcherFormProps & React$1.RefAttributes<HTMLFormElement>>;
+  /**
+   * Loads data from a route. Useful for loading data imperatively inside user
+   * events outside a normal button or form, like a combobox or search input.
+   *
+   * ```tsx
+   * let fetcher = useFetcher()
+   *
+   * <input onChange={e => {
+   *   fetcher.load(`/search?q=${e.target.value}`)
+   * }} />
+   * ```
+   */
+  load: (href: string, opts?: {
+    /**
+     * Wraps the initial state update for this `fetcher.load` in a
+     * [`ReactDOM.flushSync`](https://react.dev/reference/react-dom/flushSync)
+     * call instead of the default [`React.startTransition`](https://react.dev/reference/react/startTransition).
+     * This allows you to perform synchronous DOM actions immediately after the
+     * update is flushed to the DOM.
+     */
+    flushSync?: boolean;
+  }) => Promise<void>;
+  /**
+   * Reset a fetcher back to an empty/idle state.
+   *
+   * If the fetcher is currently in-flight, the
+   * [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)
+   * will be aborted with the `reason`, if provided.
+   * @param opts Options for resetting the fetcher.
+   * @param opts.reason Optional `reason` to provide to [`AbortController.abort()`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort)
+   * @returns void
+   */
+  reset: (opts?: {
+    reason?: unknown;
+  }) => void;
+  /**
+   *  Submits form data to a route. While multiple nested routes can match a URL, only the leaf route will be called.
+   *
+   *  The `formData` can be multiple types:
+   *
+   *  - [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)
+   *    A `FormData` instance.
+   *  - [`HTMLFormElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)
+   *    A [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) DOM element.
+   *  - `Object`
+   *    An object of key/value-pairs that will be converted to a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)
+   *    instance by default. You can pass a more complex object and serialize it
+   *    as JSON by specifying `encType: "application/json"`. See
+   *    {@link useSubmit} for more details.
+   *
+   *  If the method is `GET`, then the route [`loader`](../../start/framework/route-module#loader)
+   *  is being called and with the `formData` serialized to the url as [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams).
+   *  If `DELETE`, `PATCH`, `POST`, or `PUT`, then the route [`action`](../../start/framework/route-module#action)
+   *  is being called with `formData` as the body.
+   *
+   *  ```tsx
+   *  // Submit a FormData instance (GET request)
+   *  const formData = new FormData();
+   *  fetcher.submit(formData);
+   *
+   *  // Submit the HTML form element
+   *  fetcher.submit(event.currentTarget.form, {
+   *    method: "POST",
+   *  });
+   *
+   *  // Submit key/value JSON as a FormData instance
+   *  fetcher.submit(
+   *    { serialized: "values" },
+   *    { method: "POST" }
+   *  );
+   *
+   *  // Submit raw JSON
+   *  fetcher.submit(
+   *    {
+   *      deeply: {
+   *        nested: {
+   *          json: "values",
+   *        },
+   *      },
+   *    },
+   *    {
+   *      method: "POST",
+   *      encType: "application/json",
+   *    }
+   *  );
+   *  ```
+   */
+  submit: FetcherSubmitFunction;
+};
+/**
+ * Useful for creating complex, dynamic user interfaces that require multiple,
+ * concurrent data interactions without causing a navigation.
+ *
+ * Fetchers track their own, independent state and can be used to load data, submit
+ * forms, and generally interact with [`action`](../../start/framework/route-module#action)
+ * and [`loader`](../../start/framework/route-module#loader) functions.
+ *
+ * @example
+ * import { useFetcher } from "react-router"
+ *
+ * function SomeComponent() {
+ *   let fetcher = useFetcher()
+ *
+ *   // states are available on the fetcher
+ *   fetcher.state // "idle" | "loading" | "submitting"
+ *   fetcher.data // the data returned from the action or loader
+ *
+ *   // render a form
+ *   <fetcher.Form method="post" />
+ *
+ *   // load data
+ *   fetcher.load("/some/route")
+ *
+ *   // submit data
+ *   fetcher.submit(someFormRef, { method: "post" })
+ *   fetcher.submit(someData, {
+ *     method: "post",
+ *     encType: "application/json"
+ *   })
+ *
+ *   // reset fetcher
+ *   fetcher.reset()
+ * }
+ *
+ * @public
+ * @category Hooks
+ * @mode framework
+ * @mode data
+ * @param options Options
+ * @param options.key A unique key to identify the fetcher.
+ *
+ *
+ * By default, `useFetcher` generates a unique fetcher scoped to that component.
+ * If you want to identify a fetcher with your own key such that you can access
+ * it from elsewhere in your app, you can do that with the `key` option:
+ *
+ * ```tsx
+ * function SomeComp() {
+ *   let fetcher = useFetcher({ key: "my-key" })
+ *   // ...
+ * }
+ *
+ * // Somewhere else
+ * function AnotherComp() {
+ *   // this will be the same fetcher, sharing the state across the app
+ *   let fetcher = useFetcher({ key: "my-key" });
+ *   // ...
+ * }
+ * ```
+ * @returns A {@link FetcherWithComponents} object that contains the fetcher's state, data, and components for submitting forms and loading data.
+ */
+declare function useFetcher<T = any>({
+  key
+}?: {
+  key?: string;
+}): FetcherWithComponents<SerializeFrom<T>>;
+/**
+ * Returns an array of all in-flight {@link Fetcher}s. This is useful for components
+ * throughout the app that didn't create the fetchers but want to use their submissions
+ * to participate in optimistic UI.
+ *
+ * @example
+ * import { useFetchers } from "react-router";
+ *
+ * function SomeComponent() {
+ *   const fetchers = useFetchers();
+ *   fetchers[0].formData; // FormData
+ *   fetchers[0].state; // etc.
+ *   // ...
+ * }
+ *
+ * @public
+ * @category Hooks
+ * @mode framework
+ * @mode data
+ * @returns An array of all in-flight {@link Fetcher}s, each with a unique `key`
+ * property.
+ */
+declare function useFetchers(): (Fetcher & {
+  key: string;
+})[];
+/**
+ * When rendered inside a {@link RouterProvider}, will restore scroll positions
+ * on navigations
+ *
+ * <!--
+ * Not marked `@public` because we only export as UNSAFE_ and therefore we don't
+ * maintain an .md file for this hook
+ * -->
+ *
+ * @name UNSAFE_useScrollRestoration
+ * @category Hooks
+ * @mode framework
+ * @mode data
+ * @param options Options
+ * @param options.getKey A function that returns a key to use for scroll restoration.
+ * This is useful for custom scroll restoration logic, such as using only the pathname
+ * so that subsequent navigations to prior paths will restore the scroll. Defaults
+ * to `location.key`.
+ * @param options.storageKey The key to use for storing scroll positions in
+ * `sessionStorage`. Defaults to `"react-router-scroll-positions"`.
+ * @returns {void}
+ */
+declare function useScrollRestoration({
+  getKey,
+  storageKey
+}?: {
+  getKey?: GetScrollRestorationKeyFunction;
+  storageKey?: string;
+}): void;
+/**
+ * Set up a callback to be fired on [Window's `beforeunload` event](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event).
+ *
+ * @public
+ * @category Hooks
+ * @param callback The callback to be called when the [`beforeunload` event](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event)
+ * is fired.
+ * @param options Options
+ * @param options.capture If `true`, the event will be captured during the capture
+ * phase. Defaults to `false`.
+ * @returns {void}
+ */
+declare function useBeforeUnload(callback: (event: BeforeUnloadEvent) => any, options?: {
+  capture?: boolean;
+}): void;
+/**
+ * Wrapper around {@link useBlocker} to show a [`window.confirm`](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm)
+ * prompt to users instead of building a custom UI with {@link useBlocker}.
+ *
+ * The `unstable_` flag will not be removed because this technique has a lot of
+ * rough edges and behaves very differently (and incorrectly sometimes) across
+ * browsers if users click addition back/forward navigations while the
+ * confirmation is open. Use at your own risk.
+ *
+ * @example
+ * function ImportantForm() {
+ *   let [value, setValue] = React.useState("");
+ *
+ *   // Block navigating elsewhere when data has been entered into the input
+ *   unstable_usePrompt({
+ *     message: "Are you sure?",
+ *     when: ({ currentLocation, nextLocation }) =>
+ *       value !== "" &&
+ *       currentLocation.pathname !== nextLocation.pathname,
+ *   });
+ *
+ *   return (
+ *     <Form method="post">
+ *       <label>
+ *         Enter some important data:
+ *         <input
+ *           name="data"
+ *           value={value}
+ *           onChange={(e) => setValue(e.target.value)}
+ *         />
+ *       </label>
+ *       <button type="submit">Save</button>
+ *     </Form>
+ *   );
+ * }
+ *
+ * @name unstable_usePrompt
+ * @public
+ * @category Hooks
+ * @mode framework
+ * @mode data
+ * @param options Options
+ * @param options.message The message to show in the confirmation dialog.
+ * @param options.when A boolean or a function that returns a boolean indicating
+ * whether to block the navigation. If a function is provided, it will receive an
+ * object with `currentLocation` and `nextLocation` properties.
+ * @returns {void}
+ */
+declare function usePrompt({
+  when,
+  message
+}: {
+  when: boolean | BlockerFunction;
+  message: string;
+}): void;
+/**
+ * This hook returns `true` when there is an active [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
+ * and the specified location matches either side of the navigation (the URL you are
+ * navigating **to** or the URL you are navigating **from**). This can be used to apply finer-grained styles to
+ * elements to further customize the view transition. This requires that view
+ * transitions have been enabled for the given navigation via {@link LinkProps.viewTransition}
+ * (or the `Form`, `submit`, or `navigate` call)
+ *
+ * @public
+ * @category Hooks
+ * @mode framework
+ * @mode data
+ * @param to The {@link To} location to compare against the active transition's current
+ * and next URLs.
+ * @param options Options
+ * @param options.relative The relative routing type to use when resolving the
+ * `to` location, defaults to `"route"`. See {@link RelativeRoutingType} for
+ * more details.
+ * @returns `true` if there is an active [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
+ * and the resolved path matches the transition's destination or source pathname, otherwise `false`.
+ */
+declare function useViewTransitionState(to: To, {
+  relative
+}?: {
+  relative?: RelativeRoutingType;
+}): boolean;
+//#endregion
+export { BrowserRouter, BrowserRouterProps, DOMRouterOpts, FetcherFormProps, FetcherSubmitFunction, FetcherWithComponents, Form, FormProps, HashRouter, HashRouterProps, HistoryRouter, HistoryRouterProps, Link, LinkProps, NavLink, NavLinkProps, NavLinkRenderProps, ScrollRestoration, ScrollRestorationProps, SetURLSearchParams, SubmitFunction, createBrowserRouter, createHashRouter, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLinkClickHandler, usePrompt, useScrollRestoration, useSearchParams, useSubmit, useViewTransitionState };