react-router 7.0.0-pre.2 → 7.0.0-pre.3
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.
- package/CHANGELOG.md +2 -0
- package/dist/chunk-3AAHPOYG.mjs +9617 -0
- package/dist/dom-export.d.mts +13 -0
- package/dist/dom-export.d.ts +13 -3
- package/dist/dom-export.js +5502 -0
- package/dist/dom-export.mjs +112 -126
- package/dist/{lib/dom/lib.d.ts → fog-of-war-BijhfqFM.d.ts} +699 -45
- package/dist/fog-of-war-Bz_EDtxF.d.mts +1595 -0
- package/dist/index.d.mts +839 -0
- package/dist/index.d.ts +839 -73
- package/dist/index.js +9763 -0
- package/dist/index.mjs +225 -12689
- package/dist/lib/types.d.mts +2 -0
- package/dist/lib/types.d.ts +2 -83
- package/dist/lib/types.js +28 -0
- package/dist/lib/types.mjs +1 -1
- package/dist/types-BlYP8xpH.d.mts +1620 -0
- package/dist/types-BlYP8xpH.d.ts +1620 -0
- package/package.json +52 -12
- package/dist/dom-export.mjs.map +0 -1
- package/dist/index.mjs.map +0 -1
- package/dist/lib/components.d.ts +0 -372
- package/dist/lib/context.d.ts +0 -115
- package/dist/lib/dom/dom.d.ts +0 -123
- package/dist/lib/dom/global.d.ts +0 -40
- package/dist/lib/dom/server.d.ts +0 -41
- package/dist/lib/dom/ssr/components.d.ts +0 -122
- package/dist/lib/dom/ssr/data.d.ts +0 -2
- package/dist/lib/dom/ssr/entry.d.ts +0 -48
- package/dist/lib/dom/ssr/errorBoundaries.d.ts +0 -36
- package/dist/lib/dom/ssr/errors.d.ts +0 -2
- package/dist/lib/dom/ssr/fallback.d.ts +0 -2
- package/dist/lib/dom/ssr/fog-of-war.d.ts +0 -28
- package/dist/lib/dom/ssr/invariant.d.ts +0 -2
- package/dist/lib/dom/ssr/links.d.ts +0 -25
- package/dist/lib/dom/ssr/markup.d.ts +0 -5
- package/dist/lib/dom/ssr/routeModules.d.ts +0 -183
- package/dist/lib/dom/ssr/routes-test-stub.d.ts +0 -59
- package/dist/lib/dom/ssr/routes.d.ts +0 -29
- package/dist/lib/dom/ssr/server.d.ts +0 -16
- package/dist/lib/dom/ssr/single-fetch.d.ts +0 -37
- package/dist/lib/dom-export/dom-router-provider.d.ts +0 -5
- package/dist/lib/dom-export/hydrated-router.d.ts +0 -5
- package/dist/lib/dom-export.d.ts +0 -3
- package/dist/lib/hooks.d.ts +0 -411
- package/dist/lib/router/history.d.ts +0 -253
- package/dist/lib/router/links.d.ts +0 -104
- package/dist/lib/router/router.d.ts +0 -544
- package/dist/lib/router/utils.d.ts +0 -497
- package/dist/lib/server-runtime/build.d.ts +0 -38
- package/dist/lib/server-runtime/cookies.d.ts +0 -62
- package/dist/lib/server-runtime/crypto.d.ts +0 -2
- package/dist/lib/server-runtime/data.d.ts +0 -11
- package/dist/lib/server-runtime/dev.d.ts +0 -8
- package/dist/lib/server-runtime/entry.d.ts +0 -3
- package/dist/lib/server-runtime/errors.d.ts +0 -51
- package/dist/lib/server-runtime/headers.d.ts +0 -3
- package/dist/lib/server-runtime/invariant.d.ts +0 -2
- package/dist/lib/server-runtime/markup.d.ts +0 -1
- package/dist/lib/server-runtime/mode.d.ts +0 -9
- package/dist/lib/server-runtime/routeMatching.d.ts +0 -8
- package/dist/lib/server-runtime/routeModules.d.ts +0 -40
- package/dist/lib/server-runtime/routes.d.ts +0 -11
- package/dist/lib/server-runtime/server.d.ts +0 -5
- package/dist/lib/server-runtime/serverHandoff.d.ts +0 -11
- package/dist/lib/server-runtime/sessions/cookieStorage.d.ts +0 -19
- package/dist/lib/server-runtime/sessions/memoryStorage.d.ts +0 -17
- package/dist/lib/server-runtime/sessions.d.ts +0 -140
- package/dist/lib/server-runtime/single-fetch.d.ts +0 -30
- package/dist/lib/server-runtime/typecheck.d.ts +0 -4
- package/dist/lib/server-runtime/warnings.d.ts +0 -1
- package/dist/main-dom-export.js +0 -19
- package/dist/main.js +0 -19
- package/dist/react-router-dom.development.js +0 -199
- package/dist/react-router-dom.development.js.map +0 -1
- package/dist/react-router-dom.production.min.js +0 -12
- package/dist/react-router-dom.production.min.js.map +0 -1
- package/dist/react-router.development.js +0 -12528
- package/dist/react-router.development.js.map +0 -1
- package/dist/react-router.production.min.js +0 -12
- package/dist/react-router.production.min.js.map +0 -1
- package/dist/umd/react-router-dom.development.js +0 -241
- package/dist/umd/react-router-dom.development.js.map +0 -1
- package/dist/umd/react-router-dom.production.min.js +0 -12
- package/dist/umd/react-router-dom.production.min.js.map +0 -1
- package/dist/umd/react-router.development.js +0 -12834
- package/dist/umd/react-router.development.js.map +0 -1
- package/dist/umd/react-router.production.min.js +0 -12
- package/dist/umd/react-router.production.min.js.map +0 -1
package/dist/lib/hooks.d.ts
DELETED
|
@@ -1,411 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import type { NavigateOptions, RouteContextObject, RouteMatch, RouteObject } from "./context";
|
|
3
|
-
import type { Location, Path, To } from "./router/history";
|
|
4
|
-
import { Action as NavigationType } from "./router/history";
|
|
5
|
-
import type { Blocker, BlockerFunction, RelativeRoutingType, Router as DataRouter, RevalidationState } from "./router/router";
|
|
6
|
-
import type { ParamParseKey, Params, PathMatch, PathPattern, UIMatch } from "./router/utils";
|
|
7
|
-
import type { SerializeFrom } from "./types";
|
|
8
|
-
/**
|
|
9
|
-
Resolves a URL against the current location.
|
|
10
|
-
|
|
11
|
-
```tsx
|
|
12
|
-
import { useHref } from "react-router"
|
|
13
|
-
|
|
14
|
-
function SomeComponent() {
|
|
15
|
-
let href = useHref("some/where");
|
|
16
|
-
// "/resolved/some/where"
|
|
17
|
-
}
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
@category Hooks
|
|
21
|
-
*/
|
|
22
|
-
export declare function useHref(to: To, { relative }?: {
|
|
23
|
-
relative?: RelativeRoutingType;
|
|
24
|
-
}): string;
|
|
25
|
-
/**
|
|
26
|
-
* Returns true if this component is a descendant of a Router, useful to ensure
|
|
27
|
-
* a component is used within a Router.
|
|
28
|
-
*
|
|
29
|
-
* @category Hooks
|
|
30
|
-
*/
|
|
31
|
-
export declare function useInRouterContext(): boolean;
|
|
32
|
-
/**
|
|
33
|
-
Returns the current {@link Location}. This can be useful if you'd like to perform some side effect whenever it changes.
|
|
34
|
-
|
|
35
|
-
```tsx
|
|
36
|
-
import * as React from 'react'
|
|
37
|
-
import { useLocation } from 'react-router'
|
|
38
|
-
|
|
39
|
-
function SomeComponent() {
|
|
40
|
-
let location = useLocation()
|
|
41
|
-
|
|
42
|
-
React.useEffect(() => {
|
|
43
|
-
// Google Analytics
|
|
44
|
-
ga('send', 'pageview')
|
|
45
|
-
}, [location]);
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
// ...
|
|
49
|
-
);
|
|
50
|
-
}
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
@category Hooks
|
|
54
|
-
*/
|
|
55
|
-
export declare function useLocation(): Location;
|
|
56
|
-
/**
|
|
57
|
-
* Returns the current navigation action which describes how the router came to
|
|
58
|
-
* the current location, either by a pop, push, or replace on the history stack.
|
|
59
|
-
*
|
|
60
|
-
* @category Hooks
|
|
61
|
-
*/
|
|
62
|
-
export declare function useNavigationType(): NavigationType;
|
|
63
|
-
/**
|
|
64
|
-
* Returns a PathMatch object if the given pattern matches the current URL.
|
|
65
|
-
* This is useful for components that need to know "active" state, e.g.
|
|
66
|
-
* `<NavLink>`.
|
|
67
|
-
*
|
|
68
|
-
* @category Hooks
|
|
69
|
-
*/
|
|
70
|
-
export declare function useMatch<ParamKey extends ParamParseKey<Path>, Path extends string>(pattern: PathPattern<Path> | Path): PathMatch<ParamKey> | null;
|
|
71
|
-
/**
|
|
72
|
-
* The interface for the navigate() function returned from useNavigate().
|
|
73
|
-
*/
|
|
74
|
-
export interface NavigateFunction {
|
|
75
|
-
(to: To, options?: NavigateOptions): void | Promise<void>;
|
|
76
|
-
(delta: number): void | Promise<void>;
|
|
77
|
-
}
|
|
78
|
-
/**
|
|
79
|
-
Returns a function that lets you navigate programmatically in the browser in response to user interactions or effects.
|
|
80
|
-
|
|
81
|
-
```tsx
|
|
82
|
-
import { useNavigate } from "react-router";
|
|
83
|
-
|
|
84
|
-
function SomeComponent() {
|
|
85
|
-
let navigate = useNavigate();
|
|
86
|
-
return (
|
|
87
|
-
<button
|
|
88
|
-
onClick={() => {
|
|
89
|
-
navigate(-1);
|
|
90
|
-
}}
|
|
91
|
-
/>
|
|
92
|
-
);
|
|
93
|
-
}
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
It's often better to use {@link redirect} in {@link ActionFunction | actions} and {@link LoaderFunction | loaders} than this hook.
|
|
97
|
-
|
|
98
|
-
@category Hooks
|
|
99
|
-
*/
|
|
100
|
-
export declare function useNavigate(): NavigateFunction;
|
|
101
|
-
/**
|
|
102
|
-
* Returns the parent route {@link OutletProps.context | `<Outlet context>`}.
|
|
103
|
-
*
|
|
104
|
-
* @category Hooks
|
|
105
|
-
*/
|
|
106
|
-
export declare function useOutletContext<Context = unknown>(): Context;
|
|
107
|
-
/**
|
|
108
|
-
* Returns the element for the child route at this level of the route
|
|
109
|
-
* hierarchy. Used internally by `<Outlet>` to render child routes.
|
|
110
|
-
*
|
|
111
|
-
* @category Hooks
|
|
112
|
-
*/
|
|
113
|
-
export declare function useOutlet(context?: unknown): React.ReactElement | null;
|
|
114
|
-
/**
|
|
115
|
-
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.
|
|
116
|
-
|
|
117
|
-
```tsx
|
|
118
|
-
import { useParams } from "react-router"
|
|
119
|
-
|
|
120
|
-
function SomeComponent() {
|
|
121
|
-
let params = useParams()
|
|
122
|
-
params.postId
|
|
123
|
-
}
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
Assuming a route pattern like `/posts/:postId` is matched by `/posts/123` then `params.postId` will be `"123"`.
|
|
127
|
-
|
|
128
|
-
@category Hooks
|
|
129
|
-
*/
|
|
130
|
-
export declare function useParams<ParamsOrKey extends string | Record<string, string | undefined> = string>(): Readonly<[
|
|
131
|
-
ParamsOrKey
|
|
132
|
-
] extends [string] ? Params<ParamsOrKey> : Partial<ParamsOrKey>>;
|
|
133
|
-
/**
|
|
134
|
-
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.
|
|
135
|
-
|
|
136
|
-
```tsx
|
|
137
|
-
import { useResolvedPath } from "react-router"
|
|
138
|
-
|
|
139
|
-
function SomeComponent() {
|
|
140
|
-
// if the user is at /dashboard/profile
|
|
141
|
-
let path = useResolvedPath("../accounts")
|
|
142
|
-
path.pathname // "/dashboard/accounts"
|
|
143
|
-
path.search // ""
|
|
144
|
-
path.hash // ""
|
|
145
|
-
}
|
|
146
|
-
```
|
|
147
|
-
|
|
148
|
-
@category Hooks
|
|
149
|
-
*/
|
|
150
|
-
export declare function useResolvedPath(to: To, { relative }?: {
|
|
151
|
-
relative?: RelativeRoutingType;
|
|
152
|
-
}): Path;
|
|
153
|
-
/**
|
|
154
|
-
Hook version of {@link Routes | `<Routes>`} that uses objects instead of components. These objects have the same properties as the component props.
|
|
155
|
-
|
|
156
|
-
The return value of `useRoutes` is either a valid React element you can use to render the route tree, or `null` if nothing matched.
|
|
157
|
-
|
|
158
|
-
```tsx
|
|
159
|
-
import * as React from "react";
|
|
160
|
-
import { useRoutes } from "react-router";
|
|
161
|
-
|
|
162
|
-
function App() {
|
|
163
|
-
let element = useRoutes([
|
|
164
|
-
{
|
|
165
|
-
path: "/",
|
|
166
|
-
element: <Dashboard />,
|
|
167
|
-
children: [
|
|
168
|
-
{
|
|
169
|
-
path: "messages",
|
|
170
|
-
element: <DashboardMessages />,
|
|
171
|
-
},
|
|
172
|
-
{ path: "tasks", element: <DashboardTasks /> },
|
|
173
|
-
],
|
|
174
|
-
},
|
|
175
|
-
{ path: "team", element: <AboutPage /> },
|
|
176
|
-
]);
|
|
177
|
-
|
|
178
|
-
return element;
|
|
179
|
-
}
|
|
180
|
-
```
|
|
181
|
-
|
|
182
|
-
@category Hooks
|
|
183
|
-
*/
|
|
184
|
-
export declare function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;
|
|
185
|
-
/**
|
|
186
|
-
* Internal implementation with accept optional param for RouterProvider usage
|
|
187
|
-
*
|
|
188
|
-
* @private
|
|
189
|
-
* @category Hooks
|
|
190
|
-
*/
|
|
191
|
-
export declare function useRoutesImpl(routes: RouteObject[], locationArg?: Partial<Location> | string, dataRouterState?: DataRouter["state"], future?: DataRouter["future"]): React.ReactElement | null;
|
|
192
|
-
type RenderErrorBoundaryProps = React.PropsWithChildren<{
|
|
193
|
-
location: Location;
|
|
194
|
-
revalidation: RevalidationState;
|
|
195
|
-
error: any;
|
|
196
|
-
component: React.ReactNode;
|
|
197
|
-
routeContext: RouteContextObject;
|
|
198
|
-
}>;
|
|
199
|
-
type RenderErrorBoundaryState = {
|
|
200
|
-
location: Location;
|
|
201
|
-
revalidation: RevalidationState;
|
|
202
|
-
error: any;
|
|
203
|
-
};
|
|
204
|
-
export declare class RenderErrorBoundary extends React.Component<RenderErrorBoundaryProps, RenderErrorBoundaryState> {
|
|
205
|
-
constructor(props: RenderErrorBoundaryProps);
|
|
206
|
-
static getDerivedStateFromError(error: any): {
|
|
207
|
-
error: any;
|
|
208
|
-
};
|
|
209
|
-
static getDerivedStateFromProps(props: RenderErrorBoundaryProps, state: RenderErrorBoundaryState): {
|
|
210
|
-
error: any;
|
|
211
|
-
location: Location<any>;
|
|
212
|
-
revalidation: RevalidationState;
|
|
213
|
-
};
|
|
214
|
-
componentDidCatch(error: any, errorInfo: any): void;
|
|
215
|
-
render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
|
|
216
|
-
}
|
|
217
|
-
export declare function _renderMatches(matches: RouteMatch[] | null, parentMatches?: RouteMatch[], dataRouterState?: DataRouter["state"] | null, future?: DataRouter["future"] | null): React.ReactElement | null;
|
|
218
|
-
/**
|
|
219
|
-
* Returns the ID for the nearest contextual route
|
|
220
|
-
*/
|
|
221
|
-
export declare function useRouteId(): string;
|
|
222
|
-
/**
|
|
223
|
-
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.
|
|
224
|
-
|
|
225
|
-
```tsx
|
|
226
|
-
import { useNavigation } from "react-router"
|
|
227
|
-
|
|
228
|
-
function SomeComponent() {
|
|
229
|
-
let navigation = useNavigation();
|
|
230
|
-
navigation.state
|
|
231
|
-
navigation.formData
|
|
232
|
-
// etc.
|
|
233
|
-
}
|
|
234
|
-
```
|
|
235
|
-
|
|
236
|
-
@category Hooks
|
|
237
|
-
*/
|
|
238
|
-
export declare function useNavigation(): import("./router/router").Navigation;
|
|
239
|
-
/**
|
|
240
|
-
Revalidate the data on the page for reasons outside of normal data mutations like window focus or polling on an interval.
|
|
241
|
-
|
|
242
|
-
```tsx
|
|
243
|
-
import { useRevalidator } from "react-router";
|
|
244
|
-
|
|
245
|
-
function WindowFocusRevalidator() {
|
|
246
|
-
const revalidator = useRevalidator();
|
|
247
|
-
|
|
248
|
-
useFakeWindowFocus(() => {
|
|
249
|
-
revalidator.revalidate();
|
|
250
|
-
});
|
|
251
|
-
|
|
252
|
-
return (
|
|
253
|
-
<div hidden={revalidator.state === "idle"}>
|
|
254
|
-
Revalidating...
|
|
255
|
-
</div>
|
|
256
|
-
);
|
|
257
|
-
}
|
|
258
|
-
```
|
|
259
|
-
|
|
260
|
-
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.
|
|
261
|
-
|
|
262
|
-
@category Hooks
|
|
263
|
-
*/
|
|
264
|
-
export declare function useRevalidator(): {
|
|
265
|
-
revalidate(): Promise<void>;
|
|
266
|
-
state: RevalidationState;
|
|
267
|
-
};
|
|
268
|
-
/**
|
|
269
|
-
* Returns the active route matches, useful for accessing loaderData for
|
|
270
|
-
* parent/child routes or the route "handle" property
|
|
271
|
-
*
|
|
272
|
-
* @category Hooks
|
|
273
|
-
*/
|
|
274
|
-
export declare function useMatches(): UIMatch[];
|
|
275
|
-
/**
|
|
276
|
-
Returns the data from the closest route {@link LoaderFunction | loader} or {@link ClientLoaderFunction | client loader}.
|
|
277
|
-
|
|
278
|
-
```tsx
|
|
279
|
-
import { useLoaderData } from "react-router"
|
|
280
|
-
|
|
281
|
-
export async function loader() {
|
|
282
|
-
return await fakeDb.invoices.findAll();
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
export default function Invoices() {
|
|
286
|
-
let invoices = useLoaderData<typeof loader>();
|
|
287
|
-
// ...
|
|
288
|
-
}
|
|
289
|
-
```
|
|
290
|
-
|
|
291
|
-
@category Hooks
|
|
292
|
-
*/
|
|
293
|
-
export declare function useLoaderData<T = any>(): SerializeFrom<T>;
|
|
294
|
-
/**
|
|
295
|
-
Returns the loader data for a given route by route ID.
|
|
296
|
-
|
|
297
|
-
```tsx
|
|
298
|
-
import { useRouteLoaderData } from "react-router";
|
|
299
|
-
|
|
300
|
-
function SomeComponent() {
|
|
301
|
-
const { user } = useRouteLoaderData("root");
|
|
302
|
-
}
|
|
303
|
-
```
|
|
304
|
-
|
|
305
|
-
Route IDs are created automatically. They are simply the path of the route file relative to the app folder without the extension.
|
|
306
|
-
|
|
307
|
-
| Route Filename | Route ID |
|
|
308
|
-
| -------------------------- | -------------------- |
|
|
309
|
-
| `app/root.tsx` | `"root"` |
|
|
310
|
-
| `app/routes/teams.tsx` | `"routes/teams"` |
|
|
311
|
-
| `app/whatever/teams.$id.tsx` | `"whatever/teams.$id"` |
|
|
312
|
-
|
|
313
|
-
If you created an ID manually, you can use that instead:
|
|
314
|
-
|
|
315
|
-
```tsx
|
|
316
|
-
route("/", "containers/app.tsx", { id: "app" }})
|
|
317
|
-
```
|
|
318
|
-
|
|
319
|
-
@category Hooks
|
|
320
|
-
*/
|
|
321
|
-
export declare function useRouteLoaderData<T = any>(routeId: string): SerializeFrom<T> | undefined;
|
|
322
|
-
/**
|
|
323
|
-
Returns the action data from the most recent POST navigation form submission or `undefined` if there hasn't been one.
|
|
324
|
-
|
|
325
|
-
```tsx
|
|
326
|
-
import { Form, useActionData } from "react-router"
|
|
327
|
-
|
|
328
|
-
export async function action({ request }) {
|
|
329
|
-
const body = await request.formData()
|
|
330
|
-
const name = body.get("visitorsName")
|
|
331
|
-
return { message: `Hello, ${name}` }
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
export default function Invoices() {
|
|
335
|
-
const data = useActionData()
|
|
336
|
-
return (
|
|
337
|
-
<Form method="post">
|
|
338
|
-
<input type="text" name="visitorsName" />
|
|
339
|
-
{data ? data.message : "Waiting..."}
|
|
340
|
-
</Form>
|
|
341
|
-
)
|
|
342
|
-
}
|
|
343
|
-
```
|
|
344
|
-
|
|
345
|
-
@category Hooks
|
|
346
|
-
*/
|
|
347
|
-
export declare function useActionData<T = any>(): SerializeFrom<T> | undefined;
|
|
348
|
-
/**
|
|
349
|
-
Accesses the error thrown during an {@link ActionFunction | action}, {@link LoaderFunction | loader}, or component render to be used in a route module Error Boundary.
|
|
350
|
-
|
|
351
|
-
```tsx
|
|
352
|
-
export function ErrorBoundary() {
|
|
353
|
-
const error = useRouteError();
|
|
354
|
-
return <div>{error.message}</div>;
|
|
355
|
-
}
|
|
356
|
-
```
|
|
357
|
-
|
|
358
|
-
@category Hooks
|
|
359
|
-
*/
|
|
360
|
-
export declare function useRouteError(): unknown;
|
|
361
|
-
/**
|
|
362
|
-
Returns the resolved promise value from the closest {@link Await | `<Await>`}.
|
|
363
|
-
|
|
364
|
-
```tsx
|
|
365
|
-
function SomeDescendant() {
|
|
366
|
-
const value = useAsyncValue();
|
|
367
|
-
// ...
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
// somewhere in your app
|
|
371
|
-
<Await resolve={somePromise}>
|
|
372
|
-
<SomeDescendant />
|
|
373
|
-
</Await>
|
|
374
|
-
```
|
|
375
|
-
|
|
376
|
-
@category Hooks
|
|
377
|
-
*/
|
|
378
|
-
export declare function useAsyncValue(): unknown;
|
|
379
|
-
/**
|
|
380
|
-
Returns the rejection value from the closest {@link Await | `<Await>`}.
|
|
381
|
-
|
|
382
|
-
```tsx
|
|
383
|
-
import { Await, useAsyncError } from "react-router"
|
|
384
|
-
|
|
385
|
-
function ErrorElement() {
|
|
386
|
-
const error = useAsyncError();
|
|
387
|
-
return (
|
|
388
|
-
<p>Uh Oh, something went wrong! {error.message}</p>
|
|
389
|
-
);
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
// somewhere in your app
|
|
393
|
-
<Await
|
|
394
|
-
resolve={promiseThatRejects}
|
|
395
|
-
errorElement={<ErrorElement />}
|
|
396
|
-
/>
|
|
397
|
-
```
|
|
398
|
-
|
|
399
|
-
@category Hooks
|
|
400
|
-
*/
|
|
401
|
-
export declare function useAsyncError(): unknown;
|
|
402
|
-
/**
|
|
403
|
-
* Allow the application to block navigations within the SPA and present the
|
|
404
|
-
* user a confirmation dialog to confirm the navigation. Mostly used to avoid
|
|
405
|
-
* using half-filled form data. This does not handle hard-reloads or
|
|
406
|
-
* cross-origin navigations.
|
|
407
|
-
*
|
|
408
|
-
* @category Hooks
|
|
409
|
-
*/
|
|
410
|
-
export declare function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker;
|
|
411
|
-
export {};
|
|
@@ -1,253 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Actions represent the type of change to a location value.
|
|
3
|
-
*/
|
|
4
|
-
export declare enum Action {
|
|
5
|
-
/**
|
|
6
|
-
* A POP indicates a change to an arbitrary index in the history stack, such
|
|
7
|
-
* as a back or forward navigation. It does not describe the direction of the
|
|
8
|
-
* navigation, only that the current index changed.
|
|
9
|
-
*
|
|
10
|
-
* Note: This is the default action for newly created history objects.
|
|
11
|
-
*/
|
|
12
|
-
Pop = "POP",
|
|
13
|
-
/**
|
|
14
|
-
* A PUSH indicates a new entry being added to the history stack, such as when
|
|
15
|
-
* a link is clicked and a new page loads. When this happens, all subsequent
|
|
16
|
-
* entries in the stack are lost.
|
|
17
|
-
*/
|
|
18
|
-
Push = "PUSH",
|
|
19
|
-
/**
|
|
20
|
-
* A REPLACE indicates the entry at the current index in the history stack
|
|
21
|
-
* being replaced by a new one.
|
|
22
|
-
*/
|
|
23
|
-
Replace = "REPLACE"
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* The pathname, search, and hash values of a URL.
|
|
27
|
-
*/
|
|
28
|
-
export interface Path {
|
|
29
|
-
/**
|
|
30
|
-
* A URL pathname, beginning with a /.
|
|
31
|
-
*/
|
|
32
|
-
pathname: string;
|
|
33
|
-
/**
|
|
34
|
-
* A URL search string, beginning with a ?.
|
|
35
|
-
*/
|
|
36
|
-
search: string;
|
|
37
|
-
/**
|
|
38
|
-
* A URL fragment identifier, beginning with a #.
|
|
39
|
-
*/
|
|
40
|
-
hash: string;
|
|
41
|
-
}
|
|
42
|
-
/**
|
|
43
|
-
* An entry in a history stack. A location contains information about the
|
|
44
|
-
* URL path, as well as possibly some arbitrary state and a key.
|
|
45
|
-
*/
|
|
46
|
-
export interface Location<State = any> extends Path {
|
|
47
|
-
/**
|
|
48
|
-
* A value of arbitrary data associated with this location.
|
|
49
|
-
*/
|
|
50
|
-
state: State;
|
|
51
|
-
/**
|
|
52
|
-
* A unique string associated with this location. May be used to safely store
|
|
53
|
-
* and retrieve data in some other storage API, like `localStorage`.
|
|
54
|
-
*
|
|
55
|
-
* Note: This value is always "default" on the initial location.
|
|
56
|
-
*/
|
|
57
|
-
key: string;
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* A change to the current location.
|
|
61
|
-
*/
|
|
62
|
-
export interface Update {
|
|
63
|
-
/**
|
|
64
|
-
* The action that triggered the change.
|
|
65
|
-
*/
|
|
66
|
-
action: Action;
|
|
67
|
-
/**
|
|
68
|
-
* The new location.
|
|
69
|
-
*/
|
|
70
|
-
location: Location;
|
|
71
|
-
/**
|
|
72
|
-
* The delta between this location and the former location in the history stack
|
|
73
|
-
*/
|
|
74
|
-
delta: number | null;
|
|
75
|
-
}
|
|
76
|
-
/**
|
|
77
|
-
* A function that receives notifications about location changes.
|
|
78
|
-
*/
|
|
79
|
-
export interface Listener {
|
|
80
|
-
(update: Update): void;
|
|
81
|
-
}
|
|
82
|
-
/**
|
|
83
|
-
* Describes a location that is the destination of some navigation used in
|
|
84
|
-
* {@link Link}, {@link useNavigate}, etc.
|
|
85
|
-
*/
|
|
86
|
-
export type To = string | Partial<Path>;
|
|
87
|
-
/**
|
|
88
|
-
* A history is an interface to the navigation stack. The history serves as the
|
|
89
|
-
* source of truth for the current location, as well as provides a set of
|
|
90
|
-
* methods that may be used to change it.
|
|
91
|
-
*
|
|
92
|
-
* It is similar to the DOM's `window.history` object, but with a smaller, more
|
|
93
|
-
* focused API.
|
|
94
|
-
*/
|
|
95
|
-
export interface History {
|
|
96
|
-
/**
|
|
97
|
-
* The last action that modified the current location. This will always be
|
|
98
|
-
* Action.Pop when a history instance is first created. This value is mutable.
|
|
99
|
-
*/
|
|
100
|
-
readonly action: Action;
|
|
101
|
-
/**
|
|
102
|
-
* The current location. This value is mutable.
|
|
103
|
-
*/
|
|
104
|
-
readonly location: Location;
|
|
105
|
-
/**
|
|
106
|
-
* Returns a valid href for the given `to` value that may be used as
|
|
107
|
-
* the value of an <a href> attribute.
|
|
108
|
-
*
|
|
109
|
-
* @param to - The destination URL
|
|
110
|
-
*/
|
|
111
|
-
createHref(to: To): string;
|
|
112
|
-
/**
|
|
113
|
-
* Returns a URL for the given `to` value
|
|
114
|
-
*
|
|
115
|
-
* @param to - The destination URL
|
|
116
|
-
*/
|
|
117
|
-
createURL(to: To): URL;
|
|
118
|
-
/**
|
|
119
|
-
* Encode a location the same way window.history would do (no-op for memory
|
|
120
|
-
* history) so we ensure our PUSH/REPLACE navigations for data routers
|
|
121
|
-
* behave the same as POP
|
|
122
|
-
*
|
|
123
|
-
* @param to Unencoded path
|
|
124
|
-
*/
|
|
125
|
-
encodeLocation(to: To): Path;
|
|
126
|
-
/**
|
|
127
|
-
* Pushes a new location onto the history stack, increasing its length by one.
|
|
128
|
-
* If there were any entries in the stack after the current one, they are
|
|
129
|
-
* lost.
|
|
130
|
-
*
|
|
131
|
-
* @param to - The new URL
|
|
132
|
-
* @param state - Data to associate with the new location
|
|
133
|
-
*/
|
|
134
|
-
push(to: To, state?: any): void;
|
|
135
|
-
/**
|
|
136
|
-
* Replaces the current location in the history stack with a new one. The
|
|
137
|
-
* location that was replaced will no longer be available.
|
|
138
|
-
*
|
|
139
|
-
* @param to - The new URL
|
|
140
|
-
* @param state - Data to associate with the new location
|
|
141
|
-
*/
|
|
142
|
-
replace(to: To, state?: any): void;
|
|
143
|
-
/**
|
|
144
|
-
* Navigates `n` entries backward/forward in the history stack relative to the
|
|
145
|
-
* current index. For example, a "back" navigation would use go(-1).
|
|
146
|
-
*
|
|
147
|
-
* @param delta - The delta in the stack index
|
|
148
|
-
*/
|
|
149
|
-
go(delta: number): void;
|
|
150
|
-
/**
|
|
151
|
-
* Sets up a listener that will be called whenever the current location
|
|
152
|
-
* changes.
|
|
153
|
-
*
|
|
154
|
-
* @param listener - A function that will be called when the location changes
|
|
155
|
-
* @returns unlisten - A function that may be used to stop listening
|
|
156
|
-
*/
|
|
157
|
-
listen(listener: Listener): () => void;
|
|
158
|
-
}
|
|
159
|
-
/**
|
|
160
|
-
* A user-supplied object that describes a location. Used when providing
|
|
161
|
-
* entries to `createMemoryHistory` via its `initialEntries` option.
|
|
162
|
-
*/
|
|
163
|
-
export type InitialEntry = string | Partial<Location>;
|
|
164
|
-
export type MemoryHistoryOptions = {
|
|
165
|
-
initialEntries?: InitialEntry[];
|
|
166
|
-
initialIndex?: number;
|
|
167
|
-
v5Compat?: boolean;
|
|
168
|
-
};
|
|
169
|
-
/**
|
|
170
|
-
* A memory history stores locations in memory. This is useful in stateful
|
|
171
|
-
* environments where there is no web browser, such as node tests or React
|
|
172
|
-
* Native.
|
|
173
|
-
*/
|
|
174
|
-
export interface MemoryHistory extends History {
|
|
175
|
-
/**
|
|
176
|
-
* The current index in the history stack.
|
|
177
|
-
*/
|
|
178
|
-
readonly index: number;
|
|
179
|
-
}
|
|
180
|
-
/**
|
|
181
|
-
* Memory history stores the current location in memory. It is designed for use
|
|
182
|
-
* in stateful non-browser environments like tests and React Native.
|
|
183
|
-
*/
|
|
184
|
-
export declare function createMemoryHistory(options?: MemoryHistoryOptions): MemoryHistory;
|
|
185
|
-
/**
|
|
186
|
-
* A browser history stores the current location in regular URLs in a web
|
|
187
|
-
* browser environment. This is the standard for most web apps and provides the
|
|
188
|
-
* cleanest URLs the browser's address bar.
|
|
189
|
-
*
|
|
190
|
-
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#browserhistory
|
|
191
|
-
*/
|
|
192
|
-
export interface BrowserHistory extends UrlHistory {
|
|
193
|
-
}
|
|
194
|
-
export type BrowserHistoryOptions = UrlHistoryOptions;
|
|
195
|
-
/**
|
|
196
|
-
* Browser history stores the location in regular URLs. This is the standard for
|
|
197
|
-
* most web apps, but it requires some configuration on the server to ensure you
|
|
198
|
-
* serve the same app at multiple URLs.
|
|
199
|
-
*
|
|
200
|
-
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createbrowserhistory
|
|
201
|
-
*/
|
|
202
|
-
export declare function createBrowserHistory(options?: BrowserHistoryOptions): BrowserHistory;
|
|
203
|
-
/**
|
|
204
|
-
* A hash history stores the current location in the fragment identifier portion
|
|
205
|
-
* of the URL in a web browser environment.
|
|
206
|
-
*
|
|
207
|
-
* This is ideal for apps that do not control the server for some reason
|
|
208
|
-
* (because the fragment identifier is never sent to the server), including some
|
|
209
|
-
* shared hosting environments that do not provide fine-grained controls over
|
|
210
|
-
* which pages are served at which URLs.
|
|
211
|
-
*
|
|
212
|
-
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#hashhistory
|
|
213
|
-
*/
|
|
214
|
-
export interface HashHistory extends UrlHistory {
|
|
215
|
-
}
|
|
216
|
-
export type HashHistoryOptions = UrlHistoryOptions;
|
|
217
|
-
/**
|
|
218
|
-
* Hash history stores the location in window.location.hash. This makes it ideal
|
|
219
|
-
* for situations where you don't want to send the location to the server for
|
|
220
|
-
* some reason, either because you do cannot configure it or the URL space is
|
|
221
|
-
* reserved for something else.
|
|
222
|
-
*
|
|
223
|
-
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createhashhistory
|
|
224
|
-
*/
|
|
225
|
-
export declare function createHashHistory(options?: HashHistoryOptions): HashHistory;
|
|
226
|
-
/**
|
|
227
|
-
* @private
|
|
228
|
-
*/
|
|
229
|
-
export declare function invariant(value: boolean, message?: string): asserts value;
|
|
230
|
-
export declare function invariant<T>(value: T | null | undefined, message?: string): asserts value is T;
|
|
231
|
-
export declare function warning(cond: any, message: string): void;
|
|
232
|
-
/**
|
|
233
|
-
* Creates a Location object with a unique key from the given Path
|
|
234
|
-
*/
|
|
235
|
-
export declare function createLocation(current: string | Location, to: To, state?: any, key?: string): Readonly<Location>;
|
|
236
|
-
/**
|
|
237
|
-
* Creates a string URL path from the given pathname, search, and hash components.
|
|
238
|
-
*
|
|
239
|
-
* @category Utils
|
|
240
|
-
*/
|
|
241
|
-
export declare function createPath({ pathname, search, hash, }: Partial<Path>): string;
|
|
242
|
-
/**
|
|
243
|
-
* Parses a string URL path into its separate pathname, search, and hash components.
|
|
244
|
-
*
|
|
245
|
-
* @category Utils
|
|
246
|
-
*/
|
|
247
|
-
export declare function parsePath(path: string): Partial<Path>;
|
|
248
|
-
export interface UrlHistory extends History {
|
|
249
|
-
}
|
|
250
|
-
export type UrlHistoryOptions = {
|
|
251
|
-
window?: Window;
|
|
252
|
-
v5Compat?: boolean;
|
|
253
|
-
};
|