INDIE UNPKG

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

Version:
74.4 kBTypeScriptView Raw
1
2import { History, To } from "../router/history.js";
3import { DataStrategyFunction, HTMLFormMethod, PatchRoutesOnNavigationFunction, RouteObject } from "../router/utils.js";
4import { BlockerFunction, Fetcher, FutureConfig, GetScrollRestorationKeyFunction, HydrationState, RelativeRoutingType, Router, RouterInit } from "../router/router.js";
5import { NavigateOptions } from "../context.js";
6import { SerializeFrom } from "../types/route-data.js";
7import { FetcherSubmitOptions, SubmitOptions, SubmitTarget, URLSearchParamsInit } from "./dom.js";
8import { DiscoverBehavior, PrefetchBehavior, ScriptsProps } from "./ssr/components.js";
9import { ClientInstrumentation } from "../router/instrumentation.js";
10import * as React$1 from "react";
11
12//#region lib/dom/lib.d.ts
13/**
* @category Data Routers
*/
16interface 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;
500}
501/**
* 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>`}
*/
525declare function createBrowserRouter(routes: RouteObject[], opts?: DOMRouterOpts): Router;
526/**
* 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>`}
*/
549declare function createHashRouter(routes: RouteObject[], opts?: DOMRouterOpts): Router;
550/**
* @category Types
*/
553interface 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;
582}
583/**
* 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.
*/
598declare function BrowserRouter({
basename,
children,
useTransitions,
window
603}: BrowserRouterProps): React$1.JSX.Element;
604/**
* @category Types
*/
607interface 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;
636}
637/**
* 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.
*/
653declare function HashRouter({
basename,
children,
useTransitions,
window
658}: HashRouterProps): React$1.JSX.Element;
659/**
* @category Types
*/
662interface 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;
690}
691/**
* 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.
*/
710declare function HistoryRouter({
basename,
children,
history,
useTransitions
715}: HistoryRouterProps): React$1.JSX.Element;
716declare namespace HistoryRouter {
var displayName: string;
718}
719/**
* @category Types
*/
722interface 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;
/**
 * **Deprecated.** Use React's [`<ViewTransition>`](https://react.dev/reference/react/ViewTransition)
 * component instead. See the [migration guide](../../how-to/view-transitions).
 *
 * 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}
 *
 * @deprecated Use React's `<ViewTransition>` component instead.
 */
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;
947}
948/**
* 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
*/
979declare const Link: React$1.ForwardRefExoticComponent<LinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
980/**
* 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>
* ```
*
*/
1015type 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}
 *
 * @deprecated Only tracks React Router's deprecated view transitions. Use
 * React's `<ViewTransition>` component to style transitions instead. See the
 * [migration guide](https://reactrouter.com/how-to/view-transitions).
 */
isTransitioning: boolean;
1034};
1035/**
* @category Types
*/
1038interface 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;
 * }
 * ```
 *
 * 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" :
 *   ""
 * )} />
 * ```
 *
 * The `transitioning` class is deprecated and only tracks React Router's
 * legacy view transitions. Use React's [`<ViewTransition>`](https://react.dev/reference/react/ViewTransition)
 * component instead. See the [migration guide](../../how-to/view-transitions).
 */
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);
1120}
1121/**
* 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
*/
1164declare const NavLink: React$1.ForwardRefExoticComponent<NavLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
1165/**
* Form props shared by navigations and fetchers
*/
1168interface 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;
1218}
1219/**
* Form props available to fetchers
* @category Types
*/
1223interface FetcherFormProps extends SharedFormProps {}
1224/**
* Form props available to navigations
* @category Types
*/
1228interface 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;
/**
 * **Deprecated.** Use React's [`<ViewTransition>`](https://react.dev/reference/react/ViewTransition)
 * component instead. See the [migration guide](../../how-to/view-transitions).
 *
 * 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}.
 *
 * @deprecated Use React's `<ViewTransition>` component instead.
 */
