react-router 7.6.3 → 7.7.0-pre.1

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 (64) hide show
  1. package/CHANGELOG.md +47 -0
  2. package/dist/development/browser-BSrXyLft.d.mts +157 -0
  3. package/dist/development/chunk-6ZHKKNZG.js +1898 -0
  4. package/dist/development/{chunk-QMGIS6GS.mjs → chunk-YNUF36W5.mjs} +1483 -3019
  5. package/dist/development/chunk-YP7CIEHK.mjs +2695 -0
  6. package/dist/development/chunk-Z7T4GLA7.js +8217 -0
  7. package/dist/development/components-IaVqGBuO.d.mts +816 -0
  8. package/dist/development/dom-export.d.mts +4 -2
  9. package/dist/development/dom-export.js +64 -76
  10. package/dist/development/dom-export.mjs +17 -8
  11. package/dist/development/index-react-server-client-DOK8MfYF.d.mts +1360 -0
  12. package/dist/development/{lib-B33EY9A0.d.mts → index-react-server-client-LrDNRnlX.d.ts} +39 -5
  13. package/dist/development/index-react-server-client.d.mts +4 -0
  14. package/dist/development/index-react-server-client.d.ts +3 -0
  15. package/dist/development/index-react-server-client.js +55 -0
  16. package/dist/development/index-react-server-client.mjs +53 -0
  17. package/dist/development/index-react-server.d.mts +1863 -0
  18. package/dist/development/index-react-server.d.ts +1863 -0
  19. package/dist/development/index-react-server.js +3196 -0
  20. package/dist/development/index-react-server.mjs +3083 -0
  21. package/dist/development/index.d.mts +33 -47
  22. package/dist/development/index.d.ts +195 -2190
  23. package/dist/development/index.js +2600 -11447
  24. package/dist/development/index.mjs +33 -18
  25. package/dist/development/lib/types/internal.d.mts +2 -2
  26. package/dist/development/lib/types/internal.d.ts +2 -1
  27. package/dist/development/lib/types/internal.js +2 -20
  28. package/dist/development/lib/types/internal.mjs +1 -1
  29. package/dist/{production/register-DeIo2iHO.d.mts → development/register-DiOIlEq5.d.mts} +1 -1
  30. package/dist/development/{register-DeIo2iHO.d.mts → register-DiOIlEq5.d.ts} +1 -1
  31. package/dist/development/{route-data-D7Xbr_Ww.d.mts → route-data-7aXBQ4I3.d.ts} +26 -15
  32. package/dist/{production/route-data-D7Xbr_Ww.d.mts → development/route-data-DAw7Esur.d.mts} +16 -5
  33. package/dist/production/browser-BSrXyLft.d.mts +157 -0
  34. package/dist/production/{chunk-S4Z2UWCU.mjs → chunk-4FKAWASN.mjs} +1483 -3019
  35. package/dist/production/chunk-KZZC37RO.mjs +2695 -0
  36. package/dist/production/chunk-SH44XSL4.js +8217 -0
  37. package/dist/production/chunk-W77PDD2Y.js +1898 -0
  38. package/dist/production/components-IaVqGBuO.d.mts +816 -0
  39. package/dist/production/dom-export.d.mts +4 -2
  40. package/dist/production/dom-export.js +64 -76
  41. package/dist/production/dom-export.mjs +17 -8
  42. package/dist/production/index-react-server-client-DOK8MfYF.d.mts +1360 -0
  43. package/dist/production/{lib-B33EY9A0.d.mts → index-react-server-client-LrDNRnlX.d.ts} +39 -5
  44. package/dist/production/index-react-server-client.d.mts +4 -0
  45. package/dist/production/index-react-server-client.d.ts +3 -0
  46. package/dist/production/index-react-server-client.js +55 -0
  47. package/dist/production/index-react-server-client.mjs +53 -0
  48. package/dist/production/index-react-server.d.mts +1863 -0
  49. package/dist/production/index-react-server.d.ts +1863 -0
  50. package/dist/production/index-react-server.js +3196 -0
  51. package/dist/production/index-react-server.mjs +3083 -0
  52. package/dist/production/index.d.mts +33 -47
  53. package/dist/production/index.d.ts +195 -2190
  54. package/dist/production/index.js +2600 -11447
  55. package/dist/production/index.mjs +33 -18
  56. package/dist/production/lib/types/internal.d.mts +2 -2
  57. package/dist/production/lib/types/internal.d.ts +2 -1
  58. package/dist/production/lib/types/internal.js +2 -20
  59. package/dist/production/lib/types/internal.mjs +1 -1
  60. package/dist/production/register-DiOIlEq5.d.mts +24 -0
  61. package/dist/production/register-DiOIlEq5.d.ts +24 -0
  62. package/dist/production/{register-COAKzST_.d.ts → route-data-7aXBQ4I3.d.ts} +26 -38
  63. package/dist/{development/register-COAKzST_.d.ts → production/route-data-DAw7Esur.d.mts} +16 -28
  64. package/package.json +56 -11
