components.d.ts 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. import * as React from "react";
  2. import type { TrackedPromise, InitialEntry, Location, Router as RemixRouter, To } from "@remix-run/router";
  3. import { Action as NavigationType } from "@remix-run/router";
  4. import type { IndexRouteObject, RouteMatch, RouteObject, Navigator, NonIndexRouteObject, RelativeRoutingType } from "./context";
  5. export interface RouterProviderProps {
  6. fallbackElement?: React.ReactNode;
  7. router: RemixRouter;
  8. }
  9. /**
  10. * Given a Remix Router instance, render the appropriate UI
  11. */
  12. export declare function RouterProvider({ fallbackElement, router, }: RouterProviderProps): React.ReactElement;
  13. export interface MemoryRouterProps {
  14. basename?: string;
  15. children?: React.ReactNode;
  16. initialEntries?: InitialEntry[];
  17. initialIndex?: number;
  18. }
  19. /**
  20. * A <Router> that stores all entries in memory.
  21. *
  22. * @see https://reactrouter.com/router-components/memory-router
  23. */
  24. export declare function MemoryRouter({ basename, children, initialEntries, initialIndex, }: MemoryRouterProps): React.ReactElement;
  25. export interface NavigateProps {
  26. to: To;
  27. replace?: boolean;
  28. state?: any;
  29. relative?: RelativeRoutingType;
  30. }
  31. /**
  32. * Changes the current location.
  33. *
  34. * Note: This API is mostly useful in React.Component subclasses that are not
  35. * able to use hooks. In functional components, we recommend you use the
  36. * `useNavigate` hook instead.
  37. *
  38. * @see https://reactrouter.com/components/navigate
  39. */
  40. export declare function Navigate({ to, replace, state, relative, }: NavigateProps): null;
  41. export interface OutletProps {
  42. context?: unknown;
  43. }
  44. /**
  45. * Renders the child route's element, if there is one.
  46. *
  47. * @see https://reactrouter.com/components/outlet
  48. */
  49. export declare function Outlet(props: OutletProps): React.ReactElement | null;
  50. export interface PathRouteProps {
  51. caseSensitive?: NonIndexRouteObject["caseSensitive"];
  52. path?: NonIndexRouteObject["path"];
  53. id?: NonIndexRouteObject["id"];
  54. loader?: NonIndexRouteObject["loader"];
  55. action?: NonIndexRouteObject["action"];
  56. hasErrorBoundary?: NonIndexRouteObject["hasErrorBoundary"];
  57. shouldRevalidate?: NonIndexRouteObject["shouldRevalidate"];
  58. handle?: NonIndexRouteObject["handle"];
  59. index?: false;
  60. children?: React.ReactNode;
  61. element?: React.ReactNode | null;
  62. errorElement?: React.ReactNode | null;
  63. }
  64. export interface LayoutRouteProps extends PathRouteProps {
  65. }
  66. export interface IndexRouteProps {
  67. caseSensitive?: IndexRouteObject["caseSensitive"];
  68. path?: IndexRouteObject["path"];
  69. id?: IndexRouteObject["id"];
  70. loader?: IndexRouteObject["loader"];
  71. action?: IndexRouteObject["action"];
  72. hasErrorBoundary?: IndexRouteObject["hasErrorBoundary"];
  73. shouldRevalidate?: IndexRouteObject["shouldRevalidate"];
  74. handle?: IndexRouteObject["handle"];
  75. index: true;
  76. children?: undefined;
  77. element?: React.ReactNode | null;
  78. errorElement?: React.ReactNode | null;
  79. }
  80. export declare type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;
  81. /**
  82. * Declares an element that should be rendered at a certain URL path.
  83. *
  84. * @see https://reactrouter.com/components/route
  85. */
  86. export declare function Route(_props: RouteProps): React.ReactElement | null;
  87. export interface RouterProps {
  88. basename?: string;
  89. children?: React.ReactNode;
  90. location: Partial<Location> | string;
  91. navigationType?: NavigationType;
  92. navigator: Navigator;
  93. static?: boolean;
  94. }
  95. /**
  96. * Provides location context for the rest of the app.
  97. *
  98. * Note: You usually won't render a <Router> directly. Instead, you'll render a
  99. * router that is more specific to your environment such as a <BrowserRouter>
  100. * in web browsers or a <StaticRouter> for server rendering.
  101. *
  102. * @see https://reactrouter.com/router-components/router
  103. */
  104. export declare function Router({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp, }: RouterProps): React.ReactElement | null;
  105. export interface RoutesProps {
  106. children?: React.ReactNode;
  107. location?: Partial<Location> | string;
  108. }
  109. /**
  110. * A container for a nested tree of <Route> elements that renders the branch
  111. * that best matches the current location.
  112. *
  113. * @see https://reactrouter.com/components/routes
  114. */
  115. export declare function Routes({ children, location, }: RoutesProps): React.ReactElement | null;
  116. export interface AwaitResolveRenderFunction {
  117. (data: Awaited<any>): React.ReactNode;
  118. }
  119. export interface AwaitProps {
  120. children: React.ReactNode | AwaitResolveRenderFunction;
  121. errorElement?: React.ReactNode;
  122. resolve: TrackedPromise | any;
  123. }
  124. /**
  125. * Component to use for rendering lazily loaded data from returning defer()
  126. * in a loader function
  127. */
  128. export declare function Await({ children, errorElement, resolve }: AwaitProps): JSX.Element;
  129. /**
  130. * Creates a route config from a React "children" object, which is usually
  131. * either a `<Route>` element or an array of them. Used internally by
  132. * `<Routes>` to create a route config from its children.
  133. *
  134. * @see https://reactrouter.com/utils/create-routes-from-children
  135. */
  136. export declare function createRoutesFromChildren(children: React.ReactNode, parentPath?: number[]): RouteObject[];
  137. /**
  138. * Renders the result of `matchRoutes()` into a React element.
  139. */
  140. export declare function renderMatches(matches: RouteMatch[] | null): React.ReactElement | null;
  141. /**
  142. * @private
  143. * Walk the route tree and add hasErrorBoundary if it's not provided, so that
  144. * users providing manual route arrays can just specify errorElement
  145. */
  146. export declare function enhanceManualRouteObjects(routes: RouteObject[]): RouteObject[];