viewTransition?: boolean;
1280}
1281/**
* 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
*/
1331declare const Form: React$1.ForwardRefExoticComponent<FormProps & React$1.RefAttributes<HTMLFormElement>>;
1332type 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;
1357};
1358/**
* 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.
*/
1396declare function ScrollRestoration({
getKey,
storageKey,
...props
1400}: ScrollRestorationProps): React$1.JSX.Element | null;
1401declare namespace ScrollRestoration {
var displayName: string;
1403}
1404/**
* 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 **Deprecated.** Use React's
* [`<ViewTransition>`](https://react.dev/reference/react/ViewTransition) component
* instead. See the [migration guide](../../how-to/view-transitions).
* @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.
*/
1436declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, {
target,
replace: replaceProp,
mask,
state,
preventScrollReset,
relative,
viewTransition,
defaultShouldRevalidate,
useTransitions
1446}?: {
target?: React$1.HTMLAttributeAnchorTarget;
replace?: boolean;
mask?: To;
state?: any;
preventScrollReset?: boolean;
relative?: RelativeRoutingType;
defaultShouldRevalidate?: boolean;
useTransitions?: boolean;
1455} & Pick<NavigateOptions, "viewTransition">): (event: React$1.MouseEvent<E, MouseEvent>) => void;
1456/**
* 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.
*/
1552declare function useSearchParams(defaultInit?: URLSearchParamsInit): [URLSearchParams, SetURLSearchParams];
1553/**
*  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;
*      });
*    }}
*  />
*  ```
*/
1581type SetURLSearchParams = (nextInit?: URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions) => void;
1582/**
* Submits a HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
* to the server without reloading the page.
*/
1586interface 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>;
1631}
1632/**
* Submits a fetcher [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) to the server without reloading the page.
*/
1635interface 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>;
1674}
1675/**
* The imperative version of {@link Form | `<Form>`} that lets you submit a form
* from code instead of a user interaction.
*
* The `viewTransition` submission option is deprecated. Use React's
* [`<ViewTransition>`](https://react.dev/reference/react/ViewTransition) component
* instead. See the [migration guide](../../how-to/view-transitions).
*
* @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.
*/
1699declare function useSubmit(): SubmitFunction;
1700/**
* 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.
*/
1737declare function useFormAction(action?: string, {
relative
1739}?: {
relative?: RelativeRoutingType;
1741}): string;
1742/**
* The return value {@link useFetcher} that keeps track of the state of a fetcher.
*
* ```tsx
* let fetcher = useFetcher();
* ```
*/
1749type 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;
1853};
1854/**
* 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.
*/
1916declare function useFetcher<T = any>({
key
1918}?: {
key?: string;
1920}): FetcherWithComponents<SerializeFrom<T>>;
1921/**
* 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.
*/
1943declare function useFetchers(): (Fetcher & {
key: string;
1945})[];
1946/**
* 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}
*/
1968declare function useScrollRestoration({
getKey,
storageKey
1971}?: {
getKey?: GetScrollRestorationKeyFunction;
storageKey?: string;
1974}): void;
1975/**
* 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}
*/
1987declare function useBeforeUnload(callback: (event: BeforeUnloadEvent) => any, options?: {
capture?: boolean;
1989}): void;
1990/**
* 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}
*/
2038declare function usePrompt({
when,
message
2041}: {
when: boolean | BlockerFunction;
message: string;
2044}): void;
2045/**
* **Deprecated.** Use React's [`<ViewTransition>`](https://react.dev/reference/react/ViewTransition)
* component to style transitions instead. This hook only tracks React Router's
* legacy view transitions, not transitions started by React. See the
* [migration guide](../../how-to/view-transitions).
*
* 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`.
*
* @deprecated Use React's `<ViewTransition>` component instead.
*/
2073declare function useViewTransitionState(to: To, {
relative
2075}?: {
relative?: RelativeRoutingType;
2077}): boolean;
2078//#endregion
2079export { 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 };
\No newline at end of file