@@ -0,0 +1,816 @@
1
+ import { T as To, N as NavigateOptions, B as BlockerFunction, a as Blocker, S as SerializeFrom, b as RelativeRoutingType, L as Location, P as ParamParseKey, c as Path, d as PathPattern, e as PathMatch, U as UIMatch, f as Navigation, A as Action, g as Params, h as Router$1, i as RouteObject, I as InitialEntry, j as NonIndexRouteObject, k as LazyRouteFunction, l as IndexRouteObject, m as Navigator, R as RouterInit, F as FutureConfig, H as HydrationState, D as DataStrategyFunction, n as PatchRoutesOnNavigationFunction, o as RouteMatch } from './route-data-DAw7Esur.mjs';
2
+ import * as React from 'react';
3
+
4
+ /**
5
+ Resolves a URL against the current location.
6
+
7
+ ```tsx
8
+ import { useHref } from "react-router"
9
+
10
+ function SomeComponent() {
11
+ let href = useHref("some/where");
12
+ // "/resolved/some/where"
13
+ }
14
+ ```
15
+
16
+ @category Hooks
17
+ */
18
+ declare function useHref(to: To, { relative }?: {
19
+ relative?: RelativeRoutingType;
20
+ }): string;
21
+ /**
22
+ * Returns true if this component is a descendant of a Router, useful to ensure
23
+ * a component is used within a Router.
24
+ *
25
+ * @category Hooks
26
+ */
27
+ declare function useInRouterContext(): boolean;
28
+ /**
29
+ Returns the current {@link Location}. This can be useful if you'd like to perform some side effect whenever it changes.
30
+
31
+ ```tsx
32
+ import * as React from 'react'
33
+ import { useLocation } from 'react-router'
34
+
35
+ function SomeComponent() {
36
+ let location = useLocation()
37
+
38
+ React.useEffect(() => {
39
+ // Google Analytics
40
+ ga('send', 'pageview')
41
+ }, [location]);
42
+
43
+ return (
44
+ // ...
45
+ );
46
+ }
47
+ ```
48
+
49
+ @category Hooks
50
+ */
51
+ declare function useLocation(): Location;
52
+ /**
53
+ * Returns the current navigation action which describes how the router came to
54
+ * the current location, either by a pop, push, or replace on the history stack.
55
+ *
56
+ * @category Hooks
57
+ */
58
+ declare function useNavigationType(): Action;
59
+ /**
60
+ * Returns a PathMatch object if the given pattern matches the current URL.
61
+ * This is useful for components that need to know "active" state, e.g.
62
+ * `<NavLink>`.
63
+ *
64
+ * @category Hooks
65
+ */
66
+ declare function useMatch<ParamKey extends ParamParseKey<Path>, Path extends string>(pattern: PathPattern<Path> | Path): PathMatch<ParamKey> | null;
67
+ /**
68
+ * The interface for the navigate() function returned from useNavigate().
69
+ */
70
+ interface NavigateFunction {
71
+ (to: To, options?: NavigateOptions): void | Promise<void>;
72
+ (delta: number): void | Promise<void>;
73
+ }
74
+ /**
75
+ Returns a function that lets you navigate programmatically in the browser in response to user interactions or effects.
76
+
77
+ ```tsx
78
+ import { useNavigate } from "react-router";
79
+
80
+ function SomeComponent() {
81
+ let navigate = useNavigate();
82
+ return (
83
+ <button
84
+ onClick={() => {
85
+ navigate(-1);
86
+ }}
87
+ />
88
+ );
89
+ }
90
+ ```
91
+
92
+ It's often better to use {@link redirect} in {@link ActionFunction | actions} and {@link LoaderFunction | loaders} than this hook.
93
+
94
+ @category Hooks
95
+ */
96
+ declare function useNavigate(): NavigateFunction;
97
+ /**
98
+ * Returns the parent route {@link OutletProps.context | `<Outlet context>`}.
99
+ *
100
+ * @category Hooks
101
+ */
102
+ declare function useOutletContext<Context = unknown>(): Context;
103
+ /**
104
+ * Returns the element for the child route at this level of the route
105
+ * hierarchy. Used internally by `<Outlet>` to render child routes.
106
+ *
107
+ * @category Hooks
108
+ */
109
+ declare function useOutlet(context?: unknown): React.ReactElement | null;
110
+ /**
111
+ 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.
112
+
113
+ ```tsx
114
+ import { useParams } from "react-router"
115
+
116
+ function SomeComponent() {
117
+ let params = useParams()
118
+ params.postId
119
+ }
120
+ ```
121
+
122
+ Assuming a route pattern like `/posts/:postId` is matched by `/posts/123` then `params.postId` will be `"123"`.
123
+
124
+ @category Hooks
125
+ */
126
+ declare function useParams<ParamsOrKey extends string | Record<string, string | undefined> = string>(): Readonly<[
127
+ ParamsOrKey
128
+ ] extends [string] ? Params<ParamsOrKey> : Partial<ParamsOrKey>>;
129
+ /**
130
+ 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.
131
+
132
+ ```tsx
133
+ import { useResolvedPath } from "react-router"
134
+
135
+ function SomeComponent() {
136
+ // if the user is at /dashboard/profile
137
+ let path = useResolvedPath("../accounts")
138
+ path.pathname // "/dashboard/accounts"
139
+ path.search // ""
140
+ path.hash // ""
141
+ }
142
+ ```
143
+
144
+ @category Hooks
145
+ */
146
+ declare function useResolvedPath(to: To, { relative }?: {
147
+ relative?: RelativeRoutingType;
148
+ }): Path;
149
+ /**
150
+ Hook version of {@link Routes | `<Routes>`} that uses objects instead of components. These objects have the same properties as the component props.
151
+
152
+ The return value of `useRoutes` is either a valid React element you can use to render the route tree, or `null` if nothing matched.
153
+
154
+ ```tsx
155
+ import * as React from "react";
156
+ import { useRoutes } from "react-router";
157
+
158
+ function App() {
159
+ let element = useRoutes([
160
+ {
161
+ path: "/",
162
+ element: <Dashboard />,
163
+ children: [
164
+ {
165
+ path: "messages",
166
+ element: <DashboardMessages />,
167
+ },
168
+ { path: "tasks", element: <DashboardTasks /> },
169
+ ],
170
+ },
171
+ { path: "team", element: <AboutPage /> },
172
+ ]);
173
+
174
+ return element;
175
+ }
176
+ ```
177
+
178
+ @category Hooks
179
+ */
180
+ declare function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;
181
+ /**
182
+ 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.
183
+
184
+ ```tsx
185
+ import { useNavigation } from "react-router"
186
+
187
+ function SomeComponent() {
188
+ let navigation = useNavigation();
189
+ navigation.state
190
+ navigation.formData
191
+ // etc.
192
+ }
193
+ ```
194
+
195
+ @category Hooks
196
+ */
197
+ declare function useNavigation(): Navigation;
198
+ /**
199
+ Revalidate the data on the page for reasons outside of normal data mutations like window focus or polling on an interval.
200
+
201
+ ```tsx
202
+ import { useRevalidator } from "react-router";
203
+
204
+ function WindowFocusRevalidator() {
205
+ const revalidator = useRevalidator();
206
+
207
+ useFakeWindowFocus(() => {
208
+ revalidator.revalidate();
209
+ });
210
+
211
+ return (
212
+ <div hidden={revalidator.state === "idle"}>
213
+ Revalidating...
214
+ </div>
215
+ );
216
+ }
217
+ ```
218
+
219
+ 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.
220
+
221
+ @category Hooks
222
+ */
223
+ declare function useRevalidator(): {
224
+ revalidate: () => Promise<void>;
225
+ state: Router$1["state"]["revalidation"];
226
+ };
227
+ /**
228
+ * Returns the active route matches, useful for accessing loaderData for
229
+ * parent/child routes or the route "handle" property
230
+ *
231
+ * @category Hooks
232
+ */
233
+ declare function useMatches(): UIMatch[];
234
+ /**
235
+ Returns the data from the closest route {@link LoaderFunction | loader} or {@link ClientLoaderFunction | client loader}.
236
+
237
+ ```tsx
238
+ import { useLoaderData } from "react-router"
239
+
240
+ export async function loader() {
241
+ return await fakeDb.invoices.findAll();
242
+ }
243
+
244
+ export default function Invoices() {
245
+ let invoices = useLoaderData<typeof loader>();
246
+ // ...
247
+ }
248
+ ```
249
+
250
+ @category Hooks
251
+ */
252
+ declare function useLoaderData<T = any>(): SerializeFrom<T>;
253
+ /**
254
+ Returns the loader data for a given route by route ID.
255
+
256
+ ```tsx
257
+ import { useRouteLoaderData } from "react-router";
258
+
259
+ function SomeComponent() {
260
+ const { user } = useRouteLoaderData("root");
261
+ }
262
+ ```
263
+
264
+ Route IDs are created automatically. They are simply the path of the route file relative to the app folder without the extension.
265
+
266
+ | Route Filename | Route ID |
267
+ | -------------------------- | -------------------- |
268
+ | `app/root.tsx` | `"root"` |
269
+ | `app/routes/teams.tsx` | `"routes/teams"` |
270
+ | `app/whatever/teams.$id.tsx` | `"whatever/teams.$id"` |
271
+
272
+ If you created an ID manually, you can use that instead:
273
+
274
+ ```tsx
275
+ route("/", "containers/app.tsx", { id: "app" }})
276
+ ```
277
+
278
+ @category Hooks
279
+ */
280
+ declare function useRouteLoaderData<T = any>(routeId: string): SerializeFrom<T> | undefined;
281
+ /**
282
+ Returns the action data from the most recent POST navigation form submission or `undefined` if there hasn't been one.
283
+
284
+ ```tsx
285
+ import { Form, useActionData } from "react-router"
286
+
287
+ export async function action({ request }) {
288
+ const body = await request.formData()
289
+ const name = body.get("visitorsName")
290
+ return { message: `Hello, ${name}` }
291
+ }
292
+
293
+ export default function Invoices() {
294
+ const data = useActionData()
295
+ return (
296
+ <Form method="post">
297
+ <input type="text" name="visitorsName" />
298
+ {data ? data.message : "Waiting..."}
299
+ </Form>
300
+ )
301
+ }
302
+ ```
303
+
304
+ @category Hooks
305
+ */
306
+ declare function useActionData<T = any>(): SerializeFrom<T> | undefined;
307
+ /**
308
+ Accesses the error thrown during an {@link ActionFunction | action}, {@link LoaderFunction | loader}, or component render to be used in a route module Error Boundary.
309
+
310
+ ```tsx
311
+ export function ErrorBoundary() {
312
+ const error = useRouteError();
313
+ return <div>{error.message}</div>;
314
+ }
315
+ ```
316
+
317
+ @category Hooks
318
+ */
319
+ declare function useRouteError(): unknown;
320
+ /**
321
+ Returns the resolved promise value from the closest {@link Await | `<Await>`}.
322
+
323
+ ```tsx
324
+ function SomeDescendant() {
325
+ const value = useAsyncValue();
326
+ // ...
327
+ }
328
+
329
+ // somewhere in your app
330
+ <Await resolve={somePromise}>
331
+ <SomeDescendant />
332
+ </Await>
333
+ ```
334
+
335
+ @category Hooks
336
+ */
337
+ declare function useAsyncValue(): unknown;
338
+ /**
339
+ Returns the rejection value from the closest {@link Await | `<Await>`}.
340
+
341
+ ```tsx
342
+ import { Await, useAsyncError } from "react-router"
343
+
344
+ function ErrorElement() {
345
+ const error = useAsyncError();
346
+ return (
347
+ <p>Uh Oh, something went wrong! {error.message}</p>
348
+ );
349
+ }
350
+
351
+ // somewhere in your app
352
+ <Await
353
+ resolve={promiseThatRejects}
354
+ errorElement={<ErrorElement />}
355
+ />
356
+ ```
357
+
358
+ @category Hooks
359
+ */
360
+ declare function useAsyncError(): unknown;
361
+ /**
362
+ * Allow the application to block navigations within the SPA and present the
363
+ * user a confirmation dialog to confirm the navigation. Mostly used to avoid
364
+ * using half-filled form data. This does not handle hard-reloads or
365
+ * cross-origin navigations.
366
+ *
367
+ * @category Hooks
368
+ */
369
+ declare function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker;
370
+
371
+ /**
372
+ * @private
373
+ */
374
+ declare function mapRouteProperties(route: RouteObject): Partial<RouteObject> & {
375
+ hasErrorBoundary: boolean;
376
+ };
377
+ declare const hydrationRouteProperties: (keyof RouteObject)[];
378
+ interface MemoryRouterOpts {
379
+ /**
380
+ * Basename path for the application.
381
+ */
382
+ basename?: string;
383
+ /**
384
+ * Function to provide the initial context values for all client side navigations/fetches
385
+ */
386
+ unstable_getContext?: RouterInit["unstable_getContext"];
387
+ /**
388
+ * Future flags to enable for the router.
389
+ */
390
+ future?: Partial<FutureConfig>;
391
+ /**
392
+ * Hydration data to initialize the router with if you have already performed
393
+ * data loading on the server.
394
+ */
395
+ hydrationData?: HydrationState;
396
+ /**
397
+ * Initial entires in the in-memory history stack
398
+ */
399
+ initialEntries?: InitialEntry[];
400
+ /**
401
+ * Index of `initialEntries` the application should initialize to
402
+ */
403
+ initialIndex?: number;
404
+ /**
405
+ * Override the default data strategy of loading in parallel.
406
+ * Only intended for advanced usage.
407
+ */
408
+ dataStrategy?: DataStrategyFunction;
409
+ /**
410
+ * Lazily define portions of the route tree on navigations.
411
+ */
412
+ patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
413
+ }
414
+ /**
415
+ * Create a new data router that manages the application path using an in-memory
416
+ * history stack. Useful for non-browser environments without a DOM API.
417
+ *
418
+ * @category Data Routers
419
+ */
420
+ declare function createMemoryRouter(
421
+ /**
422
+ * Application routes
423
+ */
424
+ routes: RouteObject[],
425
+ /**
426
+ * Router options
427
+ */
428
+ opts?: MemoryRouterOpts): Router$1;
429
+ interface RouterProviderProps {
430
+ router: Router$1;
431
+ flushSync?: (fn: () => unknown) => undefined;
432
+ }
433
+ /**
434
+ * Given a Remix Router instance, render the appropriate UI
435
+ */
436
+ declare function RouterProvider({ router, flushSync: reactDomFlushSyncImpl, }: RouterProviderProps): React.ReactElement;
437
+ /**
438
+ * @category Types
439
+ */
440
+ interface MemoryRouterProps {
441
+ basename?: string;
442
+ children?: React.ReactNode;
443
+ initialEntries?: InitialEntry[];
444
+ initialIndex?: number;
445
+ }
446
+ /**
447
+ * A `<Router>` that stores all entries in memory.
448
+ *
449
+ * @category Component Routers
450
+ */
451
+ declare function MemoryRouter({ basename, children, initialEntries, initialIndex, }: MemoryRouterProps): React.ReactElement;
452
+ /**
453
+ * @category Types
454
+ */
455
+ interface NavigateProps {
456
+ to: To;
457
+ replace?: boolean;
458
+ state?: any;
459
+ relative?: RelativeRoutingType;
460
+ }
461
+ /**
462
+ * A component-based version of {@link useNavigate} to use in a [`React.Component
463
+ * Class`](https://reactjs.org/docs/react-component.html) where hooks are not
464
+ * able to be used.
465
+ *
466
+ * It's recommended to avoid using this component in favor of {@link useNavigate}
467
+ *
468
+ * @category Components
469
+ */
470
+ declare function Navigate({ to, replace, state, relative, }: NavigateProps): null;
471
+ /**
472
+ * @category Types
473
+ */
474
+ interface OutletProps {
475
+ /**
476
+ Provides a context value to the element tree below the outlet. Use when the parent route needs to provide values to child routes.
477
+
478
+ ```tsx
479
+ <Outlet context={myContextValue} />
480
+ ```
481
+
482
+ Access the context with {@link useOutletContext}.
483
+ */
484
+ context?: unknown;
485
+ }
486
+ /**
487
+ Renders the matching child route of a parent route or nothing if no child route matches.
488
+
489
+ ```tsx
490
+ import { Outlet } from "react-router"
491
+
492
+ export default function SomeParent() {
493
+ return (
494
+ <div>
495
+ <h1>Parent Content</h1>
496
+ <Outlet />
497
+ </div>
498
+ );
499
+ }
500
+ ```
501
+
502
+ @category Components
503
+ */
504
+ declare function Outlet(props: OutletProps): React.ReactElement | null;
505
+ /**
506
+ * @category Types
507
+ */
508
+ interface PathRouteProps {
509
+ caseSensitive?: NonIndexRouteObject["caseSensitive"];
510
+ path?: NonIndexRouteObject["path"];
511
+ id?: NonIndexRouteObject["id"];
512
+ lazy?: LazyRouteFunction<NonIndexRouteObject>;
513
+ loader?: NonIndexRouteObject["loader"];
514
+ action?: NonIndexRouteObject["action"];
515
+ hasErrorBoundary?: NonIndexRouteObject["hasErrorBoundary"];
516
+ shouldRevalidate?: NonIndexRouteObject["shouldRevalidate"];
517
+ handle?: NonIndexRouteObject["handle"];
518
+ index?: false;
519
+ children?: React.ReactNode;
520
+ element?: React.ReactNode | null;
521
+ hydrateFallbackElement?: React.ReactNode | null;
522
+ errorElement?: React.ReactNode | null;
523
+ Component?: React.ComponentType | null;
524
+ HydrateFallback?: React.ComponentType | null;
525
+ ErrorBoundary?: React.ComponentType | null;
526
+ }
527
+ /**
528
+ * @category Types
529
+ */
530
+ interface LayoutRouteProps extends PathRouteProps {
531
+ }
532
+ /**
533
+ * @category Types
534
+ */
535
+ interface IndexRouteProps {
536
+ caseSensitive?: IndexRouteObject["caseSensitive"];
537
+ path?: IndexRouteObject["path"];
538
+ id?: IndexRouteObject["id"];
539
+ lazy?: LazyRouteFunction<IndexRouteObject>;
540
+ loader?: IndexRouteObject["loader"];
541
+ action?: IndexRouteObject["action"];
542
+ hasErrorBoundary?: IndexRouteObject["hasErrorBoundary"];
543
+ shouldRevalidate?: IndexRouteObject["shouldRevalidate"];
544
+ handle?: IndexRouteObject["handle"];
545
+ index: true;
546
+ children?: undefined;
547
+ element?: React.ReactNode | null;
548
+ hydrateFallbackElement?: React.ReactNode | null;
549
+ errorElement?: React.ReactNode | null;
550
+ Component?: React.ComponentType | null;
551
+ HydrateFallback?: React.ComponentType | null;
552
+ ErrorBoundary?: React.ComponentType | null;
553
+ }
554
+ type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;
555
+ /**
556
+ * Configures an element to render when a pattern matches the current location.
557
+ * It must be rendered within a {@link Routes} element. Note that these routes
558
+ * do not participate in data loading, actions, code splitting, or any other
559
+ * route module features.
560
+ *
561
+ * @category Components
562
+ */
563
+ declare function Route(_props: RouteProps): React.ReactElement | null;
564
+ /**
565
+ * @category Types
566
+ */
567
+ interface RouterProps {
568
+ basename?: string;
569
+ children?: React.ReactNode;
570
+ location: Partial<Location> | string;
571
+ navigationType?: Action;
572
+ navigator: Navigator;
573
+ static?: boolean;
574
+ }
575
+ /**
576
+ * Provides location context for the rest of the app.
577
+ *
578
+ * Note: You usually won't render a `<Router>` directly. Instead, you'll render a
579
+ * router that is more specific to your environment such as a `<BrowserRouter>`
580
+ * in web browsers or a `<StaticRouter>` for server rendering.
581
+ *
582
+ * @category Components
583
+ */
584
+ declare function Router({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp, }: RouterProps): React.ReactElement | null;
585
+ /**
586
+ * @category Types
587
+ */
588
+ interface RoutesProps {
589
+ /**
590
+ * Nested {@link Route} elements
591
+ */
592
+ children?: React.ReactNode;
593
+ /**
594
+ * The location to match against. Defaults to the current location.
595
+ */
596
+ location?: Partial<Location> | string;
597
+ }
598
+ /**
599
+ Renders a branch of {@link Route | `<Routes>`} that best matches the current
600
+ location. Note that these routes do not participate in data loading, actions,
601
+ code splitting, or any other route module features.
602
+
603
+ ```tsx
604
+ import { Routes, Route } from "react-router"
605
+
606
+ <Routes>
607
+ <Route index element={<StepOne />} />
608
+ <Route path="step-2" element={<StepTwo />} />
609
+ <Route path="step-3" element={<StepThree />}>
610
+ </Routes>
611
+ ```
612
+
613
+ @category Components
614
+ */
615
+ declare function Routes({ children, location, }: RoutesProps): React.ReactElement | null;
616
+ interface AwaitResolveRenderFunction<Resolve = any> {
617
+ (data: Awaited<Resolve>): React.ReactNode;
618
+ }
619
+ /**
620
+ * @category Types
621
+ */
622
+ interface AwaitProps<Resolve> {
623
+ /**
624
+ When using a function, the resolved value is provided as the parameter.
625
+
626
+ ```tsx [2]
627
+ <Await resolve={reviewsPromise}>
628
+ {(resolvedReviews) => <Reviews items={resolvedReviews} />}
629
+ </Await>
630
+ ```
631
+
632
+ When using React elements, {@link useAsyncValue} will provide the
633
+ resolved value:
634
+
635
+ ```tsx [2]
636
+ <Await resolve={reviewsPromise}>
637
+ <Reviews />
638
+ </Await>
639
+
640
+ function Reviews() {
641
+ const resolvedReviews = useAsyncValue()
642
+ return <div>...</div>
643
+ }
644
+ ```
645
+ */
646
+ children: React.ReactNode | AwaitResolveRenderFunction<Resolve>;
647
+ /**
648
+ The error element renders instead of the children when the promise rejects.
649
+
650
+ ```tsx
651
+ <Await
652
+ errorElement={<div>Oops</div>}
653
+ resolve={reviewsPromise}
654
+ >
655
+ <Reviews />
656
+ </Await>
657
+ ```
658
+
659
+ To provide a more contextual error, you can use the {@link useAsyncError} in a
660
+ child component
661
+
662
+ ```tsx
663
+ <Await
664
+ errorElement={<ReviewsError />}
665
+ resolve={reviewsPromise}
666
+ >
667
+ <Reviews />
668
+ </Await>
669
+
670
+ function ReviewsError() {
671
+ const error = useAsyncError()
672
+ return <div>Error loading reviews: {error.message}</div>
673
+ }
674
+ ```
675
+
676
+ If you do not provide an errorElement, the rejected value will bubble up to
677
+ the nearest route-level {@link NonIndexRouteObject#ErrorBoundary | ErrorBoundary} and be accessible
678
+ via {@link useRouteError} hook.
679
+ */
680
+ errorElement?: React.ReactNode;
681
+ /**
682
+ Takes a promise returned from a {@link LoaderFunction | loader} value to be resolved and rendered.
683
+
684
+ ```jsx
685
+ import { useLoaderData, Await } from "react-router"
686
+
687
+ export async function loader() {
688
+ let reviews = getReviews() // not awaited
689
+ let book = await getBook()
690
+ return {
691
+ book,
692
+ reviews, // this is a promise
693
+ }
694
+ }
695
+
696
+ export default function Book() {
697
+ const {
698
+ book,
699
+ reviews, // this is the same promise
700
+ } = useLoaderData()
701
+
702
+ return (
703
+ <div>
704
+ <h1>{book.title}</h1>
705
+ <p>{book.description}</p>
706
+ <React.Suspense fallback={<ReviewsSkeleton />}>
707
+ <Await
708
+ // and is the promise we pass to Await
709
+ resolve={reviews}
710
+ >
711
+ <Reviews />
712
+ </Await>
713
+ </React.Suspense>
714
+ </div>
715
+ );
716
+ }
717
+ ```
718
+ */
719
+ resolve: Resolve;
720
+ }
721
+ /**
722
+ Used to render promise values with automatic error handling.
723
+
724
+ ```tsx
725
+ import { Await, useLoaderData } from "react-router";
726
+
727
+ export function loader() {
728
+ // not awaited
729
+ const reviews = getReviews()
730
+ // awaited (blocks the transition)
731
+ const book = await fetch("/api/book").then((res) => res.json())
732
+ return { book, reviews }
733
+ }
734
+
735
+ function Book() {
736
+ const { book, reviews } = useLoaderData();
737
+ return (
738
+ <div>
739
+ <h1>{book.title}</h1>
740
+ <p>{book.description}</p>
741
+ <React.Suspense fallback={<ReviewsSkeleton />}>
742
+ <Await
743
+ resolve={reviews}
744
+ errorElement={
745
+ <div>Could not load reviews 😬</div>
746
+ }
747
+ children={(resolvedReviews) => (
748
+ <Reviews items={resolvedReviews} />
749
+ )}
750
+ />
751
+ </React.Suspense>
752
+ </div>
753
+ );
754
+ }
755
+ ```
756
+
757
+ **Note:** `<Await>` expects to be rendered inside of a `<React.Suspense>`
758
+
759
+ @category Components
760
+
761
+ */
762
+ declare function Await<Resolve>({ children, errorElement, resolve, }: AwaitProps<Resolve>): React.JSX.Element;
763
+ /**
764
+ * Creates a route config from a React "children" object, which is usually
765
+ * either a `<Route>` element or an array of them. Used internally by
766
+ * `<Routes>` to create a route config from its children.
767
+ *
768
+ * @category Utils
769
+ */
770
+ declare function createRoutesFromChildren(children: React.ReactNode, parentPath?: number[]): RouteObject[];
771
+ /**
772
+ * Create route objects from JSX elements instead of arrays of objects
773
+ */
774
+ declare let createRoutesFromElements: typeof createRoutesFromChildren;
775
+ /**
776
+ * Renders the result of `matchRoutes()` into a React element.
777
+ *
778
+ * @category Utils
779
+ */
780
+ declare function renderMatches(matches: RouteMatch[] | null): React.ReactElement | null;
781
+ type RouteComponentType = React.ComponentType<{
782
+ params: ReturnType<typeof useParams>;
783
+ loaderData: ReturnType<typeof useLoaderData>;
784
+ actionData: ReturnType<typeof useActionData>;
785
+ matches: ReturnType<typeof useMatches>;
786
+ }>;
787
+ declare function withComponentProps(Component: RouteComponentType): () => React.ReactElement<{
788
+ params: Readonly<Partial<string | Record<string, string | undefined>>>;
789
+ loaderData: unknown;
790
+ actionData: unknown;
791
+ matches: UIMatch<unknown, unknown>[];
792
+ }, string | React.JSXElementConstructor<any>>;
793
+ type HydrateFallbackType = React.ComponentType<{
794
+ params: ReturnType<typeof useParams>;
795
+ loaderData: ReturnType<typeof useLoaderData>;
796
+ actionData: ReturnType<typeof useActionData>;
797
+ }>;
798
+ declare function withHydrateFallbackProps(HydrateFallback: HydrateFallbackType): () => React.ReactElement<{
799
+ params: Readonly<Partial<string | Record<string, string | undefined>>>;
800
+ loaderData: unknown;
801
+ actionData: unknown;
802
+ }, string | React.JSXElementConstructor<any>>;
803
+ type ErrorBoundaryType = React.ComponentType<{
804
+ params: ReturnType<typeof useParams>;
805
+ loaderData: ReturnType<typeof useLoaderData>;
806
+ actionData: ReturnType<typeof useActionData>;
807
+ error: ReturnType<typeof useRouteError>;
808
+ }>;
809
+ declare function withErrorBoundaryProps(ErrorBoundary: ErrorBoundaryType): () => React.ReactElement<{
810
+ params: Readonly<Partial<string | Record<string, string | undefined>>>;
811
+ loaderData: unknown;
812
+ actionData: unknown;
813
+ error: unknown;
814
+ }, string | React.JSXElementConstructor<any>>;
815
+
816
+ export { withErrorBoundaryProps as $, type AwaitProps as A, useMatch as B, useMatches as C, useNavigate as D, type ErrorBoundaryType as E, useNavigation as F, useNavigationType as G, type HydrateFallbackType as H, type IndexRouteProps as I, useOutlet as J, useOutletContext as K, type LayoutRouteProps as L, type MemoryRouterOpts as M, type NavigateProps as N, type OutletProps as O, type PathRouteProps as P, useParams as Q, type RouterProviderProps as R, useResolvedPath as S, useRevalidator as T, useRouteError as U, useRouteLoaderData as V, useRoutes as W, hydrationRouteProperties as X, mapRouteProperties as Y, withComponentProps as Z, withHydrateFallbackProps as _, type RouteComponentType as a, type MemoryRouterProps as b, type RouteProps as c, type RouterProps as d, type RoutesProps as e, Await as f, MemoryRouter as g, Navigate as h, Outlet as i, Route as j, Router as k, RouterProvider as l, Routes as m, createMemoryRouter as n, createRoutesFromChildren as o, createRoutesFromElements as p, type NavigateFunction as q, renderMatches as r, useActionData as s, useAsyncError as t, useBlocker as u, useAsyncValue as v, useHref as w, useInRouterContext as x, useLoaderData as y, useLocation as z };