UNPKG

56.3 kBTypeScriptView Raw
1import { n as Router, o as RouteModules, p as DataStrategyFunction, q as MiddlewareEnabled, c as RouterContextProvider, r as AppLoadContext, T as To, s as NavigateOptions, B as BlockerFunction, t as Blocker, v as SerializeFrom, w as RelativeRoutingType, L as Location, x as ParamParseKey, y as Path, z as PathPattern, E as PathMatch, U as UIMatch, I as Navigation, J as Action, P as Params, K as RouteObject, G as GetLoaderData, m as GetActionData, O as InitialEntry, Q as HydrationState, V as IndexRouteObject, W as RouteComponentType, X as HydrateFallbackType, Y as ErrorBoundaryType, d as LoaderFunction, A as ActionFunction, M as MetaFunction, b as LinksFunction, Z as NonIndexRouteObject, _ as Equal, $ as RouterState, a0 as PatchRoutesOnNavigationFunction, a1 as DataRouteObject, a as ClientLoaderFunction } from './instrumentation--6Pioq_G.js';
2export { ac as ActionFunctionArgs, b1 as Await, aQ as AwaitProps, C as ClientActionFunction, bd as ClientActionFunctionArgs, be as ClientLoaderFunctionArgs, aS as ClientOnErrorFunction, aL as DataRouteMatch, ad as DataStrategyFunctionArgs, ae as DataStrategyMatch, D as DataStrategyResult, ag as ErrorResponse, a6 as Fetcher, ah as FormEncType, ai as FormMethod, bj as Future, a3 as GetScrollPositionFunction, a4 as GetScrollRestorationKeyFunction, aj as HTMLFormMethod, bf as HeadersArgs, H as HeadersFunction, bi as HtmlLinkDescriptor, aB as IDLE_BLOCKER, aA as IDLE_FETCHER, az as IDLE_NAVIGATION, aR as IndexRouteProps, aT as LayoutRouteProps, ak as LazyRouteFunction, f as LinkDescriptor, al as LoaderFunctionArgs, b2 as MemoryRouter, aU as MemoryRouterOpts, aV as MemoryRouterProps, bg as MetaArgs, h as MetaDescriptor, am as MiddlewareFunction, b3 as Navigate, aW as NavigateProps, a7 as NavigationStates, aM as Navigator, b4 as Outlet, aX as OutletProps, bh as PageLinkDescriptor, aN as PatchRoutesOnNavigationFunctionArgs, an as PathParam, aY as PathRouteProps, ao as RedirectFunction, ab as RevalidationState, b5 as Route, aO as RouteMatch, aZ as RouteProps, b6 as Router, ap as RouterContext, aa as RouterFetchOptions, e as RouterInit, a9 as RouterNavigateOptions, a_ as RouterProps, b7 as RouterProvider, a$ as RouterProviderProps, a8 as RouterSubscriber, b8 as Routes, b0 as RoutesProps, S as ShouldRevalidateFunction, aq as ShouldRevalidateFunctionArgs, a2 as StaticHandler, a5 as StaticHandlerContext, aP as UNSAFE_AwaitContextProvider, br as UNSAFE_DataRouterContext, bs as UNSAFE_DataRouterStateContext, af as UNSAFE_DataWithResponseInit, bq as UNSAFE_ErrorResponseImpl, bt as UNSAFE_FetchersContext, bu as UNSAFE_LocationContext, bv as UNSAFE_NavigationContext, bw as UNSAFE_RouteContext, bx as UNSAFE_ViewTransitionContext, bA as UNSAFE_WithComponentProps, bE as UNSAFE_WithErrorBoundaryProps, bC as UNSAFE_WithHydrateFallbackProps, bm as UNSAFE_createBrowserHistory, bn as UNSAFE_createHashHistory, bl as UNSAFE_createMemoryHistory, bp as UNSAFE_createRouter, by as UNSAFE_hydrationRouteProperties, bo as UNSAFE_invariant, bz as UNSAFE_mapRouteProperties, bB as UNSAFE_withComponentProps, bF as UNSAFE_withErrorBoundaryProps, bD as UNSAFE_withHydrateFallbackProps, ar as createContext, b9 as createMemoryRouter, as as createPath, ba as createRoutesFromChildren, bb as createRoutesFromElements, aC as data, aD as generatePath, aE as isRouteErrorResponse, aF as matchPath, aG as matchRoutes, at as parsePath, aH as redirect, aI as redirectDocument, bc as renderMatches, aJ as replace, aK as resolvePath, u as unstable_ClientInstrumentation, av as unstable_InstrumentRequestHandlerFunction, ax as unstable_InstrumentRouteFunction, aw as unstable_InstrumentRouterFunction, ay as unstable_InstrumentationHandlerResult, bk as unstable_SerializesTo, au as unstable_ServerInstrumentation } from './instrumentation--6Pioq_G.js';
3import * as React from 'react';
4import React__default, { ReactElement } from 'react';
5import { a as RouteModules$1, P as Pages } from './register-CBoanF80.js';
6export { b as Register } from './register-CBoanF80.js';
7import { A as AssetsManifest, S as ServerBuild, E as EntryContext, F as FutureConfig } from './index-react-server-client-C4tCIird.js';
8export { l as BrowserRouter, B as BrowserRouterProps, D as DOMRouterOpts, a1 as DiscoverBehavior, c as FetcherFormProps, h as FetcherSubmitFunction, G as FetcherSubmitOptions, i as FetcherWithComponents, q as Form, d as FormProps, a2 as HandleDataRequestFunction, a3 as HandleDocumentRequestFunction, a4 as HandleErrorFunction, m as HashRouter, H as HashRouterProps, a as HistoryRouterProps, n as Link, L as LinkProps, X as Links, _ as LinksProps, W as Meta, p as NavLink, N as NavLinkProps, b as NavLinkRenderProps, P as ParamKeyValuePair, a0 as PrefetchBehavior, Z as PrefetchPageLinks, Y as Scripts, $ as ScriptsProps, r as ScrollRestoration, e as ScrollRestorationProps, a5 as ServerEntryModule, f as SetURLSearchParams, T as StaticRouter, M as StaticRouterProps, V as StaticRouterProvider, O as StaticRouterProviderProps, g as SubmitFunction, I as SubmitOptions, J as SubmitTarget, a6 as UNSAFE_FrameworkContext, a7 as UNSAFE_createClientRoutes, a8 as UNSAFE_createClientRoutesWithHMRRevalidationOptOut, a9 as UNSAFE_shouldHydrateRouteLoader, aa as UNSAFE_useScrollRestoration, U as URLSearchParamsInit, j as createBrowserRouter, k as createHashRouter, K as createSearchParams, Q as createStaticHandler, R as createStaticRouter, o as unstable_HistoryRouter, z as unstable_usePrompt, y as useBeforeUnload, w as useFetcher, x as useFetchers, v as useFormAction, u as useLinkClickHandler, s as useSearchParams, t as useSubmit, C as useViewTransitionState } from './index-react-server-client-C4tCIird.js';
9import { ParseOptions, SerializeOptions } from 'cookie';
10export { ParseOptions as CookieParseOptions, SerializeOptions as CookieSerializeOptions } from 'cookie';
11import { e as RSCPayload, g as getRequest, m as matchRSCServerRequest } from './browser-sPQ7eaK4.js';
12export { B as unstable_BrowserCreateFromReadableStreamFunction, D as unstable_DecodeActionFunction, a as unstable_DecodeFormStateFunction, b as unstable_DecodeReplyFunction, E as unstable_EncodeReplyFunction, L as unstable_LoadServerActionFunction, h as unstable_RSCHydratedRouterProps, d as unstable_RSCManifestPayload, i as unstable_RSCMatch, f as unstable_RSCRenderPayload, n as unstable_RSCRouteConfig, l as unstable_RSCRouteConfigEntry, j as unstable_RSCRouteManifest, k as unstable_RSCRouteMatch } from './browser-sPQ7eaK4.js';
13
14declare const SingleFetchRedirectSymbol: unique symbol;
15declare function getTurboStreamSingleFetchDataStrategy(getRouter: () => Router, manifest: AssetsManifest, routeModules: RouteModules, ssr: boolean, basename: string | undefined, trailingSlashAware: boolean): DataStrategyFunction;
16declare function decodeViaTurboStream(body: ReadableStream<Uint8Array>, global: Window | typeof globalThis): Promise<{
17 done: Promise<undefined>;
18 value: unknown;
19}>;
20
21/**
22 * The mode to use when running the server.
23 */
24declare enum ServerMode {
25 Development = "development",
26 Production = "production",
27 Test = "test"
28}
29
30type RequestHandler = (request: Request, loadContext?: MiddlewareEnabled extends true ? RouterContextProvider : AppLoadContext) => Promise<Response>;
31type CreateRequestHandlerFunction = (build: ServerBuild | (() => ServerBuild | Promise<ServerBuild>), mode?: string) => RequestHandler;
32declare const createRequestHandler: CreateRequestHandlerFunction;
33
34/**
35 * Resolves a URL against the current {@link Location}.
36 *
37 * @example
38 * import { useHref } from "react-router";
39 *
40 * function SomeComponent() {
41 * let href = useHref("some/where");
42 * // "/resolved/some/where"
43 * }
44 *
45 * @public
46 * @category Hooks
47 * @param to The path to resolve
48 * @param options Options
49 * @param options.relative Defaults to `"route"` so routing is relative to the
50 * route tree.
51 * Set to `"path"` to make relative routing operate against path segments.
52 * @returns The resolved href string
53 */
54declare function useHref(to: To, { relative }?: {
55 relative?: RelativeRoutingType;
56}): string;
57/**
58 * Returns `true` if this component is a descendant of a {@link Router}, useful
59 * to ensure a component is used within a {@link Router}.
60 *
61 * @public
62 * @category Hooks
63 * @mode framework
64 * @mode data
65 * @returns Whether the component is within a {@link Router} context
66 */
67declare function useInRouterContext(): boolean;
68/**
69 * Returns the current {@link Location}. This can be useful if you'd like to
70 * perform some side effect whenever it changes.
71 *
72 * @example
73 * import * as React from 'react'
74 * import { useLocation } from 'react-router'
75 *
76 * function SomeComponent() {
77 * let location = useLocation()
78 *
79 * React.useEffect(() => {
80 * // Google Analytics
81 * ga('send', 'pageview')
82 * }, [location]);
83 *
84 * return (
85 * // ...
86 * );
87 * }
88 *
89 * @public
90 * @category Hooks
91 * @returns The current {@link Location} object
92 */
93declare function useLocation(): Location;
94/**
95 * Returns the current {@link Navigation} action which describes how the router
96 * came to the current {@link Location}, either by a pop, push, or replace on
97 * the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) stack.
98 *
99 * @public
100 * @category Hooks
101 * @returns The current {@link NavigationType} (`"POP"`, `"PUSH"`, or `"REPLACE"`)
102 */
103declare function useNavigationType(): Action;
104/**
105 * Returns a {@link PathMatch} object if the given pattern matches the current URL.
106 * This is useful for components that need to know "active" state, e.g.
107 * {@link NavLink | `<NavLink>`}.
108 *
109 * @public
110 * @category Hooks
111 * @param pattern The pattern to match against the current {@link Location}
112 * @returns The path match object if the pattern matches, `null` otherwise
113 */
114declare function useMatch<ParamKey extends ParamParseKey<Path>, Path extends string>(pattern: PathPattern<Path> | Path): PathMatch<ParamKey> | null;
115/**
116 * The interface for the `navigate` function returned from {@link useNavigate}.
117 */
118interface NavigateFunction {
119 (to: To, options?: NavigateOptions): void | Promise<void>;
120 (delta: number): void | Promise<void>;
121}
122/**
123 * Returns a function that lets you navigate programmatically in the browser in
124 * response to user interactions or effects.
125 *
126 * It's often better to use {@link redirect} in [`action`](../../start/framework/route-module#action)/[`loader`](../../start/framework/route-module#loader)
127 * functions than this hook.
128 *
129 * The returned function signature is `navigate(to, options?)`/`navigate(delta)` where:
130 *
131 * * `to` can be a string path, a {@link To} object, or a number (delta)
132 * * `options` contains options for modifying the navigation
133 * * These options work in all modes (Framework, Data, and Declarative):
134 * * `relative`: `"route"` or `"path"` to control relative routing logic
135 * * `replace`: Replace the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) stack
136 * * `state`: Optional [`history.state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state) to include with the new {@link Location}
137 * * These options only work in Framework and Data modes:
138 * * `flushSync`: Wrap the DOM updates in [`ReactDom.flushSync`](https://react.dev/reference/react-dom/flushSync)
139 * * `preventScrollReset`: Do not scroll back to the top of the page after navigation
140 * * `viewTransition`: Enable [`document.startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) for this navigation
141 *
142 * @example
143 * import { useNavigate } from "react-router";
144 *
145 * function SomeComponent() {
146 * let navigate = useNavigate();
147 * return (
148 * <button onClick={() => navigate(-1)}>
149 * Go Back
150 * </button>
151 * );
152 * }
153 *
154 * @additionalExamples
155 * ### Navigate to another path
156 *
157 * ```tsx
158 * navigate("/some/route");
159 * navigate("/some/route?search=param");
160 * ```
161 *
162 * ### Navigate with a {@link To} object
163 *
164 * All properties are optional.
165 *
166 * ```tsx
167 * navigate({
168 * pathname: "/some/route",
169 * search: "?search=param",
170 * hash: "#hash",
171 * state: { some: "state" },
172 * });
173 * ```
174 *
175 * If you use `state`, that will be available on the {@link Location} object on
176 * the next page. Access it with `useLocation().state` (see {@link useLocation}).
177 *
178 * ### Navigate back or forward in the history stack
179 *
180 * ```tsx
181 * // back
182 * // often used to close modals
183 * navigate(-1);
184 *
185 * // forward
186 * // often used in a multistep wizard workflows
187 * navigate(1);
188 * ```
189 *
190 * Be cautious with `navigate(number)`. If your application can load up to a
191 * route that has a button that tries to navigate forward/back, there may not be
192 * a `[`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
193 * entry to go back or forward to, or it can go somewhere you don't expect
194 * (like a different domain).
195 *
196 * Only use this if you're sure they will have an entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
197 * stack to navigate to.
198 *
199 * ### Replace the current entry in the history stack
200 *
201 * This will remove the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
202 * stack, replacing it with a new one, similar to a server side redirect.
203 *
204 * ```tsx
205 * navigate("/some/route", { replace: true });
206 * ```
207 *
208 * ### Prevent Scroll Reset
209 *
210 * [MODES: framework, data]
211 *
212 * <br/>
213 * <br/>
214 *
215 * To prevent {@link ScrollRestoration | `<ScrollRestoration>`} from resetting
216 * the scroll position, use the `preventScrollReset` option.
217 *
218 * ```tsx
219 * navigate("?some-tab=1", { preventScrollReset: true });
220 * ```
221 *
222 * For example, if you have a tab interface connected to search params in the
223 * middle of a page, and you don't want it to scroll to the top when a tab is
224 * clicked.
225 *
226 * ### Return Type Augmentation
227 *
228 * Internally, `useNavigate` uses a separate implementation when you are in
229 * Declarative mode versus Data/Framework mode - the primary difference being
230 * that the latter is able to return a stable reference that does not change
231 * identity across navigations. The implementation in Data/Framework mode also
232 * returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
233 * that resolves when the navigation is completed. This means the return type of
234 * `useNavigate` is `void | Promise<void>`. This is accurate, but can lead to
235 * some red squigglies based on the union in the return value:
236 *
237 * - If you're using `typescript-eslint`, you may see errors from
238 * [`@typescript-eslint/no-floating-promises`](https://typescript-eslint.io/rules/no-floating-promises)
239 * - In Framework/Data mode, `React.use(navigate())` will show a false-positive
240 * `Argument of type 'void | Promise<void>' is not assignable to parameter of
241 * type 'Usable<void>'` error
242 *
243 * The easiest way to work around these issues is to augment the type based on the
244 * router you're using:
245 *
246 * ```ts
247 * // If using <BrowserRouter>
248 * declare module "react-router" {
249 * interface NavigateFunction {
250 * (to: To, options?: NavigateOptions): void;
251 * (delta: number): void;
252 * }
253 * }
254 *
255 * // If using <RouterProvider> or Framework mode
256 * declare module "react-router" {
257 * interface NavigateFunction {
258 * (to: To, options?: NavigateOptions): Promise<void>;
259 * (delta: number): Promise<void>;
260 * }
261 * }
262 * ```
263 *
264 * @public
265 * @category Hooks
266 * @returns A navigate function for programmatic navigation
267 */
268declare function useNavigate(): NavigateFunction;
269/**
270 * Returns the parent route {@link Outlet | `<Outlet context>`}.
271 *
272 * Often parent routes manage state or other values you want shared with child
273 * routes. You can create your own [context provider](https://react.dev/learn/passing-data-deeply-with-context)
274 * if you like, but this is such a common situation that it's built-into
275 * {@link Outlet | `<Outlet>`}.
276 *
277 * ```tsx
278 * // Parent route
279 * function Parent() {
280 * const [count, setCount] = React.useState(0);
281 * return <Outlet context={[count, setCount]} />;
282 * }
283 * ```
284 *
285 * ```tsx
286 * // Child route
287 * import { useOutletContext } from "react-router";
288 *
289 * function Child() {
290 * const [count, setCount] = useOutletContext();
291 * const increment = () => setCount((c) => c + 1);
292 * return <button onClick={increment}>{count}</button>;
293 * }
294 * ```
295 *
296 * If you're using TypeScript, we recommend the parent component provide a
297 * custom hook for accessing the context value. This makes it easier for
298 * consumers to get nice typings, control consumers, and know who's consuming
299 * the context value.
300 *
301 * Here's a more realistic example:
302 *
303 * ```tsx filename=src/routes/dashboard.tsx lines=[14,20]
304 * import { useState } from "react";
305 * import { Outlet, useOutletContext } from "react-router";
306 *
307 * import type { User } from "./types";
308 *
309 * type ContextType = { user: User | null };
310 *
311 * export default function Dashboard() {
312 * const [user, setUser] = useState<User | null>(null);
313 *
314 * return (
315 * <div>
316 * <h1>Dashboard</h1>
317 * <Outlet context={{ user } satisfies ContextType} />
318 * </div>
319 * );
320 * }
321 *
322 * export function useUser() {
323 * return useOutletContext<ContextType>();
324 * }
325 * ```
326 *
327 * ```tsx filename=src/routes/dashboard/messages.tsx lines=[1,4]
328 * import { useUser } from "../dashboard";
329 *
330 * export default function DashboardMessages() {
331 * const { user } = useUser();
332 * return (
333 * <div>
334 * <h2>Messages</h2>
335 * <p>Hello, {user.name}!</p>
336 * </div>
337 * );
338 * }
339 * ```
340 *
341 * @public
342 * @category Hooks
343 * @returns The context value passed to the parent {@link Outlet} component
344 */
345declare function useOutletContext<Context = unknown>(): Context;
346/**
347 * Returns the element for the child route at this level of the route
348 * hierarchy. Used internally by {@link Outlet | `<Outlet>`} to render child
349 * routes.
350 *
351 * @public
352 * @category Hooks
353 * @param context The context to pass to the outlet
354 * @returns The child route element or `null` if no child routes match
355 */
356declare function useOutlet(context?: unknown): React.ReactElement | null;
357/**
358 * Returns an object of key/value-pairs of the dynamic params from the current
359 * URL that were matched by the routes. Child routes inherit all params from
360 * their parent routes.
361 *
362 * Assuming a route pattern like `/posts/:postId` is matched by `/posts/123`
363 * then `params.postId` will be `"123"`.
364 *
365 * @example
366 * import { useParams } from "react-router";
367 *
368 * function SomeComponent() {
369 * let params = useParams();
370 * params.postId;
371 * }
372 *
373 * @additionalExamples
374 * ### Basic Usage
375 *
376 * ```tsx
377 * import { useParams } from "react-router";
378 *
379 * // given a route like:
380 * <Route path="/posts/:postId" element={<Post />} />;
381 *
382 * // or a data route like:
383 * createBrowserRouter([
384 * {
385 * path: "/posts/:postId",
386 * component: Post,
387 * },
388 * ]);
389 *
390 * // or in routes.ts
391 * route("/posts/:postId", "routes/post.tsx");
392 * ```
393 *
394 * Access the params in a component:
395 *
396 * ```tsx
397 * import { useParams } from "react-router";
398 *
399 * export default function Post() {
400 * let params = useParams();
401 * return <h1>Post: {params.postId}</h1>;
402 * }
403 * ```
404 *
405 * ### Multiple Params
406 *
407 * Patterns can have multiple params:
408 *
409 * ```tsx
410 * "/posts/:postId/comments/:commentId";
411 * ```
412 *
413 * All will be available in the params object:
414 *
415 * ```tsx
416 * import { useParams } from "react-router";
417 *
418 * export default function Post() {
419 * let params = useParams();
420 * return (
421 * <h1>
422 * Post: {params.postId}, Comment: {params.commentId}
423 * </h1>
424 * );
425 * }
426 * ```
427 *
428 * ### Catchall Params
429 *
430 * Catchall params are defined with `*`:
431 *
432 * ```tsx
433 * "/files/*";
434 * ```
435 *
436 * The matched value will be available in the params object as follows:
437 *
438 * ```tsx
439 * import { useParams } from "react-router";
440 *
441 * export default function File() {
442 * let params = useParams();
443 * let catchall = params["*"];
444 * // ...
445 * }
446 * ```
447 *
448 * You can destructure the catchall param:
449 *
450 * ```tsx
451 * export default function File() {
452 * let { "*": catchall } = useParams();
453 * console.log(catchall);
454 * }
455 * ```
456 *
457 * @public
458 * @category Hooks
459 * @returns An object containing the dynamic route parameters
460 */
461declare function useParams<ParamsOrKey extends string | Record<string, string | undefined> = string>(): Readonly<[
462 ParamsOrKey
463] extends [string] ? Params<ParamsOrKey> : Partial<ParamsOrKey>>;
464/**
465 * Resolves the pathname of the given `to` value against the current
466 * {@link Location}. Similar to {@link useHref}, but returns a
467 * {@link Path} instead of a string.
468 *
469 * @example
470 * import { useResolvedPath } from "react-router";
471 *
472 * function SomeComponent() {
473 * // if the user is at /dashboard/profile
474 * let path = useResolvedPath("../accounts");
475 * path.pathname; // "/dashboard/accounts"
476 * path.search; // ""
477 * path.hash; // ""
478 * }
479 *
480 * @public
481 * @category Hooks
482 * @param to The path to resolve
483 * @param options Options
484 * @param options.relative Defaults to `"route"` so routing is relative to the route tree.
485 * Set to `"path"` to make relative routing operate against path segments.
486 * @returns The resolved {@link Path} object with `pathname`, `search`, and `hash`
487 */
488declare function useResolvedPath(to: To, { relative }?: {
489 relative?: RelativeRoutingType;
490}): Path;
491/**
492 * Hook version of {@link Routes | `<Routes>`} that uses objects instead of
493 * components. These objects have the same properties as the component props.
494 * The return value of `useRoutes` is either a valid React element you can use
495 * to render the route tree, or `null` if nothing matched.
496 *
497 * @example
498 * import { useRoutes } from "react-router";
499 *
500 * function App() {
501 * let element = useRoutes([
502 * {
503 * path: "/",
504 * element: <Dashboard />,
505 * children: [
506 * {
507 * path: "messages",
508 * element: <DashboardMessages />,
509 * },
510 * { path: "tasks", element: <DashboardTasks /> },
511 * ],
512 * },
513 * { path: "team", element: <AboutPage /> },
514 * ]);
515 *
516 * return element;
517 * }
518 *
519 * @public
520 * @category Hooks
521 * @param routes An array of {@link RouteObject}s that define the route hierarchy
522 * @param locationArg An optional {@link Location} object or pathname string to
523 * use instead of the current {@link Location}
524 * @returns A React element to render the matched route, or `null` if no routes matched
525 */
526declare function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;
527/**
528 * Returns the current {@link Navigation}, defaulting to an "idle" navigation
529 * when no navigation is in progress. You can use this to render pending UI
530 * (like a global spinner) or read [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)
531 * from a form navigation.
532 *
533 * @example
534 * import { useNavigation } from "react-router";
535 *
536 * function SomeComponent() {
537 * let navigation = useNavigation();
538 * navigation.state;
539 * navigation.formData;
540 * // etc.
541 * }
542 *
543 * @public
544 * @category Hooks
545 * @mode framework
546 * @mode data
547 * @returns The current {@link Navigation} object
548 */
549declare function useNavigation(): Navigation;
550/**
551 * Revalidate the data on the page for reasons outside of normal data mutations
552 * like [`Window` focus](https://developer.mozilla.org/en-US/docs/Web/API/Window/focus_event)
553 * or polling on an interval.
554 *
555 * Note that page data is already revalidated automatically after actions.
556 * If you find yourself using this for normal CRUD operations on your data in
557 * response to user interactions, you're probably not taking advantage of the
558 * other APIs like {@link useFetcher}, {@link Form}, {@link useSubmit} that do
559 * this automatically.
560 *
561 * @example
562 * import { useRevalidator } from "react-router";
563 *
564 * function WindowFocusRevalidator() {
565 * const revalidator = useRevalidator();
566 *
567 * useFakeWindowFocus(() => {
568 * revalidator.revalidate();
569 * });
570 *
571 * return (
572 * <div hidden={revalidator.state === "idle"}>
573 * Revalidating...
574 * </div>
575 * );
576 * }
577 *
578 * @public
579 * @category Hooks
580 * @mode framework
581 * @mode data
582 * @returns An object with a `revalidate` function and the current revalidation
583 * `state`
584 */
585declare function useRevalidator(): {
586 revalidate: () => Promise<void>;
587 state: Router["state"]["revalidation"];
588};
589/**
590 * Returns the active route matches, useful for accessing `loaderData` for
591 * parent/child routes or the route [`handle`](../../start/framework/route-module#handle)
592 * property
593 *
594 * @public
595 * @category Hooks
596 * @mode framework
597 * @mode data
598 * @returns An array of {@link UIMatch | UI matches} for the current route hierarchy
599 */
600declare function useMatches(): UIMatch[];
601/**
602 * Returns the data from the closest route
603 * [`loader`](../../start/framework/route-module#loader) or
604 * [`clientLoader`](../../start/framework/route-module#clientloader).
605 *
606 * @example
607 * import { useLoaderData } from "react-router";
608 *
609 * export async function loader() {
610 * return await fakeDb.invoices.findAll();
611 * }
612 *
613 * export default function Invoices() {
614 * let invoices = useLoaderData<typeof loader>();
615 * // ...
616 * }
617 *
618 * @public
619 * @category Hooks
620 * @mode framework
621 * @mode data
622 * @returns The data returned from the route's [`loader`](../../start/framework/route-module#loader) or [`clientLoader`](../../start/framework/route-module#clientloader) function
623 */
624declare function useLoaderData<T = any>(): SerializeFrom<T>;
625/**
626 * Returns the [`loader`](../../start/framework/route-module#loader) data for a
627 * given route by route ID.
628 *
629 * Route IDs are created automatically. They are simply the path of the route file
630 * relative to the app folder without the extension.
631 *
632 * | Route Filename | Route ID |
633 * | ---------------------------- | ---------------------- |
634 * | `app/root.tsx` | `"root"` |
635 * | `app/routes/teams.tsx` | `"routes/teams"` |
636 * | `app/whatever/teams.$id.tsx` | `"whatever/teams.$id"` |
637 *
638 * @example
639 * import { useRouteLoaderData } from "react-router";
640 *
641 * function SomeComponent() {
642 * const { user } = useRouteLoaderData("root");
643 * }
644 *
645 * // You can also specify your own route ID's manually in your routes.ts file:
646 * route("/", "containers/app.tsx", { id: "app" })
647 * useRouteLoaderData("app");
648 *
649 * @public
650 * @category Hooks
651 * @mode framework
652 * @mode data
653 * @param routeId The ID of the route to return loader data from
654 * @returns The data returned from the specified route's [`loader`](../../start/framework/route-module#loader)
655 * function, or `undefined` if not found
656 */
657declare function useRouteLoaderData<T = any>(routeId: string): SerializeFrom<T> | undefined;
658/**
659 * Returns the [`action`](../../start/framework/route-module#action) data from
660 * the most recent `POST` navigation form submission or `undefined` if there
661 * hasn't been one.
662 *
663 * @example
664 * import { Form, useActionData } from "react-router";
665 *
666 * export async function action({ request }) {
667 * const body = await request.formData();
668 * const name = body.get("visitorsName");
669 * return { message: `Hello, ${name}` };
670 * }
671 *
672 * export default function Invoices() {
673 * const data = useActionData();
674 * return (
675 * <Form method="post">
676 * <input type="text" name="visitorsName" />
677 * {data ? data.message : "Waiting..."}
678 * </Form>
679 * );
680 * }
681 *
682 * @public
683 * @category Hooks
684 * @mode framework
685 * @mode data
686 * @returns The data returned from the route's [`action`](../../start/framework/route-module#action)
687 * function, or `undefined` if no [`action`](../../start/framework/route-module#action)
688 * has been called
689 */
690declare function useActionData<T = any>(): SerializeFrom<T> | undefined;
691/**
692 * Accesses the error thrown during an
693 * [`action`](../../start/framework/route-module#action),
694 * [`loader`](../../start/framework/route-module#loader),
695 * or component render to be used in a route module
696 * [`ErrorBoundary`](../../start/framework/route-module#errorboundary).
697 *
698 * @example
699 * export function ErrorBoundary() {
700 * const error = useRouteError();
701 * return <div>{error.message}</div>;
702 * }
703 *
704 * @public
705 * @category Hooks
706 * @mode framework
707 * @mode data
708 * @returns The error that was thrown during route [loading](../../start/framework/route-module#loader),
709 * [`action`](../../start/framework/route-module#action) execution, or rendering
710 */
711declare function useRouteError(): unknown;
712/**
713 * Returns the resolved promise value from the closest {@link Await | `<Await>`}.
714 *
715 * @example
716 * function SomeDescendant() {
717 * const value = useAsyncValue();
718 * // ...
719 * }
720 *
721 * // somewhere in your app
722 * <Await resolve={somePromise}>
723 * <SomeDescendant />
724 * </Await>;
725 *
726 * @public
727 * @category Hooks
728 * @mode framework
729 * @mode data
730 * @returns The resolved value from the nearest {@link Await} component
731 */
732declare function useAsyncValue(): unknown;
733/**
734 * Returns the rejection value from the closest {@link Await | `<Await>`}.
735 *
736 * @example
737 * import { Await, useAsyncError } from "react-router";
738 *
739 * function ErrorElement() {
740 * const error = useAsyncError();
741 * return (
742 * <p>Uh Oh, something went wrong! {error.message}</p>
743 * );
744 * }
745 *
746 * // somewhere in your app
747 * <Await
748 * resolve={promiseThatRejects}
749 * errorElement={<ErrorElement />}
750 * />;
751 *
752 * @public
753 * @category Hooks
754 * @mode framework
755 * @mode data
756 * @returns The error that was thrown in the nearest {@link Await} component
757 */
758declare function useAsyncError(): unknown;
759/**
760 * Allow the application to block navigations within the SPA and present the
761 * user a confirmation dialog to confirm the navigation. Mostly used to avoid
762 * using half-filled form data. This does not handle hard-reloads or
763 * cross-origin navigations.
764 *
765 * The {@link Blocker} object returned by the hook has the following properties:
766 *
767 * - **`state`**
768 * - `unblocked` - the blocker is idle and has not prevented any navigation
769 * - `blocked` - the blocker has prevented a navigation
770 * - `proceeding` - the blocker is proceeding through from a blocked navigation
771 * - **`location`**
772 * - When in a `blocked` state, this represents the {@link Location} to which
773 * we blocked a navigation. When in a `proceeding` state, this is the
774 * location being navigated to after a `blocker.proceed()` call.
775 * - **`proceed()`**
776 * - When in a `blocked` state, you may call `blocker.proceed()` to proceed to
777 * the blocked location.
778 * - **`reset()`**
779 * - When in a `blocked` state, you may call `blocker.reset()` to return the
780 * blocker to an `unblocked` state and leave the user at the current
781 * location.
782 *
783 * @example
784 * // Boolean version
785 * let blocker = useBlocker(value !== "");
786 *
787 * // Function version
788 * let blocker = useBlocker(
789 * ({ currentLocation, nextLocation, historyAction }) =>
790 * value !== "" &&
791 * currentLocation.pathname !== nextLocation.pathname
792 * );
793 *
794 * @additionalExamples
795 * ```tsx
796 * import { useCallback, useState } from "react";
797 * import { BlockerFunction, useBlocker } from "react-router";
798 *
799 * export function ImportantForm() {
800 * const [value, setValue] = useState("");
801 *
802 * const shouldBlock = useCallback<BlockerFunction>(
803 * () => value !== "",
804 * [value]
805 * );
806 * const blocker = useBlocker(shouldBlock);
807 *
808 * return (
809 * <form
810 * onSubmit={(e) => {
811 * e.preventDefault();
812 * setValue("");
813 * if (blocker.state === "blocked") {
814 * blocker.proceed();
815 * }
816 * }}
817 * >
818 * <input
819 * name="data"
820 * value={value}
821 * onChange={(e) => setValue(e.target.value)}
822 * />
823 *
824 * <button type="submit">Save</button>
825 *
826 * {blocker.state === "blocked" ? (
827 * <>
828 * <p style={{ color: "red" }}>
829 * Blocked the last navigation to
830 * </p>
831 * <button
832 * type="button"
833 * onClick={() => blocker.proceed()}
834 * >
835 * Let me through
836 * </button>
837 * <button
838 * type="button"
839 * onClick={() => blocker.reset()}
840 * >
841 * Keep me here
842 * </button>
843 * </>
844 * ) : blocker.state === "proceeding" ? (
845 * <p style={{ color: "orange" }}>
846 * Proceeding through blocked navigation
847 * </p>
848 * ) : (
849 * <p style={{ color: "green" }}>
850 * Blocker is currently unblocked
851 * </p>
852 * )}
853 * </form>
854 * );
855 * }
856 * ```
857 *
858 * @public
859 * @category Hooks
860 * @mode framework
861 * @mode data
862 * @param shouldBlock Either a boolean or a function returning a boolean which
863 * indicates whether the navigation should be blocked. The function format
864 * receives a single object parameter containing the `currentLocation`,
865 * `nextLocation`, and `historyAction` of the potential navigation.
866 * @returns A {@link Blocker} object with state and reset functionality
867 */
868declare function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker;
869type UseRouteArgs = [] | [routeId: keyof RouteModules$1];
870type UseRouteResult<Args extends UseRouteArgs> = Args extends [] ? UseRoute<unknown> : Args extends ["root"] ? UseRoute<"root"> : Args extends [infer RouteId extends keyof RouteModules$1] ? UseRoute<RouteId> | undefined : never;
871type UseRoute<RouteId extends keyof RouteModules$1 | unknown> = {
872 handle: RouteId extends keyof RouteModules$1 ? RouteModules$1[RouteId] extends {
873 handle: infer handle;
874 } ? handle : unknown : unknown;
875 loaderData: RouteId extends keyof RouteModules$1 ? GetLoaderData<RouteModules$1[RouteId]> | undefined : unknown;
876 actionData: RouteId extends keyof RouteModules$1 ? GetActionData<RouteModules$1[RouteId]> | undefined : unknown;
877};
878declare function useRoute<Args extends UseRouteArgs>(...args: Args): UseRouteResult<Args>;
879
880/**
881 * @category Types
882 */
883interface ServerRouterProps {
884 /**
885 * The entry context containing the manifest, route modules, and other data
886 * needed for rendering.
887 */
888 context: EntryContext;
889 /**
890 * The URL of the request being handled.
891 */
892 url: string | URL;
893 /**
894 * An optional `nonce` for [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP)
895 * compliance, used to allow inline scripts to run safely.
896 */
897 nonce?: string;
898}
899/**
900 * The server entry point for a React Router app in Framework Mode. This
901 * component is used to generate the HTML in the response from the server. See
902 * [`entry.server.tsx`](../framework-conventions/entry.server.tsx).
903 *
904 * @public
905 * @category Framework Routers
906 * @mode framework
907 * @param props Props
908 * @param {ServerRouterProps.context} props.context n/a
909 * @param {ServerRouterProps.nonce} props.nonce n/a
910 * @param {ServerRouterProps.url} props.url n/a
911 * @returns A React element that represents the server-rendered application.
912 */
913declare function ServerRouter({ context, url, nonce, }: ServerRouterProps): ReactElement;
914
915interface StubRouteExtensions {
916 Component?: RouteComponentType;
917 HydrateFallback?: HydrateFallbackType;
918 ErrorBoundary?: ErrorBoundaryType;
919 loader?: LoaderFunction;
920 action?: ActionFunction;
921 children?: StubRouteObject[];
922 meta?: MetaFunction;
923 links?: LinksFunction;
924}
925interface StubIndexRouteObject extends Omit<IndexRouteObject, "Component" | "HydrateFallback" | "ErrorBoundary" | "loader" | "action" | "element" | "errorElement" | "children">, StubRouteExtensions {
926}
927interface StubNonIndexRouteObject extends Omit<NonIndexRouteObject, "Component" | "HydrateFallback" | "ErrorBoundary" | "loader" | "action" | "element" | "errorElement" | "children">, StubRouteExtensions {
928}
929type StubRouteObject = StubIndexRouteObject | StubNonIndexRouteObject;
930interface RoutesTestStubProps {
931 /**
932 * The initial entries in the history stack. This allows you to start a test with
933 * multiple locations already in the history stack (for testing a back navigation, etc.)
934 * The test will default to the last entry in initialEntries if no initialIndex is provided.
935 * e.g. initialEntries={["/home", "/about", "/contact"]}
936 */
937 initialEntries?: InitialEntry[];
938 /**
939 * The initial index in the history stack to render. This allows you to start a test at a specific entry.
940 * It defaults to the last entry in initialEntries.
941 * e.g.
942 * initialEntries: ["/", "/events/123"]
943 * initialIndex: 1 // start at "/events/123"
944 */
945 initialIndex?: number;
946 /**
947 * Used to set the route's initial loader and action data.
948 * e.g. hydrationData={{
949 * loaderData: { "/contact": { locale: "en-US" } },
950 * actionData: { "/login": { errors: { email: "invalid email" } }}
951 * }}
952 */
953 hydrationData?: HydrationState;
954 /**
955 * Future flags mimicking the settings in react-router.config.ts
956 */
957 future?: Partial<FutureConfig>;
958}
959/**
960 * @category Utils
961 */
962declare function createRoutesStub(routes: StubRouteObject[], _context?: AppLoadContext | RouterContextProvider): ({ initialEntries, initialIndex, hydrationData, future, }: RoutesTestStubProps) => React.JSX.Element;
963
964interface CookieSignatureOptions {
965 /**
966 * An array of secrets that may be used to sign/unsign the value of a cookie.
967 *
968 * The array makes it easy to rotate secrets. New secrets should be added to
969 * the beginning of the array. `cookie.serialize()` will always use the first
970 * value in the array, but `cookie.parse()` may use any of them so that
971 * cookies that were signed with older secrets still work.
972 */
973 secrets?: string[];
974}
975type CookieOptions = ParseOptions & SerializeOptions & CookieSignatureOptions;
976/**
977 * A HTTP cookie.
978 *
979 * A Cookie is a logical container for metadata about a HTTP cookie; its name
980 * and options. But it doesn't contain a value. Instead, it has `parse()` and
981 * `serialize()` methods that allow a single instance to be reused for
982 * parsing/encoding multiple different values.
983 *
984 * @see https://remix.run/utils/cookies#cookie-api
985 */
986interface Cookie {
987 /**
988 * The name of the cookie, used in the `Cookie` and `Set-Cookie` headers.
989 */
990 readonly name: string;
991 /**
992 * True if this cookie uses one or more secrets for verification.
993 */
994 readonly isSigned: boolean;
995 /**
996 * The Date this cookie expires.
997 *
998 * Note: This is calculated at access time using `maxAge` when no `expires`
999 * option is provided to `createCookie()`.
1000 */
1001 readonly expires?: Date;
1002 /**
1003 * Parses a raw `Cookie` header and returns the value of this cookie or
1004 * `null` if it's not present.
1005 */
1006 parse(cookieHeader: string | null, options?: ParseOptions): Promise<any>;
1007 /**
1008 * Serializes the given value to a string and returns the `Set-Cookie`
1009 * header.
1010 */
1011 serialize(value: any, options?: SerializeOptions): Promise<string>;
1012}
1013/**
1014 * Creates a logical container for managing a browser cookie from the server.
1015 */
1016declare const createCookie: (name: string, cookieOptions?: CookieOptions) => Cookie;
1017type IsCookieFunction = (object: any) => object is Cookie;
1018/**
1019 * Returns true if an object is a Remix cookie container.
1020 *
1021 * @see https://remix.run/utils/cookies#iscookie
1022 */
1023declare const isCookie: IsCookieFunction;
1024
1025/**
1026 * An object of name/value pairs to be used in the session.
1027 */
1028interface SessionData {
1029 [name: string]: any;
1030}
1031/**
1032 * Session persists data across HTTP requests.
1033 *
1034 * @see https://reactrouter.com/explanation/sessions-and-cookies#sessions
1035 */
1036interface Session<Data = SessionData, FlashData = Data> {
1037 /**
1038 * A unique identifier for this session.
1039 *
1040 * Note: This will be the empty string for newly created sessions and
1041 * sessions that are not backed by a database (i.e. cookie-based sessions).
1042 */
1043 readonly id: string;
1044 /**
1045 * The raw data contained in this session.
1046 *
1047 * This is useful mostly for SessionStorage internally to access the raw
1048 * session data to persist.
1049 */
1050 readonly data: FlashSessionData<Data, FlashData>;
1051 /**
1052 * Returns `true` if the session has a value for the given `name`, `false`
1053 * otherwise.
1054 */
1055 has(name: (keyof Data | keyof FlashData) & string): boolean;
1056 /**
1057 * Returns the value for the given `name` in this session.
1058 */
1059 get<Key extends (keyof Data | keyof FlashData) & string>(name: Key): (Key extends keyof Data ? Data[Key] : undefined) | (Key extends keyof FlashData ? FlashData[Key] : undefined) | undefined;
1060 /**
1061 * Sets a value in the session for the given `name`.
1062 */
1063 set<Key extends keyof Data & string>(name: Key, value: Data[Key]): void;
1064 /**
1065 * Sets a value in the session that is only valid until the next `get()`.
1066 * This can be useful for temporary values, like error messages.
1067 */
1068 flash<Key extends keyof FlashData & string>(name: Key, value: FlashData[Key]): void;
1069 /**
1070 * Removes a value from the session.
1071 */
1072 unset(name: keyof Data & string): void;
1073}
1074type FlashSessionData<Data, FlashData> = Partial<Data & {
1075 [Key in keyof FlashData as FlashDataKey<Key & string>]: FlashData[Key];
1076}>;
1077type FlashDataKey<Key extends string> = `__flash_${Key}__`;
1078type CreateSessionFunction = <Data = SessionData, FlashData = Data>(initialData?: Data, id?: string) => Session<Data, FlashData>;
1079/**
1080 * Creates a new Session object.
1081 *
1082 * Note: This function is typically not invoked directly by application code.
1083 * Instead, use a `SessionStorage` object's `getSession` method.
1084 */
1085declare const createSession: CreateSessionFunction;
1086type IsSessionFunction = (object: any) => object is Session;
1087/**
1088 * Returns true if an object is a React Router session.
1089 *
1090 * @see https://reactrouter.com/api/utils/isSession
1091 */
1092declare const isSession: IsSessionFunction;
1093/**
1094 * SessionStorage stores session data between HTTP requests and knows how to
1095 * parse and create cookies.
1096 *
1097 * A SessionStorage creates Session objects using a `Cookie` header as input.
1098 * Then, later it generates the `Set-Cookie` header to be used in the response.
1099 */
1100interface SessionStorage<Data = SessionData, FlashData = Data> {
1101 /**
1102 * Parses a Cookie header from a HTTP request and returns the associated
1103 * Session. If there is no session associated with the cookie, this will
1104 * return a new Session with no data.
1105 */
1106 getSession: (cookieHeader?: string | null, options?: ParseOptions) => Promise<Session<Data, FlashData>>;
1107 /**
1108 * Stores all data in the Session and returns the Set-Cookie header to be
1109 * used in the HTTP response.
1110 */
1111 commitSession: (session: Session<Data, FlashData>, options?: SerializeOptions) => Promise<string>;
1112 /**
1113 * Deletes all data associated with the Session and returns the Set-Cookie
1114 * header to be used in the HTTP response.
1115 */
1116 destroySession: (session: Session<Data, FlashData>, options?: SerializeOptions) => Promise<string>;
1117}
1118/**
1119 * SessionIdStorageStrategy is designed to allow anyone to easily build their
1120 * own SessionStorage using `createSessionStorage(strategy)`.
1121 *
1122 * This strategy describes a common scenario where the session id is stored in
1123 * a cookie but the actual session data is stored elsewhere, usually in a
1124 * database or on disk. A set of create, read, update, and delete operations
1125 * are provided for managing the session data.
1126 */
1127interface SessionIdStorageStrategy<Data = SessionData, FlashData = Data> {
1128 /**
1129 * The Cookie used to store the session id, or options used to automatically
1130 * create one.
1131 */
1132 cookie?: Cookie | (CookieOptions & {
1133 name?: string;
1134 });
1135 /**
1136 * Creates a new record with the given data and returns the session id.
1137 */
1138 createData: (data: FlashSessionData<Data, FlashData>, expires?: Date) => Promise<string>;
1139 /**
1140 * Returns data for a given session id, or `null` if there isn't any.
1141 */
1142 readData: (id: string) => Promise<FlashSessionData<Data, FlashData> | null>;
1143 /**
1144 * Updates data for the given session id.
1145 */
1146 updateData: (id: string, data: FlashSessionData<Data, FlashData>, expires?: Date) => Promise<void>;
1147 /**
1148 * Deletes data for a given session id from the data store.
1149 */
1150 deleteData: (id: string) => Promise<void>;
1151}
1152/**
1153 * Creates a SessionStorage object using a SessionIdStorageStrategy.
1154 *
1155 * Note: This is a low-level API that should only be used if none of the
1156 * existing session storage options meet your requirements.
1157 */
1158declare function createSessionStorage<Data = SessionData, FlashData = Data>({ cookie: cookieArg, createData, readData, updateData, deleteData, }: SessionIdStorageStrategy<Data, FlashData>): SessionStorage<Data, FlashData>;
1159
1160interface CookieSessionStorageOptions {
1161 /**
1162 * The Cookie used to store the session data on the client, or options used
1163 * to automatically create one.
1164 */
1165 cookie?: SessionIdStorageStrategy["cookie"];
1166}
1167/**
1168 * Creates and returns a SessionStorage object that stores all session data
1169 * directly in the session cookie itself.
1170 *
1171 * This has the advantage that no database or other backend services are
1172 * needed, and can help to simplify some load-balanced scenarios. However, it
1173 * also has the limitation that serialized session data may not exceed the
1174 * browser's maximum cookie size. Trade-offs!
1175 */
1176declare function createCookieSessionStorage<Data = SessionData, FlashData = Data>({ cookie: cookieArg }?: CookieSessionStorageOptions): SessionStorage<Data, FlashData>;
1177
1178interface MemorySessionStorageOptions {
1179 /**
1180 * The Cookie used to store the session id on the client, or options used
1181 * to automatically create one.
1182 */
1183 cookie?: SessionIdStorageStrategy["cookie"];
1184}
1185/**
1186 * Creates and returns a simple in-memory SessionStorage object, mostly useful
1187 * for testing and as a reference implementation.
1188 *
1189 * Note: This storage does not scale beyond a single process, so it is not
1190 * suitable for most production scenarios.
1191 */
1192declare function createMemorySessionStorage<Data = SessionData, FlashData = Data>({ cookie }?: MemorySessionStorageOptions): SessionStorage<Data, FlashData>;
1193
1194type DevServerHooks = {
1195 getCriticalCss?: (pathname: string) => Promise<string | undefined>;
1196 processRequestError?: (error: unknown) => void;
1197};
1198declare function setDevServerHooks(devServerHooks: DevServerHooks): void;
1199
1200type Args = {
1201 [K in keyof Pages]: ToArgs<Pages[K]["params"]>;
1202};
1203type ToArgs<Params extends Record<string, string | undefined>> = Equal<Params, {}> extends true ? [] : Partial<Params> extends Params ? [Params] | [] : [
1204 Params
1205];
1206/**
1207 Returns a resolved URL path for the specified route.
1208
1209 ```tsx
1210 const h = href("/:lang?/about", { lang: "en" })
1211 // -> `/en/about`
1212
1213 <Link to={href("/products/:id", { id: "abc123" })} />
1214 ```
1215 */
1216declare function href<Path extends keyof Args>(path: Path, ...args: Args[Path]): string;
1217
1218type DecodedPayload = Promise<RSCPayload> & {
1219 _deepestRenderedBoundaryId?: string | null;
1220 formState: Promise<any>;
1221};
1222type SSRCreateFromReadableStreamFunction = (body: ReadableStream<Uint8Array>) => Promise<unknown>;
1223/**
1224 * Routes the incoming [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)
1225 * to the [RSC](https://react.dev/reference/rsc/server-components) server and
1226 * appropriately proxies the server response for data / resource requests, or
1227 * renders to HTML for a document request.
1228 *
1229 * @example
1230 * import { createFromReadableStream } from "@vitejs/plugin-rsc/ssr";
1231 * import * as ReactDomServer from "react-dom/server.edge";
1232 * import {
1233 * unstable_RSCStaticRouter as RSCStaticRouter,
1234 * unstable_routeRSCServerRequest as routeRSCServerRequest,
1235 * } from "react-router";
1236 *
1237 * routeRSCServerRequest({
1238 * request,
1239 * serverResponse,
1240 * createFromReadableStream,
1241 * async renderHTML(getPayload) {
1242 * const payload = getPayload();
1243 *
1244 * return await renderHTMLToReadableStream(
1245 * <RSCStaticRouter getPayload={getPayload} />,
1246 * {
1247 * bootstrapScriptContent,
1248 * formState: await payload.formState,
1249 * }
1250 * );
1251 * },
1252 * });
1253 *
1254 * @name unstable_routeRSCServerRequest
1255 * @public
1256 * @category RSC
1257 * @mode data
1258 * @param opts Options
1259 * @param opts.createFromReadableStream Your `react-server-dom-xyz/client`'s
1260 * `createFromReadableStream` function, used to decode payloads from the server.
1261 * @param opts.serverResponse A Response or partial response generated by the [RSC](https://react.dev/reference/rsc/server-components) handler containing a serialized {@link unstable_RSCPayload}.
1262 * @param opts.hydrate Whether to hydrate the server response with the RSC payload.
1263 * Defaults to `true`.
1264 * @param opts.renderHTML A function that renders the {@link unstable_RSCPayload} to
1265 * HTML, usually using a {@link unstable_RSCStaticRouter | `<RSCStaticRouter>`}.
1266 * @param opts.request The request to route.
1267 * @returns A [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
1268 * that either contains the [RSC](https://react.dev/reference/rsc/server-components)
1269 * payload for data requests, or renders the HTML for document requests.
1270 */
1271declare function routeRSCServerRequest({ request, serverResponse, createFromReadableStream, renderHTML, hydrate, }: {
1272 request: Request;
1273 serverResponse: Response;
1274 createFromReadableStream: SSRCreateFromReadableStreamFunction;
1275 renderHTML: (getPayload: () => DecodedPayload, options: {
1276 onError(error: unknown): string | undefined;
1277 onHeaders(headers: Headers): void;
1278 }) => ReadableStream<Uint8Array> | Promise<ReadableStream<Uint8Array>>;
1279 hydrate?: boolean;
1280}): Promise<Response>;
1281/**
1282 * Props for the {@link unstable_RSCStaticRouter} component.
1283 *
1284 * @name unstable_RSCStaticRouterProps
1285 * @category Types
1286 */
1287interface RSCStaticRouterProps {
1288 /**
1289 * A function that starts decoding of the {@link unstable_RSCPayload}. Usually passed
1290 * through from {@link unstable_routeRSCServerRequest}'s `renderHTML`.
1291 */
1292 getPayload: () => DecodedPayload;
1293}
1294/**
1295 * Pre-renders an {@link unstable_RSCPayload} to HTML. Usually used in
1296 * {@link unstable_routeRSCServerRequest}'s `renderHTML` callback.
1297 *
1298 * @example
1299 * import { createFromReadableStream } from "@vitejs/plugin-rsc/ssr";
1300 * import * as ReactDomServer from "react-dom/server.edge";
1301 * import {
1302 * unstable_RSCStaticRouter as RSCStaticRouter,
1303 * unstable_routeRSCServerRequest as routeRSCServerRequest,
1304 * } from "react-router";
1305 *
1306 * routeRSCServerRequest({
1307 * request,
1308 * serverResponse,
1309 * createFromReadableStream,
1310 * async renderHTML(getPayload) {
1311 * const payload = getPayload();
1312 *
1313 * return await renderHTMLToReadableStream(
1314 * <RSCStaticRouter getPayload={getPayload} />,
1315 * {
1316 * bootstrapScriptContent,
1317 * formState: await payload.formState,
1318 * }
1319 * );
1320 * },
1321 * });
1322 *
1323 * @name unstable_RSCStaticRouter
1324 * @public
1325 * @category RSC
1326 * @mode data
1327 * @param props Props
1328 * @param {unstable_RSCStaticRouterProps.getPayload} props.getPayload n/a
1329 * @returns A React component that renders the {@link unstable_RSCPayload} as HTML.
1330 */
1331declare function RSCStaticRouter({ getPayload }: RSCStaticRouterProps): React.JSX.Element | null;
1332
1333declare function RSCDefaultRootErrorBoundary({ hasRootLayout, }: {
1334 hasRootLayout: boolean;
1335}): React__default.JSX.Element;
1336
1337declare function deserializeErrors(errors: RouterState["errors"]): RouterState["errors"];
1338
1339type RemixErrorBoundaryProps = React.PropsWithChildren<{
1340 location: Location;
1341 isOutsideRemixApp?: boolean;
1342 error?: Error;
1343}>;
1344type RemixErrorBoundaryState = {
1345 error: null | Error;
1346 location: Location;
1347};
1348declare class RemixErrorBoundary extends React.Component<RemixErrorBoundaryProps, RemixErrorBoundaryState> {
1349 constructor(props: RemixErrorBoundaryProps);
1350 static getDerivedStateFromError(error: Error): {
1351 error: Error;
1352 };
1353 static getDerivedStateFromProps(props: RemixErrorBoundaryProps, state: RemixErrorBoundaryState): {
1354 error: Error | null;
1355 location: Location<any>;
1356 };
1357 render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
1358}
1359
1360declare function getPatchRoutesOnNavigationFunction(getRouter: () => Router, manifest: AssetsManifest, routeModules: RouteModules, ssr: boolean, routeDiscovery: ServerBuild["routeDiscovery"], isSpaMode: boolean, basename: string | undefined): PatchRoutesOnNavigationFunction | undefined;
1361declare function useFogOFWarDiscovery(router: Router, manifest: AssetsManifest, routeModules: RouteModules, ssr: boolean, routeDiscovery: ServerBuild["routeDiscovery"], isSpaMode: boolean): void;
1362
1363declare function getHydrationData({ state, routes, getRouteInfo, location, basename, isSpaMode, }: {
1364 state: {
1365 loaderData?: Router["state"]["loaderData"];
1366 actionData?: Router["state"]["actionData"];
1367 errors?: Router["state"]["errors"];
1368 };
1369 routes: DataRouteObject[];
1370 getRouteInfo: (routeId: string) => {
1371 clientLoader: ClientLoaderFunction | undefined;
1372 hasLoader: boolean;
1373 hasHydrateFallback: boolean;
1374 };
1375 location: Path;
1376 basename: string | undefined;
1377 isSpaMode: boolean;
1378}): HydrationState;
1379
1380/**
1381 * @module index
1382 * @mergeModuleWith react-router
1383 */
1384
1385declare const unstable_getRequest: typeof getRequest;
1386declare const unstable_matchRSCServerRequest: typeof matchRSCServerRequest;
1387
1388export { ActionFunction, AppLoadContext, Blocker, BlockerFunction, ClientLoaderFunction, type Cookie, type CookieOptions, type CookieSignatureOptions, type CreateRequestHandlerFunction, DataRouteObject, Router as DataRouter, DataStrategyFunction, EntryContext, type FlashSessionData, HydrationState, IndexRouteObject, InitialEntry, type IsCookieFunction, type IsSessionFunction, LinksFunction, LoaderFunction, Location, MetaFunction, type NavigateFunction, NavigateOptions, Navigation, Action as NavigationType, NonIndexRouteObject, ParamParseKey, Params, PatchRoutesOnNavigationFunction, Path, PathMatch, PathPattern, RelativeRoutingType, type RequestHandler, RouteObject, RouterContextProvider, RouterState, type RoutesTestStubProps, ServerBuild, ServerRouter, type ServerRouterProps, type Session, type SessionData, type SessionIdStorageStrategy, type SessionStorage, To, UIMatch, AssetsManifest as UNSAFE_AssetsManifest, MiddlewareEnabled as UNSAFE_MiddlewareEnabled, RSCDefaultRootErrorBoundary as UNSAFE_RSCDefaultRootErrorBoundary, RemixErrorBoundary as UNSAFE_RemixErrorBoundary, RouteModules as UNSAFE_RouteModules, ServerMode as UNSAFE_ServerMode, SingleFetchRedirectSymbol as UNSAFE_SingleFetchRedirectSymbol, decodeViaTurboStream as UNSAFE_decodeViaTurboStream, deserializeErrors as UNSAFE_deserializeErrors, getHydrationData as UNSAFE_getHydrationData, getPatchRoutesOnNavigationFunction as UNSAFE_getPatchRoutesOnNavigationFunction, getTurboStreamSingleFetchDataStrategy as UNSAFE_getTurboStreamSingleFetchDataStrategy, useFogOFWarDiscovery as UNSAFE_useFogOFWarDiscovery, createCookie, createCookieSessionStorage, createMemorySessionStorage, createRequestHandler, createRoutesStub, createSession, createSessionStorage, href, isCookie, isSession, RSCPayload as unstable_RSCPayload, RSCStaticRouter as unstable_RSCStaticRouter, type RSCStaticRouterProps as unstable_RSCStaticRouterProps, type SSRCreateFromReadableStreamFunction as unstable_SSRCreateFromReadableStreamFunction, unstable_getRequest, unstable_matchRSCServerRequest, routeRSCServerRequest as unstable_routeRSCServerRequest, setDevServerHooks as unstable_setDevServerHooks, useRoute as unstable_useRoute, useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };