react-router 7.6.1 → 7.6.3-pre.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/development/{chunk-DQRVZFIR.mjs → chunk-CCB6XHGW.mjs} +48 -39
  3. package/dist/development/dom-export.d.mts +2 -2
  4. package/dist/development/dom-export.js +1 -1
  5. package/dist/development/dom-export.mjs +2 -2
  6. package/dist/development/index.d.mts +8 -389
  7. package/dist/development/index.d.ts +819 -799
  8. package/dist/development/index.js +51 -39
  9. package/dist/development/index.mjs +9 -3
  10. package/dist/development/lib/types/internal.d.mts +7 -71
  11. package/dist/development/lib/types/internal.d.ts +7 -71
  12. package/dist/development/lib/types/internal.js +1 -1
  13. package/dist/development/lib/types/internal.mjs +1 -1
  14. package/dist/{production/lib-B8x_tOvL.d.mts → development/lib-B33EY9A0.d.mts} +537 -136
  15. package/dist/{production/register-BkDIKxVz.d.ts → development/register-COAKzST_.d.ts} +68 -2
  16. package/dist/{production/route-data-WyrduLgj.d.mts → development/route-data-D7Xbr_Ww.d.mts} +68 -2
  17. package/dist/production/{chunk-UG2XJOVM.mjs → chunk-2T4DELW3.mjs} +48 -39
  18. package/dist/production/dom-export.d.mts +2 -2
  19. package/dist/production/dom-export.js +1 -1
  20. package/dist/production/dom-export.mjs +2 -2
  21. package/dist/production/index.d.mts +8 -389
  22. package/dist/production/index.d.ts +819 -799
  23. package/dist/production/index.js +51 -39
  24. package/dist/production/index.mjs +9 -3
  25. package/dist/production/lib/types/internal.d.mts +7 -71
  26. package/dist/production/lib/types/internal.d.ts +7 -71
  27. package/dist/production/lib/types/internal.js +1 -1
  28. package/dist/production/lib/types/internal.mjs +1 -1
  29. package/dist/{development/lib-B8x_tOvL.d.mts → production/lib-B33EY9A0.d.mts} +537 -136
  30. package/dist/{development/register-BkDIKxVz.d.ts → production/register-COAKzST_.d.ts} +68 -2
  31. package/dist/{development/route-data-WyrduLgj.d.mts → production/route-data-D7Xbr_Ww.d.mts} +68 -2
  32. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # `react-router`
2
2
 
