react-router

  • Version 6.23.1
  • Published
  • 810 kB
  • 1 dependency
  • MIT license

Install

npm i react-router
yarn add react-router
pnpm add react-router

Overview

Declarative routing for React

Index

Variables

Functions

Interfaces

Type Aliases

Variables

variable UNSAFE_DataRouterContext

const UNSAFE_DataRouterContext: React.Context<DataRouterContextObject>;

    variable UNSAFE_DataRouterStateContext

    const UNSAFE_DataRouterStateContext: React.Context<any>;

      variable UNSAFE_LocationContext

      const UNSAFE_LocationContext: React.Context<LocationContextObject>;

        variable UNSAFE_NavigationContext

        const UNSAFE_NavigationContext: React.Context<NavigationContextObject>;

          variable UNSAFE_RouteContext

          const UNSAFE_RouteContext: React.Context<RouteContextObject>;

            Functions

            function Await

            Await: ({ children, errorElement, resolve }: AwaitProps) => React.JSX.Element;
            • Component to use for rendering lazily loaded data from returning defer() in a loader function

            function createMemoryRouter

            createMemoryRouter: (
            routes: RouteObject[],
            opts?: {
            basename?: string;
            future?: Partial<Omit<RouterFutureConfig, 'v7_prependBasename'>>;
            hydrationData?: HydrationState;
            initialEntries?: InitialEntry[];
            initialIndex?: number;
            unstable_dataStrategy?: unstable_DataStrategyFunction;
            }
            ) => RemixRouter;

              function createRoutesFromChildren

              createRoutesFromChildren: (
              children: React.ReactNode,
              parentPath?: number[]
              ) => RouteObject[];
              • Creates a route config from a React "children" object, which is usually either a <Route> element or an array of them. Used internally by <Routes> to create a route config from its children.

                See Also

                • https://reactrouter.com/utils/create-routes-from-children

              function createRoutesFromElements

              createRoutesFromElements: (
              children: React.ReactNode,
              parentPath?: number[]
              ) => RouteObject[];
              • Creates a route config from a React "children" object, which is usually either a <Route> element or an array of them. Used internally by <Routes> to create a route config from its children.

                See Also

                • https://reactrouter.com/utils/create-routes-from-children

              function MemoryRouter

              MemoryRouter: ({
              basename,
              children,
              initialEntries,
              initialIndex,
              future,
              }: MemoryRouterProps) => React.ReactElement;
              • A <Router> that stores all entries in memory.

                See Also

                • https://reactrouter.com/router-components/memory-router

              Navigate: ({ to, replace, state, relative }: NavigateProps) => null;
              • Changes the current location.

                Note: This API is mostly useful in React.Component subclasses that are not able to use hooks. In functional components, we recommend you use the useNavigate hook instead.

                See Also

                • https://reactrouter.com/components/navigate

              function Outlet

              Outlet: (props: OutletProps) => React.ReactElement | null;
              • Renders the child route's element, if there is one.

                See Also

                • https://reactrouter.com/components/outlet

              function renderMatches

              renderMatches: (matches: RouteMatch[] | null) => React.ReactElement | null;
              • Renders the result of matchRoutes() into a React element.

              function Route

              Route: (_props: RouteProps) => React.ReactElement | null;
              • Declares an element that should be rendered at a certain URL path.

                See Also

                • https://reactrouter.com/components/route

              function Router

              Router: ({
              basename: basenameProp,
              children,
              location: locationProp,
              navigationType,
              navigator,
              static: staticProp,
              future,
              }: RouterProps) => React.ReactElement | null;
              • Provides location context for the rest of the app.

                Note: You usually won't render a <Router> directly. Instead, you'll render a router that is more specific to your environment such as a <BrowserRouter> in web browsers or a <StaticRouter> for server rendering.

                See Also

                • https://reactrouter.com/router-components/router

              function RouterProvider

              RouterProvider: ({
              fallbackElement,
              router,
              future,
              }: RouterProviderProps) => React.ReactElement;
              • Given a Remix Router instance, render the appropriate UI

              function Routes

              Routes: ({ children, location }: RoutesProps) => React.ReactElement | null;
              • A container for a nested tree of <Route> elements that renders the branch that best matches the current location.

                See Also

                • https://reactrouter.com/components/routes

              function UNSAFE_mapRouteProperties

              UNSAFE_mapRouteProperties: (
              route: RouteObject
              ) => Partial<RouteObject> & { hasErrorBoundary: boolean };

                function UNSAFE_useRouteId

                UNSAFE_useRouteId: () => string;
                • Returns the ID for the nearest contextual route

                function UNSAFE_useRoutesImpl

                UNSAFE_useRoutesImpl: (
                routes: RouteObject[],
                locationArg?: Partial<Location> | string,
                dataRouterState?: RemixRouter,
                future?: RemixRouter
                ) => React.ReactElement | null;

                  function useActionData

                  useActionData: () => unknown;
                  • Returns the action data for the nearest ancestor Route action

                  function useAsyncError

                  useAsyncError: () => unknown;
                  • Returns the error from the nearest ancestor <Await /> value

                  function useAsyncValue

                  useAsyncValue: () => unknown;
                  • Returns the happy-path data from the nearest ancestor <Await /> value

                  function useBlocker

                  useBlocker: (shouldBlock: boolean | BlockerFunction) => Blocker;
                  • Allow the application to block navigations within the SPA and present the user a confirmation dialog to confirm the navigation. Mostly used to avoid using half-filled form data. This does not handle hard-reloads or cross-origin navigations.

                  function useHref

                  useHref: (to: To, { relative }?: { relative?: RelativeRoutingType }) => string;
                  • Returns the full href for the given "to" value. This is useful for building custom links that are also accessible and preserve right-click behavior.

                    See Also

                    • https://reactrouter.com/hooks/use-href

                  function useInRouterContext

                  useInRouterContext: () => boolean;
                  • Returns true if this component is a descendant of a <Router>.

                    See Also

                    • https://reactrouter.com/hooks/use-in-router-context

                  function useLoaderData

                  useLoaderData: () => unknown;
                  • Returns the loader data for the nearest ancestor Route loader

                  function useLocation

                  useLocation: () => Location;
                  • Returns the current location object, which represents the current URL in web browsers.

                    Note: If you're using this it may mean you're doing some of your own "routing" in your app, and we'd like to know what your use case is. We may be able to provide something higher-level to better suit your needs.

                    See Also

                    • https://reactrouter.com/hooks/use-location

                  function useMatch

                  useMatch: <ParamKey extends ParamParseKey<Path>, Path extends string>(
                  pattern: PathPattern<Path> | Path
                  ) => PathMatch<ParamKey> | null;
                  • Returns a PathMatch object if the given pattern matches the current URL. This is useful for components that need to know "active" state, e.g. <NavLink>.

                    See Also

                    • https://reactrouter.com/hooks/use-match

                  function useMatches

                  useMatches: () => UIMatch[];
                  • Returns the active route matches, useful for accessing loaderData for parent/child routes or the route "handle" property

                  function useNavigate

                  useNavigate: () => NavigateFunction;
                  • Returns an imperative method for changing the location. Used by <Link>s, but may also be used by other elements to change the location.

                    See Also

                    • https://reactrouter.com/hooks/use-navigate

                  function useNavigation

                  useNavigation: () => any;
                  • Returns the current navigation, defaulting to an "idle" navigation when no navigation is in progress

                  function useNavigationType

                  useNavigationType: () => NavigationType;
                  • Returns the current navigation action which describes how the router came to the current location, either by a pop, push, or replace on the history stack.

                    See Also

                    • https://reactrouter.com/hooks/use-navigation-type

                  function useOutlet

                  useOutlet: (context?: unknown) => React.ReactElement | null;
                  • Returns the element for the child route at this level of the route hierarchy. Used internally by <Outlet> to render child routes.

                    See Also

                    • https://reactrouter.com/hooks/use-outlet

                  function useOutletContext

                  useOutletContext: <Context = unknown>() => Context;
                  • Returns the context (if provided) for the child route at this level of the route hierarchy.

                    See Also

                    • https://reactrouter.com/hooks/use-outlet-context

                  function useParams

                  useParams: <
                  ParamsOrKey extends string | Record<string, string> = string
                  >() => Readonly<
                  [ParamsOrKey] extends [string] ? Params<ParamsOrKey> : Partial<ParamsOrKey>
                  >;
                  • Returns an object of key/value pairs of the dynamic params from the current URL that were matched by the route path.

                    See Also

                    • https://reactrouter.com/hooks/use-params

                  function useResolvedPath

                  useResolvedPath: (
                  to: To,
                  { relative }?: { relative?: RelativeRoutingType }
                  ) => Path;
                  • Resolves the pathname of the given to value against the current location.

                    See Also

                    • https://reactrouter.com/hooks/use-resolved-path

                  function useRevalidator

                  useRevalidator: () => { revalidate: () => void; state: RevalidationState };
                  • Returns a revalidate function for manually triggering revalidation, as well as the current state of any manual revalidations

                  function useRouteError

                  useRouteError: () => unknown;
                  • Returns the nearest ancestor Route error, which could be a loader/action error or a render error. This is intended to be called from your ErrorBoundary/errorElement to display a proper error message.

                  function useRouteLoaderData

                  useRouteLoaderData: (routeId: string) => unknown;
                  • Returns the loaderData for the given routeId

                  function useRoutes

                  useRoutes: (
                  routes: RouteObject[],
                  locationArg?: Partial<Location> | string
                  ) => React.ReactElement | null;
                  • Returns the element of the route that matched the current location, prepared with the correct context to render the remainder of the route tree. Route elements in the tree must render an <Outlet> to render their child route's element.

                    See Also

                    • https://reactrouter.com/hooks/use-routes

                  Interfaces

                  interface AwaitProps

                  interface AwaitProps {}

                    property children

                    children: React.ReactNode | AwaitResolveRenderFunction;

                      property errorElement

                      errorElement?: React.ReactNode;

                        property resolve

                        resolve: TrackedPromise | any;

                          interface DataRouteMatch

                          interface DataRouteMatch extends RouteMatch<string, DataRouteObject> {}

                            interface FutureConfig

                            interface FutureConfig {}

                              property v7_relativeSplatPath

                              v7_relativeSplatPath: boolean;

                                property v7_startTransition

                                v7_startTransition: boolean;

                                  interface IndexRouteObject

                                  interface IndexRouteObject {}

                                    property action

                                    action?: AgnosticIndexRouteObject['action'];

                                      property caseSensitive

                                      caseSensitive?: AgnosticIndexRouteObject['caseSensitive'];

                                        property children

                                        children?: undefined;

                                          property Component

                                          Component?: React.ComponentType | null;

                                            property element

                                            element?: React.ReactNode | null;

                                              property ErrorBoundary

                                              ErrorBoundary?: React.ComponentType | null;

                                                property errorElement

                                                errorElement?: React.ReactNode | null;

                                                  property handle

                                                  handle?: AgnosticIndexRouteObject['handle'];

                                                    property hasErrorBoundary

                                                    hasErrorBoundary?: AgnosticIndexRouteObject['hasErrorBoundary'];

                                                      property HydrateFallback

                                                      HydrateFallback?: React.ComponentType | null;

                                                        property hydrateFallbackElement

                                                        hydrateFallbackElement?: React.ReactNode | null;

                                                          property id

                                                          id?: AgnosticIndexRouteObject['id'];

                                                            property index

                                                            index: true;

                                                              property lazy

                                                              lazy?: LazyRouteFunction<RouteObject>;

                                                                property loader

                                                                loader?: AgnosticIndexRouteObject['loader'];

                                                                  property path

                                                                  path?: AgnosticIndexRouteObject['path'];

                                                                    property shouldRevalidate

                                                                    shouldRevalidate?: AgnosticIndexRouteObject['shouldRevalidate'];

                                                                      interface IndexRouteProps

                                                                      interface IndexRouteProps {}

                                                                        property action

                                                                        action?: IndexRouteObject['action'];

                                                                          property caseSensitive

                                                                          caseSensitive?: IndexRouteObject['caseSensitive'];

                                                                            property children

                                                                            children?: undefined;

                                                                              property Component

                                                                              Component?: React.ComponentType | null;

                                                                                property element

                                                                                element?: React.ReactNode | null;

                                                                                  property ErrorBoundary

                                                                                  ErrorBoundary?: React.ComponentType | null;

                                                                                    property errorElement

                                                                                    errorElement?: React.ReactNode | null;

                                                                                      property handle

                                                                                      handle?: IndexRouteObject['handle'];

                                                                                        property hasErrorBoundary

                                                                                        hasErrorBoundary?: IndexRouteObject['hasErrorBoundary'];

                                                                                          property HydrateFallback

                                                                                          HydrateFallback?: React.ComponentType | null;

                                                                                            property hydrateFallbackElement

                                                                                            hydrateFallbackElement?: React.ReactNode | null;

                                                                                              property id

                                                                                              id?: IndexRouteObject['id'];

                                                                                                property index

                                                                                                index: true;

                                                                                                  property lazy

                                                                                                  lazy?: LazyRouteFunction<IndexRouteObject>;

                                                                                                    property loader

                                                                                                    loader?: IndexRouteObject['loader'];

                                                                                                      property path

                                                                                                      path?: IndexRouteObject['path'];

                                                                                                        property shouldRevalidate

                                                                                                        shouldRevalidate?: IndexRouteObject['shouldRevalidate'];

                                                                                                          interface LayoutRouteProps

                                                                                                          interface LayoutRouteProps extends PathRouteProps {}

                                                                                                            interface MemoryRouterProps

                                                                                                            interface MemoryRouterProps {}

                                                                                                              property basename

                                                                                                              basename?: string;

                                                                                                                property children

                                                                                                                children?: React.ReactNode;

                                                                                                                  property future

                                                                                                                  future?: Partial<FutureConfig>;

                                                                                                                    property initialEntries

                                                                                                                    initialEntries?: InitialEntry[];

                                                                                                                      property initialIndex

                                                                                                                      initialIndex?: number;
                                                                                                                        interface NavigateFunction {}
                                                                                                                        • The interface for the navigate() function returned from useNavigate().

                                                                                                                        (to: To, options?: NavigateOptions): void;
                                                                                                                          (delta: number): void;
                                                                                                                            interface NavigateOptions {}
                                                                                                                              preventScrollReset?: boolean;
                                                                                                                                relative?: RelativeRoutingType;
                                                                                                                                  replace?: boolean;
                                                                                                                                    state?: any;
                                                                                                                                      unstable_flushSync?: boolean;
                                                                                                                                        unstable_viewTransition?: boolean;
                                                                                                                                          interface NavigateProps {}
                                                                                                                                            relative?: RelativeRoutingType;
                                                                                                                                              replace?: boolean;
                                                                                                                                                state?: any;
                                                                                                                                                  to: To;
                                                                                                                                                    interface Navigator {}
                                                                                                                                                    • A Navigator is a "location changer"; it's how you get to different locations.

                                                                                                                                                      Every history instance conforms to the Navigator interface, but the distinction is useful primarily when it comes to the low-level <Router> API where both the location and a navigator must be provided separately in order to avoid "tearing" that may occur in a suspense-enabled app if the action and/or location were to be read directly from the history instance.

                                                                                                                                                    createHref: History['createHref'];
                                                                                                                                                      encodeLocation?: History['encodeLocation'];
                                                                                                                                                        go: History['go'];
                                                                                                                                                          push: (to: To, state?: any, opts?: NavigateOptions) => void;
                                                                                                                                                            replace: (to: To, state?: any, opts?: NavigateOptions) => void;

                                                                                                                                                              interface NonIndexRouteObject

                                                                                                                                                              interface NonIndexRouteObject {}

                                                                                                                                                                property action

                                                                                                                                                                action?: AgnosticNonIndexRouteObject['action'];

                                                                                                                                                                  property caseSensitive

                                                                                                                                                                  caseSensitive?: AgnosticNonIndexRouteObject['caseSensitive'];

                                                                                                                                                                    property children

                                                                                                                                                                    children?: RouteObject[];

                                                                                                                                                                      property Component

                                                                                                                                                                      Component?: React.ComponentType | null;

                                                                                                                                                                        property element

                                                                                                                                                                        element?: React.ReactNode | null;

                                                                                                                                                                          property ErrorBoundary

                                                                                                                                                                          ErrorBoundary?: React.ComponentType | null;

                                                                                                                                                                            property errorElement

                                                                                                                                                                            errorElement?: React.ReactNode | null;

                                                                                                                                                                              property handle

                                                                                                                                                                              handle?: AgnosticNonIndexRouteObject['handle'];

                                                                                                                                                                                property hasErrorBoundary

                                                                                                                                                                                hasErrorBoundary?: AgnosticNonIndexRouteObject['hasErrorBoundary'];

                                                                                                                                                                                  property HydrateFallback

                                                                                                                                                                                  HydrateFallback?: React.ComponentType | null;

                                                                                                                                                                                    property hydrateFallbackElement

                                                                                                                                                                                    hydrateFallbackElement?: React.ReactNode | null;

                                                                                                                                                                                      property id

                                                                                                                                                                                      id?: AgnosticNonIndexRouteObject['id'];

                                                                                                                                                                                        property index

                                                                                                                                                                                        index?: false;

                                                                                                                                                                                          property lazy

                                                                                                                                                                                          lazy?: LazyRouteFunction<RouteObject>;

                                                                                                                                                                                            property loader

                                                                                                                                                                                            loader?: AgnosticNonIndexRouteObject['loader'];

                                                                                                                                                                                              property path

                                                                                                                                                                                              path?: AgnosticNonIndexRouteObject['path'];

                                                                                                                                                                                                property shouldRevalidate

                                                                                                                                                                                                shouldRevalidate?: AgnosticNonIndexRouteObject['shouldRevalidate'];

                                                                                                                                                                                                  interface OutletProps

                                                                                                                                                                                                  interface OutletProps {}

                                                                                                                                                                                                    property context

                                                                                                                                                                                                    context?: unknown;

                                                                                                                                                                                                      interface PathRouteProps

                                                                                                                                                                                                      interface PathRouteProps {}

                                                                                                                                                                                                        property action

                                                                                                                                                                                                        action?: NonIndexRouteObject['action'];

                                                                                                                                                                                                          property caseSensitive

                                                                                                                                                                                                          caseSensitive?: NonIndexRouteObject['caseSensitive'];

                                                                                                                                                                                                            property children

                                                                                                                                                                                                            children?: React.ReactNode;

                                                                                                                                                                                                              property Component

                                                                                                                                                                                                              Component?: React.ComponentType | null;

                                                                                                                                                                                                                property element

                                                                                                                                                                                                                element?: React.ReactNode | null;

                                                                                                                                                                                                                  property ErrorBoundary

                                                                                                                                                                                                                  ErrorBoundary?: React.ComponentType | null;

                                                                                                                                                                                                                    property errorElement

                                                                                                                                                                                                                    errorElement?: React.ReactNode | null;

                                                                                                                                                                                                                      property handle

                                                                                                                                                                                                                      handle?: NonIndexRouteObject['handle'];

                                                                                                                                                                                                                        property hasErrorBoundary

                                                                                                                                                                                                                        hasErrorBoundary?: NonIndexRouteObject['hasErrorBoundary'];

                                                                                                                                                                                                                          property HydrateFallback

                                                                                                                                                                                                                          HydrateFallback?: React.ComponentType | null;

                                                                                                                                                                                                                            property hydrateFallbackElement

                                                                                                                                                                                                                            hydrateFallbackElement?: React.ReactNode | null;

                                                                                                                                                                                                                              property id

                                                                                                                                                                                                                              id?: NonIndexRouteObject['id'];

                                                                                                                                                                                                                                property index

                                                                                                                                                                                                                                index?: false;

                                                                                                                                                                                                                                  property lazy

                                                                                                                                                                                                                                  lazy?: LazyRouteFunction<NonIndexRouteObject>;

                                                                                                                                                                                                                                    property loader

                                                                                                                                                                                                                                    loader?: NonIndexRouteObject['loader'];

                                                                                                                                                                                                                                      property path

                                                                                                                                                                                                                                      path?: NonIndexRouteObject['path'];

                                                                                                                                                                                                                                        property shouldRevalidate

                                                                                                                                                                                                                                        shouldRevalidate?: NonIndexRouteObject['shouldRevalidate'];

                                                                                                                                                                                                                                          interface RouteMatch

                                                                                                                                                                                                                                          interface RouteMatch<
                                                                                                                                                                                                                                          ParamKey extends string = string,
                                                                                                                                                                                                                                          RouteObjectType extends RouteObject = RouteObject
                                                                                                                                                                                                                                          > extends AgnosticRouteMatch<ParamKey, RouteObjectType> {}

                                                                                                                                                                                                                                            interface RouterProps

                                                                                                                                                                                                                                            interface RouterProps {}

                                                                                                                                                                                                                                              property basename

                                                                                                                                                                                                                                              basename?: string;

                                                                                                                                                                                                                                                property children

                                                                                                                                                                                                                                                children?: React.ReactNode;

                                                                                                                                                                                                                                                  property future

                                                                                                                                                                                                                                                  future?: Partial<Pick<FutureConfig, 'v7_relativeSplatPath'>>;

                                                                                                                                                                                                                                                    property location

                                                                                                                                                                                                                                                    location: Partial<Location> | string;

                                                                                                                                                                                                                                                      property navigationType

                                                                                                                                                                                                                                                      navigationType?: NavigationType;

                                                                                                                                                                                                                                                        property navigator

                                                                                                                                                                                                                                                        navigator: Navigator;

                                                                                                                                                                                                                                                          property static

                                                                                                                                                                                                                                                          static?: boolean;

                                                                                                                                                                                                                                                            interface RouterProviderProps

                                                                                                                                                                                                                                                            interface RouterProviderProps {}

                                                                                                                                                                                                                                                              property fallbackElement

                                                                                                                                                                                                                                                              fallbackElement?: React.ReactNode;

                                                                                                                                                                                                                                                                property future

                                                                                                                                                                                                                                                                future?: Partial<Pick<FutureConfig, 'v7_startTransition'>>;

                                                                                                                                                                                                                                                                  property router

                                                                                                                                                                                                                                                                  router: RemixRouter;

                                                                                                                                                                                                                                                                    interface RoutesProps

                                                                                                                                                                                                                                                                    interface RoutesProps {}

                                                                                                                                                                                                                                                                      property children

                                                                                                                                                                                                                                                                      children?: React.ReactNode;

                                                                                                                                                                                                                                                                        property location

                                                                                                                                                                                                                                                                        location?: Partial<Location> | string;

                                                                                                                                                                                                                                                                          Type Aliases

                                                                                                                                                                                                                                                                          type DataRouteObject

                                                                                                                                                                                                                                                                          type DataRouteObject = RouteObject & {
                                                                                                                                                                                                                                                                          children?: DataRouteObject[];
                                                                                                                                                                                                                                                                          id: string;
                                                                                                                                                                                                                                                                          };

                                                                                                                                                                                                                                                                            type Hash

                                                                                                                                                                                                                                                                            type Hash = string;

                                                                                                                                                                                                                                                                              type Pathname

                                                                                                                                                                                                                                                                              type Pathname = string;

                                                                                                                                                                                                                                                                                type RouteObject

                                                                                                                                                                                                                                                                                type RouteObject = IndexRouteObject | NonIndexRouteObject;

                                                                                                                                                                                                                                                                                  type RouteProps

                                                                                                                                                                                                                                                                                  type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;
                                                                                                                                                                                                                                                                                    type Search = string;

                                                                                                                                                                                                                                                                                      Package Files (4)

                                                                                                                                                                                                                                                                                      Dependencies (1)

                                                                                                                                                                                                                                                                                      Dev Dependencies (2)

                                                                                                                                                                                                                                                                                      Peer Dependencies (1)

                                                                                                                                                                                                                                                                                      Badge

                                                                                                                                                                                                                                                                                      To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                                                                                                                                      You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-router.

                                                                                                                                                                                                                                                                                      • Markdown
                                                                                                                                                                                                                                                                                        [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-router)
                                                                                                                                                                                                                                                                                      • HTML
                                                                                                                                                                                                                                                                                        <a href="https://www.jsdocs.io/package/react-router"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>