UNPKG

11.5 kBTypeScriptView Raw
1import * as React from "react";
2import type { History, InitialEntry, Location, Path, To } from "history";
3import { Action as NavigationType } from "history";
4export type { Location, Path, To, NavigationType };
5/**
6 * A Navigator is a "location changer"; it's how you get to different locations.
7 *
8 * Every history instance conforms to the Navigator interface, but the
9 * distinction is useful primarily when it comes to the low-level <Router> API
10 * where both the location and a navigator must be provided separately in order
11 * to avoid "tearing" that may occur in a suspense-enabled app if the action
12 * and/or location were to be read directly from the history instance.
13 */
14export declare type Navigator = Omit<History, "action" | "location" | "back" | "forward" | "listen" | "block">;
15interface NavigationContextObject {
16 basename: string;
17 navigator: Navigator;
18 static: boolean;
19}
20declare const NavigationContext: React.Context<NavigationContextObject>;
21interface LocationContextObject {
22 location: Location;
23 navigationType: NavigationType;
24}
25declare const LocationContext: React.Context<LocationContextObject>;
26interface RouteContextObject {
27 outlet: React.ReactElement | null;
28 matches: RouteMatch[];
29}
30declare const RouteContext: React.Context<RouteContextObject>;
31export interface MemoryRouterProps {
32 basename?: string;
33 children?: React.ReactNode;
34 initialEntries?: InitialEntry[];
35 initialIndex?: number;
36}
37/**
38 * A <Router> that stores all entries in memory.
39 *
40 * @see https://reactrouter.com/docs/en/v6/api#memoryrouter
41 */
42export declare function MemoryRouter({ basename, children, initialEntries, initialIndex }: MemoryRouterProps): React.ReactElement;
43export interface NavigateProps {
44 to: To;
45 replace?: boolean;
46 state?: any;
47}
48/**
49 * Changes the current location.
50 *
51 * Note: This API is mostly useful in React.Component subclasses that are not
52 * able to use hooks. In functional components, we recommend you use the
53 * `useNavigate` hook instead.
54 *
55 * @see https://reactrouter.com/docs/en/v6/api#navigate
56 */
57export declare function Navigate({ to, replace, state }: NavigateProps): null;
58export interface OutletProps {
59}
60/**
61 * Renders the child route's element, if there is one.
62 *
63 * @see https://reactrouter.com/docs/en/v6/api#outlet
64 */
65export declare function Outlet(_props: OutletProps): React.ReactElement | null;
66export interface RouteProps {
67 caseSensitive?: boolean;
68 children?: React.ReactNode;
69 element?: React.ReactElement | null;
70 index?: boolean;
71 path?: string;
72}
73export interface PathRouteProps {
74 caseSensitive?: boolean;
75 children?: React.ReactNode;
76 element?: React.ReactElement | null;
77 index?: false;
78 path: string;
79}
80export interface LayoutRouteProps {
81 children?: React.ReactNode;
82 element?: React.ReactElement | null;
83}
84export interface IndexRouteProps {
85 element?: React.ReactElement | null;
86 index: true;
87}
88/**
89 * Declares an element that should be rendered at a certain URL path.
90 *
91 * @see https://reactrouter.com/docs/en/v6/api#route
92 */
93export declare function Route(_props: PathRouteProps | LayoutRouteProps | IndexRouteProps): React.ReactElement | null;
94export interface RouterProps {
95 basename?: string;
96 children?: React.ReactNode;
97 location: Partial<Location> | string;
98 navigationType?: NavigationType;
99 navigator: Navigator;
100 static?: boolean;
101}
102/**
103 * Provides location context for the rest of the app.
104 *
105 * Note: You usually won't render a <Router> directly. Instead, you'll render a
106 * router that is more specific to your environment such as a <BrowserRouter>
107 * in web browsers or a <StaticRouter> for server rendering.
108 *
109 * @see https://reactrouter.com/docs/en/v6/api#router
110 */
111export declare function Router({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp }: RouterProps): React.ReactElement | null;
112export interface RoutesProps {
113 children?: React.ReactNode;
114 location?: Partial<Location> | string;
115}
116/**
117 * A container for a nested tree of <Route> elements that renders the branch
118 * that best matches the current location.
119 *
120 * @see https://reactrouter.com/docs/en/v6/api#routes
121 */
122export declare function Routes({ children, location }: RoutesProps): React.ReactElement | null;
123/**
124 * Returns the full href for the given "to" value. This is useful for building
125 * custom links that are also accessible and preserve right-click behavior.
126 *
127 * @see https://reactrouter.com/docs/en/v6/api#usehref
128 */
129export declare function useHref(to: To): string;
130/**
131 * Returns true if this component is a descendant of a <Router>.
132 *
133 * @see https://reactrouter.com/docs/en/v6/api#useinroutercontext
134 */
135export declare function useInRouterContext(): boolean;
136/**
137 * Returns the current location object, which represents the current URL in web
138 * browsers.
139 *
140 * Note: If you're using this it may mean you're doing some of your own
141 * "routing" in your app, and we'd like to know what your use case is. We may
142 * be able to provide something higher-level to better suit your needs.
143 *
144 * @see https://reactrouter.com/docs/en/v6/api#uselocation
145 */
146export declare function useLocation(): Location;
147/**
148 * Returns the current navigation action which describes how the router came to
149 * the current location, either by a pop, push, or replace on the history stack.
150 *
151 * @see https://reactrouter.com/docs/en/v6/api#usenavigationtype
152 */
153export declare function useNavigationType(): NavigationType;
154/**
155 * Returns true if the URL for the given "to" value matches the current URL.
156 * This is useful for components that need to know "active" state, e.g.
157 * <NavLink>.
158 *
159 * @see https://reactrouter.com/docs/en/v6/api#usematch
160 */
161export declare function useMatch<ParamKey extends string = string>(pattern: PathPattern | string): PathMatch<ParamKey> | null;
162/**
163 * The interface for the navigate() function returned from useNavigate().
164 */
165export interface NavigateFunction {
166 (to: To, options?: NavigateOptions): void;
167 (delta: number): void;
168}
169export interface NavigateOptions {
170 replace?: boolean;
171 state?: any;
172}
173/**
174 * Returns an imperative method for changing the location. Used by <Link>s, but
175 * may also be used by other elements to change the location.
176 *
177 * @see https://reactrouter.com/docs/en/v6/api#usenavigate
178 */
179export declare function useNavigate(): NavigateFunction;
180/**
181 * Returns the element for the child route at this level of the route
182 * hierarchy. Used internally by <Outlet> to render child routes.
183 *
184 * @see https://reactrouter.com/docs/en/v6/api#useoutlet
185 */
186export declare function useOutlet(): React.ReactElement | null;
187/**
188 * Returns an object of key/value pairs of the dynamic params from the current
189 * URL that were matched by the route path.
190 *
191 * @see https://reactrouter.com/docs/en/v6/api#useparams
192 */
193export declare function useParams<Key extends string = string>(): Readonly<Params<Key>>;
194/**
195 * Resolves the pathname of the given `to` value against the current location.
196 *
197 * @see https://reactrouter.com/docs/en/v6/api#useresolvedpath
198 */
199export declare function useResolvedPath(to: To): Path;
200/**
201 * Returns the element of the route that matched the current location, prepared
202 * with the correct context to render the remainder of the route tree. Route
203 * elements in the tree must render an <Outlet> to render their child route's
204 * element.
205 *
206 * @see https://reactrouter.com/docs/en/v6/api#useroutes
207 */
208export declare function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;
209/**
210 * Creates a route config from a React "children" object, which is usually
211 * either a `<Route>` element or an array of them. Used internally by
212 * `<Routes>` to create a route config from its children.
213 *
214 * @see https://reactrouter.com/docs/en/v6/api#createroutesfromchildren
215 */
216export declare function createRoutesFromChildren(children: React.ReactNode): RouteObject[];
217/**
218 * The parameters that were parsed from the URL path.
219 */
220export declare type Params<Key extends string = string> = {
221 readonly [key in Key]: string | undefined;
222};
223/**
224 * A route object represents a logical route, with (optionally) its child
225 * routes organized in a tree-like structure.
226 */
227export interface RouteObject {
228 caseSensitive?: boolean;
229 children?: RouteObject[];
230 element?: React.ReactNode;
231 index?: boolean;
232 path?: string;
233}
234/**
235 * Returns a path with params interpolated.
236 *
237 * @see https://reactrouter.com/docs/en/v6/api#generatepath
238 */
239export declare function generatePath(path: string, params?: Params): string;
240/**
241 * A RouteMatch contains info about how a route matched a URL.
242 */
243export interface RouteMatch<ParamKey extends string = string> {
244 /**
245 * The names and values of dynamic parameters in the URL.
246 */
247 params: Params<ParamKey>;
248 /**
249 * The portion of the URL pathname that was matched.
250 */
251 pathname: string;
252 /**
253 * The portion of the URL pathname that was matched before child routes.
254 */
255 pathnameBase: string;
256 /**
257 * The route object that was used to match.
258 */
259 route: RouteObject;
260}
261/**
262 * Matches the given routes to a location and returns the match data.
263 *
264 * @see https://reactrouter.com/docs/en/v6/api#matchroutes
265 */
266export declare function matchRoutes(routes: RouteObject[], locationArg: Partial<Location> | string, basename?: string): RouteMatch[] | null;
267/**
268 * Renders the result of `matchRoutes()` into a React element.
269 */
270export declare function renderMatches(matches: RouteMatch[] | null): React.ReactElement | null;
271/**
272 * A PathPattern is used to match on some portion of a URL pathname.
273 */
274export interface PathPattern {
275 /**
276 * A string to match against a URL pathname. May contain `:id`-style segments
277 * to indicate placeholders for dynamic parameters. May also end with `/*` to
278 * indicate matching the rest of the URL pathname.
279 */
280 path: string;
281 /**
282 * Should be `true` if the static portions of the `path` should be matched in
283 * the same case.
284 */
285 caseSensitive?: boolean;
286 /**
287 * Should be `true` if this pattern should match the entire URL pathname.
288 */
289 end?: boolean;
290}
291/**
292 * A PathMatch contains info about how a PathPattern matched on a URL pathname.
293 */
294export interface PathMatch<ParamKey extends string = string> {
295 /**
296 * The names and values of dynamic parameters in the URL.
297 */
298 params: Params<ParamKey>;
299 /**
300 * The portion of the URL pathname that was matched.
301 */
302 pathname: string;
303 /**
304 * The portion of the URL pathname that was matched before child routes.
305 */
306 pathnameBase: string;
307 /**
308 * The pattern that was used to match.
309 */
310 pattern: PathPattern;
311}
312/**
313 * Performs pattern matching on a URL pathname and returns information about
314 * the match.
315 *
316 * @see https://reactrouter.com/docs/en/v6/api#matchpath
317 */
318export declare function matchPath<ParamKey extends string = string>(pattern: PathPattern | string, pathname: string): PathMatch<ParamKey> | null;
319/**
320 * Returns a resolved path object relative to the given pathname.
321 *
322 * @see https://reactrouter.com/docs/en/v6/api#resolvepath
323 */
324export declare function resolvePath(to: To, fromPathname?: string): Path;
325/** @internal */
326export { NavigationContext as UNSAFE_NavigationContext, LocationContext as UNSAFE_LocationContext, RouteContext as UNSAFE_RouteContext };