components.d.ts 6.0 KB

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