3
+ ## 7.6.3-pre.0
4
+
5
+ ### Patch Changes
6
+
7
+ - Do not serialize types for `useRouteLoaderData<typeof clientLoader>` ([#13752](https://github.com/remix-run/react-router/pull/13752))
8
+
9
+ For types to distinguish a `clientLoader` from a `serverLoader`, you MUST annotate `clientLoader` args:
10
+
11
+ ```ts
12
+ // 👇 annotation required to skip serializing types
13
+ export function clientLoader({}: Route.ClientLoaderArgs) {
14
+ return { fn: () => "earth" };
15
+ }
16
+
17
+ function SomeComponent() {
18
+ const data = useRouteLoaderData<typeof clientLoader>("routes/this-route");
19
+ const planet = data?.fn() ?? "world";
20
+ return <h1>Hello, {planet}!</h1>;
21
+ }
22
+ ```
23
+
24
+ ## 7.6.2
25
+
26
+ ### Patch Changes
27
+
28
+ - Avoid additional `with-props` chunk in Framework Mode by moving route module component prop logic from the Vite plugin to `react-router` ([#13650](https://github.com/remix-run/react-router/pull/13650))
29
+ - \[INTERNAL] Slight refactor of internal `headers()` function processing for use with RSC ([#13639](https://github.com/remix-run/react-router/pull/13639))
30
+
3
31
  ## 7.6.1
4
32
 
5
33
  ### Patch Changes
@@ -1,5 +1,5 @@
1
1
  /**
2
- * react-router v7.6.1
2
+ * react-router v7.6.3-pre.0
3
3
  *
4
4
  * Copyright (c) Remix Software Inc.
5
5
  *
@@ -5920,6 +5920,38 @@ var createRoutesFromElements = createRoutesFromChildren;
5920
5920
  function renderMatches(matches) {
5921
5921
  return _renderMatches(matches);
5922
5922
  }
5923
+ function withComponentProps(Component4) {
5924
+ return function WithComponentProps() {
5925
+ const props = {
5926
+ params: useParams(),
5927
+ loaderData: useLoaderData(),
5928
+ actionData: useActionData(),
5929
+ matches: useMatches()
5930
+ };
5931
+ return React3.createElement(Component4, props);
5932
+ };
5933
+ }
5934
+ function withHydrateFallbackProps(HydrateFallback) {
5935
+ return function WithHydrateFallbackProps() {
5936
+ const props = {
5937
+ params: useParams(),
5938
+ loaderData: useLoaderData(),
5939
+ actionData: useActionData()
5940
+ };
5941
+ return React3.createElement(HydrateFallback, props);
5942
+ };
5943
+ }
5944
+ function withErrorBoundaryProps(ErrorBoundary) {
5945
+ return function WithErrorBoundaryProps() {
5946
+ const props = {
5947
+ params: useParams(),
5948
+ loaderData: useLoaderData(),
5949
+ actionData: useActionData(),
5950
+ error: useRouteError()
5951
+ };
5952
+ return React3.createElement(ErrorBoundary, props);
5953
+ };
5954
+ }
5923
5955
 
5924
5956
  // lib/dom/lib.tsx
5925
5957
  import * as React10 from "react";
@@ -8685,7 +8717,7 @@ function mergeRefs(...refs) {
8685
8717
  var isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
8686
8718
  try {
8687
8719
  if (isBrowser) {
8688
- window.__reactRouterVersion = "7.6.1";
8720
+ window.__reactRouterVersion = "7.6.3-pre.0";
8689
8721
  }
8690
8722
  } catch (e) {
8691
8723
  }
@@ -9879,37 +9911,6 @@ function createRoutesStub(routes, unstable_getContext) {
9879
9911
  return /* @__PURE__ */ React13.createElement(FrameworkContext.Provider, { value: remixContextRef.current }, /* @__PURE__ */ React13.createElement(RouterProvider, { router: routerRef.current }));
9880
9912
  };
9881
9913
  }
9882
- function withComponentProps(Component4) {
9883
- return function Wrapped() {
9884
- return React13.createElement(Component4, {
9885
- params: useParams(),
9886
- loaderData: useLoaderData(),
9887
- actionData: useActionData(),
9888
- matches: useMatches()
9889
- });
9890
- };
9891
- }
9892
- function withHydrateFallbackProps(HydrateFallback) {
9893
- return function Wrapped() {
9894
- const props = {
9895
- params: useParams(),
9896
- loaderData: useLoaderData(),
9897
- actionData: useActionData()
9898
- };
9899
- return React13.createElement(HydrateFallback, props);
9900
- };
9901
- }
9902
- function withErrorBoundaryProps(ErrorBoundary) {
9903
- return function Wrapped() {
9904
- const props = {
9905
- params: useParams(),
9906
- loaderData: useLoaderData(),
9907
- actionData: useActionData(),
9908
- error: useRouteError()
9909
- };
9910
- return React13.createElement(ErrorBoundary, props);
9911
- };
9912
- }
9913
9914
  function processRoutes(routes, manifest, routeModules, parentId) {
9914
9915
  return routes.map((route) => {
9915
9916
  if (!route.id) {
@@ -10428,6 +10429,13 @@ function createServerHandoffString(serverHandoff) {
10428
10429
  // lib/server-runtime/headers.ts
10429
10430
  import { splitCookiesString } from "set-cookie-parser";
10430
10431
  function getDocumentHeaders(build, context) {
10432
+ return getDocumentHeadersImpl(context, (m) => {
10433
+ let route = build.routes[m.route.id];
10434
+ invariant3(route, `Route with id "${m.route.id}" not found in build`);
10435
+ return route.module.headers;
10436
+ });
10437
+ }
10438
+ function getDocumentHeadersImpl(context, getRouteHeadersFn) {
10431
10439
  let boundaryIdx = context.errors ? context.matches.findIndex((m) => context.errors[m.route.id]) : -1;
10432
10440
  let matches = boundaryIdx >= 0 ? context.matches.slice(0, boundaryIdx + 1) : context.matches;
10433
10441
  let errorHeaders;
@@ -10445,14 +10453,12 @@ function getDocumentHeaders(build, context) {
10445
10453
  }
10446
10454
  return matches.reduce((parentHeaders, match, idx) => {
10447
10455
  let { id } = match.route;
10448
- let route = build.routes[id];
10449
- invariant3(route, `Route with id "${id}" not found in build`);
10450
- let routeModule = route.module;
10451
10456
  let loaderHeaders = context.loaderHeaders[id] || new Headers();
10452
10457
  let actionHeaders = context.actionHeaders[id] || new Headers();
10453
10458
  let includeErrorHeaders = errorHeaders != null && idx === matches.length - 1;
10454
10459
  let includeErrorCookies = includeErrorHeaders && errorHeaders !== loaderHeaders && errorHeaders !== actionHeaders;
10455
- if (routeModule.headers == null) {
10460
+ let headersFn = getRouteHeadersFn(match);
10461
+ if (headersFn == null) {
10456
10462
  let headers2 = new Headers(parentHeaders);
10457
10463
  if (includeErrorCookies) {
10458
10464
  prependCookies(errorHeaders, headers2);
@@ -10462,12 +10468,12 @@ function getDocumentHeaders(build, context) {
10462
10468
  return headers2;
10463
10469
  }
10464
10470
  let headers = new Headers(
10465
- routeModule.headers ? typeof routeModule.headers === "function" ? routeModule.headers({
10471
+ typeof headersFn === "function" ? headersFn({
10466
10472
  loaderHeaders,
10467
10473
  parentHeaders,
10468
10474
  actionHeaders,
10469
10475
  errorHeaders: includeErrorHeaders ? errorHeaders : void 0
10470
- }) : routeModule.headers : void 0
10476
+ }) : headersFn
10471
10477
  );
10472
10478
  if (includeErrorCookies) {
10473
10479
  prependCookies(errorHeaders, headers);
@@ -11509,6 +11515,9 @@ export {
11509
11515
  createRoutesFromChildren,
11510
11516
  createRoutesFromElements,
11511
11517
  renderMatches,
11518
+ withComponentProps,
11519
+ withHydrateFallbackProps,
11520
+ withErrorBoundaryProps,
11512
11521
  createSearchParams,
11513
11522
  SingleFetchRedirectSymbol,
11514
11523
  getTurboStreamSingleFetchDataStrategy,
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
- import { R as RouterProviderProps$1 } from './lib-B8x_tOvL.mjs';
3
- import { R as RouterInit } from './route-data-WyrduLgj.mjs';
2
+ import { R as RouterProviderProps$1 } from './lib-B33EY9A0.mjs';
3
+ import { R as RouterInit } from './route-data-D7Xbr_Ww.mjs';
4
4
 
5
5
  type RouterProviderProps = Omit<RouterProviderProps$1, "flushSync">;
6
6
  declare function RouterProvider(props: Omit<RouterProviderProps, "flushSync">): React.JSX.Element;
@@ -1,5 +1,5 @@
1
1
  /**
2
- * react-router v7.6.1
2
+ * react-router v7.6.3-pre.0
3
3
  *
4
4
  * Copyright (c) Remix Software Inc.
5
5
  *
@@ -1,5 +1,5 @@
1
1
  /**
2
- * react-router v7.6.1
2
+ * react-router v7.6.3-pre.0
3
3
  *
4
4
  * Copyright (c) Remix Software Inc.
5
5
  *
@@ -25,7 +25,7 @@ import {
25
25
  invariant,
26
26
  mapRouteProperties,
27
27
  useFogOFWarDiscovery
28
- } from "./chunk-DQRVZFIR.mjs";
28
+ } from "./chunk-CCB6XHGW.mjs";
29
29
 
30
30
  // lib/dom-export/dom-router-provider.tsx
31
31
  import * as React from "react";
@@ -1,7 +1,7 @@
1
- import { a as Router, b as RouteModules, D as DataStrategyFunction, T as To, c as RelativeRoutingType, L as Location, A as Action, P as ParamParseKey, d as Path, e as PathPattern, f as PathMatch, N as NavigateOptions, g as Params, h as RouteObject, i as Navigation, U as UIMatch, S as SerializeFrom, B as BlockerFunction, j as Blocker, k as StaticHandlerContext, l as StaticHandler, F as FutureConfig, C as CreateStaticHandlerOptions$1, I as InitialEntry, H as HydrationState, u as unstable_InitialContext, m as IndexRouteObject, n as NonIndexRouteObject, o as LoaderFunction, p as ActionFunction, M as MetaFunction, q as LinksFunction, r as MiddlewareEnabled, s as AppLoadContext, E as Equal, t as RouterState, v as PatchRoutesOnNavigationFunction, w as DataRouteObject, x as ClientLoaderFunction } from './route-data-WyrduLgj.mjs';
2
- export { W as ActionFunctionArgs, av as ClientActionFunction, aw as ClientActionFunctionArgs, ax as ClientLoaderFunctionArgs, ar as DataRouteMatch, X as DataStrategyFunctionArgs, Y as DataStrategyMatch, Z as DataStrategyResult, $ as ErrorResponse, z as Fetcher, a0 as FormEncType, a1 as FormMethod, aF as Future, G as GetScrollPositionFunction, y as GetScrollRestorationKeyFunction, a2 as HTMLFormMethod, ay as HeadersArgs, az as HeadersFunction, aD as HtmlLinkDescriptor, ah as IDLE_BLOCKER, ag as IDLE_FETCHER, af as IDLE_NAVIGATION, a3 as LazyRouteFunction, aE as LinkDescriptor, a4 as LoaderFunctionArgs, aA as MetaArgs, aB as MetaDescriptor, J as NavigationStates, as as Navigator, aC as PageLinkDescriptor, at as PatchRoutesOnNavigationFunctionArgs, a6 as PathParam, a7 as RedirectFunction, V as RevalidationState, au as RouteMatch, Q as RouterFetchOptions, R as RouterInit, O as RouterNavigateOptions, K as RouterSubscriber, a9 as ShouldRevalidateFunction, aa as ShouldRevalidateFunctionArgs, aL as UNSAFE_DataRouterContext, aM as UNSAFE_DataRouterStateContext, _ as UNSAFE_DataWithResponseInit, aK as UNSAFE_ErrorResponseImpl, aN as UNSAFE_FetchersContext, aO as UNSAFE_LocationContext, aP as UNSAFE_NavigationContext, aQ as UNSAFE_RouteContext, aR as UNSAFE_ViewTransitionContext, aH as UNSAFE_createBrowserHistory, aJ as UNSAFE_createRouter, aI as UNSAFE_invariant, ad as createPath, ai as data, aj as generatePath, ak as isRouteErrorResponse, al as matchPath, am as matchRoutes, ae as parsePath, an as redirect, ao as redirectDocument, ap as replace, aq as resolvePath, a5 as unstable_MiddlewareFunction, a8 as unstable_RouterContext, ac as unstable_RouterContextProvider, aG as unstable_SerializesTo, ab as unstable_createContext } from './route-data-WyrduLgj.mjs';
3
- import { A as AssetsManifest, E as EntryContext, F as FutureConfig$1, S as ServerBuild } from './lib-B8x_tOvL.mjs';
4
- export { f as Await, a as AwaitProps, Q as BrowserRouter, B as BrowserRouterProps, D as DOMRouterOpts, v as FetcherFormProps, C as FetcherSubmitFunction, a6 as FetcherSubmitOptions, G as FetcherWithComponents, X as Form, w as FormProps, ah as HandleDataRequestFunction, ai as HandleDocumentRequestFunction, aj as HandleErrorFunction, T as HashRouter, H as HashRouterProps, q as HistoryRouterProps, I as IndexRouteProps, L as LayoutRouteProps, U as Link, s as LinkProps, ad as Links, g as MemoryRouter, M as MemoryRouterOpts, b as MemoryRouterProps, ac as Meta, W as NavLink, t as NavLinkProps, u as NavLinkRenderProps, h as Navigate, N as NavigateProps, i as Outlet, O as OutletProps, a7 as ParamKeyValuePair, P as PathRouteProps, af as PrefetchPageLinks, j as Route, c as RouteProps, k as Router, d as RouterProps, l as RouterProvider, R as RouterProviderProps, m as Routes, e as RoutesProps, ae as Scripts, ag as ScriptsProps, Y as ScrollRestoration, x as ScrollRestorationProps, ak as ServerEntryModule, y as SetURLSearchParams, z as SubmitFunction, a8 as SubmitOptions, aa as SubmitTarget, an as UNSAFE_FrameworkContext, ao as UNSAFE_createClientRoutes, ap as UNSAFE_createClientRoutesWithHMRRevalidationOptOut, al as UNSAFE_hydrationRouteProperties, am as UNSAFE_mapRouteProperties, aq as UNSAFE_shouldHydrateRouteLoader, ar as UNSAFE_useScrollRestoration, a9 as URLSearchParamsInit, J as createBrowserRouter, K as createHashRouter, n as createMemoryRouter, o as createRoutesFromChildren, p as createRoutesFromElements, ab as createSearchParams, r as renderMatches, V as unstable_HistoryRouter, a4 as unstable_usePrompt, a3 as useBeforeUnload, a1 as useFetcher, a2 as useFetchers, a0 as useFormAction, Z as useLinkClickHandler, _ as useSearchParams, $ as useSubmit, a5 as useViewTransitionState } from './lib-B8x_tOvL.mjs';
1
+ import { a as Router, b as RouteModules, D as DataStrategyFunction, L as Location, S as StaticHandlerContext, c as RouteObject, C as CreateStaticHandlerOptions$1, d as StaticHandler, F as FutureConfig, I as InitialEntry, H as HydrationState, e as IndexRouteObject, f as LoaderFunction, A as ActionFunction, M as MetaFunction, g as LinksFunction, N as NonIndexRouteObject, u as unstable_InitialContext, h as MiddlewareEnabled, i as AppLoadContext, E as Equal, j as RouterState, P as PatchRoutesOnNavigationFunction, k as DataRouteObject, l as ClientLoaderFunction, m as Path } from './route-data-D7Xbr_Ww.mjs';
2
+ export { y as ActionFunctionArgs, B as Blocker, s as BlockerFunction, au as ClientActionFunction, av as ClientActionFunctionArgs, aw as ClientLoaderFunctionArgs, ap as DataRouteMatch, z as DataStrategyFunctionArgs, J as DataStrategyMatch, K as DataStrategyResult, Q as ErrorResponse, o as Fetcher, U as FormEncType, V as FormMethod, aE as Future, G as GetScrollPositionFunction, n as GetScrollRestorationKeyFunction, W as HTMLFormMethod, ax as HeadersArgs, ay as HeadersFunction, aC as HtmlLinkDescriptor, af as IDLE_BLOCKER, ae as IDLE_FETCHER, ad as IDLE_NAVIGATION, X as LazyRouteFunction, aD as LinkDescriptor, Y as LoaderFunctionArgs, az as MetaArgs, aA as MetaDescriptor, aq as NavigateOptions, p as Navigation, q as NavigationStates, aa as NavigationType, ar as Navigator, aB as PageLinkDescriptor, _ as ParamParseKey, $ as Params, as as PatchRoutesOnNavigationFunctionArgs, a0 as PathMatch, a1 as PathParam, a2 as PathPattern, a3 as RedirectFunction, r as RelativeRoutingType, x as RevalidationState, at as RouteMatch, w as RouterFetchOptions, R as RouterInit, v as RouterNavigateOptions, t as RouterSubscriber, a5 as ShouldRevalidateFunction, a6 as ShouldRevalidateFunctionArgs, T as To, a7 as UIMatch, aK as UNSAFE_DataRouterContext, aL as UNSAFE_DataRouterStateContext, O as UNSAFE_DataWithResponseInit, aJ as UNSAFE_ErrorResponseImpl, aM as UNSAFE_FetchersContext, aN as UNSAFE_LocationContext, aO as UNSAFE_NavigationContext, aP as UNSAFE_RouteContext, aQ as UNSAFE_ViewTransitionContext, aG as UNSAFE_createBrowserHistory, aI as UNSAFE_createRouter, aH as UNSAFE_invariant, ab as createPath, ag as data, ah as generatePath, ai as isRouteErrorResponse, aj as matchPath, ak as matchRoutes, ac as parsePath, al as redirect, am as redirectDocument, an as replace, ao as resolvePath, Z as unstable_MiddlewareFunction, a4 as unstable_RouterContext, a9 as unstable_RouterContextProvider, aF as unstable_SerializesTo, a8 as unstable_createContext } from './route-data-D7Xbr_Ww.mjs';
3
+ import { A as AssetsManifest, E as EntryContext, F as FutureConfig$1, a as RouteComponentType, H as HydrateFallbackType, b as ErrorBoundaryType, S as ServerBuild } from './lib-B33EY9A0.mjs';
4
+ export { h as Await, c as AwaitProps, af as BrowserRouter, $ as BrowserRouterProps, a0 as DOMRouterOpts, a6 as FetcherFormProps, ab as FetcherSubmitFunction, av as FetcherSubmitOptions, ac as FetcherWithComponents, ak as Form, a7 as FormProps, aG as HandleDataRequestFunction, aH as HandleDocumentRequestFunction, aI as HandleErrorFunction, ag as HashRouter, a1 as HashRouterProps, a2 as HistoryRouterProps, I as IndexRouteProps, L as LayoutRouteProps, ah as Link, a3 as LinkProps, aC as Links, i as MemoryRouter, M as MemoryRouterOpts, d as MemoryRouterProps, aB as Meta, aj as NavLink, a4 as NavLinkProps, a5 as NavLinkRenderProps, j as Navigate, t as NavigateFunction, N as NavigateProps, k as Outlet, O as OutletProps, aw as ParamKeyValuePair, P as PathRouteProps, aE as PrefetchPageLinks, l as Route, e as RouteProps, m as Router, f as RouterProps, n as RouterProvider, R as RouterProviderProps, o as Routes, g as RoutesProps, aD as Scripts, aF as ScriptsProps, al as ScrollRestoration, a8 as ScrollRestorationProps, aJ as ServerEntryModule, a9 as SetURLSearchParams, aa as SubmitFunction, ax as SubmitOptions, az as SubmitTarget, aP as UNSAFE_FrameworkContext, aQ as UNSAFE_createClientRoutes, aR as UNSAFE_createClientRoutesWithHMRRevalidationOptOut, aK as UNSAFE_hydrationRouteProperties, aL as UNSAFE_mapRouteProperties, aS as UNSAFE_shouldHydrateRouteLoader, aT as UNSAFE_useScrollRestoration, aM as UNSAFE_withComponentProps, aO as UNSAFE_withErrorBoundaryProps, aN as UNSAFE_withHydrateFallbackProps, ay as URLSearchParamsInit, ad as createBrowserRouter, ae as createHashRouter, p as createMemoryRouter, q as createRoutesFromChildren, r as createRoutesFromElements, aA as createSearchParams, s as renderMatches, ai as unstable_HistoryRouter, at as unstable_usePrompt, v as useActionData, w as useAsyncError, x as useAsyncValue, as as useBeforeUnload, u as useBlocker, aq as useFetcher, ar as useFetchers, ap as useFormAction, y as useHref, z as useInRouterContext, am as useLinkClickHandler, B as useLoaderData, C as useLocation, D as useMatch, G as useMatches, J as useNavigate, K as useNavigation, Q as useNavigationType, T as useOutlet, U as useOutletContext, V as useParams, W as useResolvedPath, X as useRevalidator, Y as useRouteError, Z as useRouteLoaderData, _ as useRoutes, an as useSearchParams, ao as useSubmit, au as useViewTransitionState } from './lib-B33EY9A0.mjs';
5
5
  import * as React from 'react';
6
6
  import { ReactElement } from 'react';
7
7
  import { ParseOptions, SerializeOptions } from 'cookie';
@@ -25,373 +25,6 @@ declare enum ServerMode {
25
25
  Test = "test"
26
26
  }
27
27
 
28
- /**
29
- Resolves a URL against the current location.
30
-
31
- ```tsx
32
- import { useHref } from "react-router"
33
-
34
- function SomeComponent() {
35
- let href = useHref("some/where");
36
- // "/resolved/some/where"
37
- }
38
- ```
39
-
40
- @category Hooks
41
- */
42
- declare function useHref(to: To, { relative }?: {
43
- relative?: RelativeRoutingType;
44
- }): string;
45
- /**
46
- * Returns true if this component is a descendant of a Router, useful to ensure
47
- * a component is used within a Router.
48
- *
49
- * @category Hooks
50
- */
51
- declare function useInRouterContext(): boolean;
52
- /**
53
- Returns the current {@link Location}. This can be useful if you'd like to perform some side effect whenever it changes.
54
-
55
- ```tsx
56
- import * as React from 'react'
57
- import { useLocation } from 'react-router'
58
-
59
- function SomeComponent() {
60
- let location = useLocation()
61
-
62
- React.useEffect(() => {
63
- // Google Analytics
64
- ga('send', 'pageview')
65
- }, [location]);
66
-
67
- return (
68
- // ...
69
- );
70
- }
71
- ```
72
-
73
- @category Hooks
74
- */
75
- declare function useLocation(): Location;
76
- /**
77
- * Returns the current navigation action which describes how the router came to
78
- * the current location, either by a pop, push, or replace on the history stack.
79
- *
80
- * @category Hooks
81
- */
82
- declare function useNavigationType(): Action;
83
- /**
84
- * Returns a PathMatch object if the given pattern matches the current URL.
85
- * This is useful for components that need to know "active" state, e.g.
86
- * `<NavLink>`.
87
- *
88
- * @category Hooks
89
- */
90
- declare function useMatch<ParamKey extends ParamParseKey<Path>, Path extends string>(pattern: PathPattern<Path> | Path): PathMatch<ParamKey> | null;
91
- /**
92
- * The interface for the navigate() function returned from useNavigate().
93
- */
94
- interface NavigateFunction {
95
- (to: To, options?: NavigateOptions): void | Promise<void>;
96
- (delta: number): void | Promise<void>;
97
- }
98
- /**
99
- Returns a function that lets you navigate programmatically in the browser in response to user interactions or effects.
100
-
101
- ```tsx
102
- import { useNavigate } from "react-router";
103
-
104
- function SomeComponent() {
105
- let navigate = useNavigate();
106
- return (
107
- <button
108
- onClick={() => {
109
- navigate(-1);
110
- }}
111
- />
112
- );
113
- }
114
- ```
115
-
116
- It's often better to use {@link redirect} in {@link ActionFunction | actions} and {@link LoaderFunction | loaders} than this hook.
117
-
118
- @category Hooks
119
- */
120
- declare function useNavigate(): NavigateFunction;
121
- /**
122
- * Returns the parent route {@link OutletProps.context | `<Outlet context>`}.
123
- *
124
- * @category Hooks
125
- */
126
- declare function useOutletContext<Context = unknown>(): Context;
127
- /**
128
- * Returns the element for the child route at this level of the route
129
- * hierarchy. Used internally by `<Outlet>` to render child routes.
130
- *
131
- * @category Hooks
132
- */
133
- declare function useOutlet(context?: unknown): React.ReactElement | null;
134
- /**
135
- Returns an object of key/value pairs of the dynamic params from the current URL that were matched by the routes. Child routes inherit all params from their parent routes.
136
-
137
- ```tsx
138
- import { useParams } from "react-router"
139
-
140
- function SomeComponent() {
141
- let params = useParams()
142
- params.postId
143
- }
144
- ```
145
-
146
- Assuming a route pattern like `/posts/:postId` is matched by `/posts/123` then `params.postId` will be `"123"`.
147
-
148
- @category Hooks
149
- */
150
- declare function useParams<ParamsOrKey extends string | Record<string, string | undefined> = string>(): Readonly<[
151
- ParamsOrKey
152
- ] extends [string] ? Params<ParamsOrKey> : Partial<ParamsOrKey>>;
153
- /**
154
- Resolves the pathname of the given `to` value against the current location. Similar to {@link useHref}, but returns a {@link Path} instead of a string.
155
-
156
- ```tsx
157
- import { useResolvedPath } from "react-router"
158
-
159
- function SomeComponent() {
160
- // if the user is at /dashboard/profile
161
- let path = useResolvedPath("../accounts")
162
- path.pathname // "/dashboard/accounts"
163
- path.search // ""
164
- path.hash // ""
165
- }
166
- ```
167
-
168
- @category Hooks
169
- */
170
- declare function useResolvedPath(to: To, { relative }?: {
171
- relative?: RelativeRoutingType;
172
- }): Path;
173
- /**
174
- Hook version of {@link Routes | `<Routes>`} that uses objects instead of components. These objects have the same properties as the component props.
175
-
176
- The return value of `useRoutes` is either a valid React element you can use to render the route tree, or `null` if nothing matched.
177
-
178
- ```tsx
179
- import * as React from "react";
180
- import { useRoutes } from "react-router";
181
-
182
- function App() {
183
- let element = useRoutes([
184
- {
185
- path: "/",
186
- element: <Dashboard />,
187
- children: [
188
- {
189
- path: "messages",
190
- element: <DashboardMessages />,
191
- },
192
- { path: "tasks", element: <DashboardTasks /> },
193
- ],
194
- },
195
- { path: "team", element: <AboutPage /> },
196
- ]);
197
-
198
- return element;
199
- }
200
- ```
201
-
202
- @category Hooks
203
- */
204
- declare function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;
205
- /**
206
- Returns the current navigation, defaulting to an "idle" navigation when no navigation is in progress. You can use this to render pending UI (like a global spinner) or read FormData from a form navigation.
207
-
208
- ```tsx
209
- import { useNavigation } from "react-router"
210
-
211
- function SomeComponent() {
212
- let navigation = useNavigation();
213
- navigation.state
214
- navigation.formData
215
- // etc.
216
- }
217
- ```
218
-
219
- @category Hooks
220
- */
221
- declare function useNavigation(): Navigation;
222
- /**
223
- Revalidate the data on the page for reasons outside of normal data mutations like window focus or polling on an interval.
224
-
225
- ```tsx
226
- import { useRevalidator } from "react-router";
227
-
228
- function WindowFocusRevalidator() {
229
- const revalidator = useRevalidator();
230
-
231
- useFakeWindowFocus(() => {
232
- revalidator.revalidate();
233
- });
234
-
235
- return (
236
- <div hidden={revalidator.state === "idle"}>
237
- Revalidating...
238
- </div>
239
- );
240
- }
241
- ```
242
-
243
- Note that page data is already revalidated automatically after actions. If you find yourself using this for normal CRUD operations on your data in response to user interactions, you're probably not taking advantage of the other APIs like {@link useFetcher}, {@link Form}, {@link useSubmit} that do this automatically.
244
-
245
- @category Hooks
246
- */
247
- declare function useRevalidator(): {
248
- revalidate: () => Promise<void>;
249
- state: Router["state"]["revalidation"];
250
- };
251
- /**
252
- * Returns the active route matches, useful for accessing loaderData for
253
- * parent/child routes or the route "handle" property
254
- *
255
- * @category Hooks
256
- */
257
- declare function useMatches(): UIMatch[];
258
- /**
259
- Returns the data from the closest route {@link LoaderFunction | loader} or {@link ClientLoaderFunction | client loader}.
260
-
261
- ```tsx
262
- import { useLoaderData } from "react-router"
263
-
264
- export async function loader() {
265
- return await fakeDb.invoices.findAll();
266
- }
267
-
268
- export default function Invoices() {
269
- let invoices = useLoaderData<typeof loader>();
270
- // ...
271
- }
272
- ```
273
-
274
- @category Hooks
275
- */
276
- declare function useLoaderData<T = any>(): SerializeFrom<T>;
277
- /**
278
- Returns the loader data for a given route by route ID.
279
-
280
- ```tsx
281
- import { useRouteLoaderData } from "react-router";
282
-
283
- function SomeComponent() {
284
- const { user } = useRouteLoaderData("root");
285
- }
286
- ```
287
-
288
- Route IDs are created automatically. They are simply the path of the route file relative to the app folder without the extension.
289
-
290
- | Route Filename | Route ID |
291
- | -------------------------- | -------------------- |
292
- | `app/root.tsx` | `"root"` |
293
- | `app/routes/teams.tsx` | `"routes/teams"` |
294
- | `app/whatever/teams.$id.tsx` | `"whatever/teams.$id"` |
295
-
296
- If you created an ID manually, you can use that instead:
297
-
298
- ```tsx
299
- route("/", "containers/app.tsx", { id: "app" }})
300
- ```
301
-
302
- @category Hooks
303
- */
304
- declare function useRouteLoaderData<T = any>(routeId: string): SerializeFrom<T> | undefined;
305
- /**
306
- Returns the action data from the most recent POST navigation form submission or `undefined` if there hasn't been one.
307
-
308
- ```tsx
309
- import { Form, useActionData } from "react-router"
310
-
311
- export async function action({ request }) {
312
- const body = await request.formData()
313
- const name = body.get("visitorsName")
314
- return { message: `Hello, ${name}` }
315
- }
316
-
317
- export default function Invoices() {
318
- const data = useActionData()
319
- return (
320
- <Form method="post">
321
- <input type="text" name="visitorsName" />
322
- {data ? data.message : "Waiting..."}
323
- </Form>
324
- )
325
- }
326
- ```
327
-
328
- @category Hooks
329
- */
330
- declare function useActionData<T = any>(): SerializeFrom<T> | undefined;
331
- /**
332
- Accesses the error thrown during an {@link ActionFunction | action}, {@link LoaderFunction | loader}, or component render to be used in a route module Error Boundary.
333
-
334
- ```tsx
335
- export function ErrorBoundary() {
336
- const error = useRouteError();
337
- return <div>{error.message}</div>;
338
- }
339
- ```
340
-
341
- @category Hooks
342
- */
343
- declare function useRouteError(): unknown;
344
- /**
345
- Returns the resolved promise value from the closest {@link Await | `<Await>`}.
346
-
347
- ```tsx
348
- function SomeDescendant() {
349
- const value = useAsyncValue();
350
- // ...
351
- }
352
-
353
- // somewhere in your app
354
- <Await resolve={somePromise}>
355
- <SomeDescendant />
356
- </Await>
357
- ```
358
-
359
- @category Hooks
360
- */
361
- declare function useAsyncValue(): unknown;
362
- /**
363
- Returns the rejection value from the closest {@link Await | `<Await>`}.
364
-
365
- ```tsx
366
- import { Await, useAsyncError } from "react-router"
367
-
368
- function ErrorElement() {
369
- const error = useAsyncError();
370
- return (
371
- <p>Uh Oh, something went wrong! {error.message}</p>
372
- );
373
- }
374
-
375
- // somewhere in your app
376
- <Await
377
- resolve={promiseThatRejects}
378
- errorElement={<ErrorElement />}
379
- />
380
- ```
381
-
382
- @category Hooks
383
- */
384
- declare function useAsyncError(): unknown;
385
- /**
386
- * Allow the application to block navigations within the SPA and present the
387
- * user a confirmation dialog to confirm the navigation. Mostly used to avoid
388
- * using half-filled form data. This does not handle hard-reloads or
389
- * cross-origin navigations.
390
- *
391
- * @category Hooks
392
- */
393
- declare function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker;
394
-
395
28
  interface StaticRouterProps {
396
29
  basename?: string;
397
30
  children?: React.ReactNode;
@@ -444,23 +77,9 @@ interface ServerRouterProps {
444
77
  declare function ServerRouter({ context, url, nonce, }: ServerRouterProps): ReactElement;
445
78
 
446
79
  interface StubRouteExtensions {
447
- Component?: React.ComponentType<{
448
- params: ReturnType<typeof useParams>;
449
- loaderData: ReturnType<typeof useLoaderData>;
450
- actionData: ReturnType<typeof useActionData>;
451
- matches: ReturnType<typeof useMatches>;
452
- }>;
453
- HydrateFallback?: React.ComponentType<{
454
- params: ReturnType<typeof useParams>;
455
- loaderData: ReturnType<typeof useLoaderData>;
456
- actionData: ReturnType<typeof useActionData>;
457
- }>;
458
- ErrorBoundary?: React.ComponentType<{
459
- params: ReturnType<typeof useParams>;
460
- loaderData: ReturnType<typeof useLoaderData>;
461
- actionData: ReturnType<typeof useActionData>;
462
- error: ReturnType<typeof useRouteError>;
463
- }>;
80
+ Component?: RouteComponentType;
81
+ HydrateFallback?: HydrateFallbackType;
82
+ ErrorBoundary?: ErrorBoundaryType;
464
83
  loader?: LoaderFunction;
465
84
  action?: ActionFunction;
466
85
  children?: StubRouteObject[];
@@ -800,4 +419,4 @@ declare function getHydrationData(state: {
800
419
  hasHydrateFallback: boolean;
801
420
  }, location: Path, basename: string | undefined, isSpaMode: boolean): HydrationState;
802
421
 
803
- export { 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, RouterState, type RoutesTestStubProps, ServerBuild, ServerRouter, type ServerRouterProps, type Session, type SessionData, type SessionIdStorageStrategy, type SessionStorage, StaticHandler, StaticHandlerContext, StaticRouter, type StaticRouterProps, StaticRouterProvider, type StaticRouterProviderProps, To, UIMatch, AssetsManifest as UNSAFE_AssetsManifest, MiddlewareEnabled as UNSAFE_MiddlewareEnabled, 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, createStaticHandler, createStaticRouter, href, isCookie, isSession, unstable_InitialContext, setDevServerHooks as unstable_setDevServerHooks, useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
422
+ export { ActionFunction, AppLoadContext, 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, NonIndexRouteObject, PatchRoutesOnNavigationFunction, Path, type RequestHandler, RouteObject, RouterState, type RoutesTestStubProps, ServerBuild, ServerRouter, type ServerRouterProps, type Session, type SessionData, type SessionIdStorageStrategy, type SessionStorage, StaticHandler, StaticHandlerContext, StaticRouter, type StaticRouterProps, StaticRouterProvider, type StaticRouterProviderProps, AssetsManifest as UNSAFE_AssetsManifest, MiddlewareEnabled as UNSAFE_MiddlewareEnabled, 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, createStaticHandler, createStaticRouter, href, isCookie, isSession, unstable_InitialContext, setDevServerHooks as unstable_setDevServerHooks };