react-router

Variables

• UNSAFE_DataRouterContext
• UNSAFE_DataRouterStateContext
• UNSAFE_LocationContext
• UNSAFE_NavigationContext
• UNSAFE_RouteContext

Functions

• Await()
• createMemoryRouter()
• createRoutesFromChildren()
• createRoutesFromElements()
• MemoryRouter()
• Navigate()
• Outlet()
• renderMatches()
• Route()
• Router()
• RouterProvider()
• Routes()
• UNSAFE_mapRouteProperties()
• UNSAFE_useRouteId()
• UNSAFE_useRoutesImpl()
• useActionData()
• useAsyncError()
• useAsyncValue()
• useBlocker()
• useHref()
• useInRouterContext()
• useLoaderData()
• useLocation()
• useMatch()
• useMatches()
• useNavigate()
• useNavigation()
• useNavigationType()
• useOutlet()
• useOutletContext()
• useParams()
• useResolvedPath()
• useRevalidator()
• useRouteError()
• useRouteLoaderData()
• useRoutes()

Interfaces

• AwaitProps

  • children
  • errorElement
  • resolve
• DataRouteMatch
• FutureConfig

  • v7_relativeSplatPath
  • v7_startTransition
• IndexRouteObject

  • action
  • caseSensitive
  • children
  • Component
  • element
  • ErrorBoundary
  • errorElement
  • handle
  • hasErrorBoundary
  • HydrateFallback
  • hydrateFallbackElement
  • id
  • index
  • lazy
  • loader
  • path
  • shouldRevalidate
• IndexRouteProps

  • action
  • caseSensitive
  • children
  • Component
  • element
  • ErrorBoundary
  • errorElement
  • handle
  • hasErrorBoundary
  • HydrateFallback
  • hydrateFallbackElement
  • id
  • index
  • lazy
  • loader
  • path
  • shouldRevalidate
• LayoutRouteProps
• MemoryRouterProps

  • basename
  • children
  • future
  • initialEntries
  • initialIndex
• NavigateFunction
• NavigateOptions

  • preventScrollReset
  • relative
  • replace
  • state
  • unstable_flushSync
  • unstable_viewTransition
• NavigateProps

  • relative
  • replace
  • state
  • to
• Navigator

  • createHref
  • encodeLocation
  • go
  • push()
  • replace()
• NonIndexRouteObject

  • action
  • caseSensitive
  • children
  • Component
  • element
  • ErrorBoundary
  • errorElement
  • handle
  • hasErrorBoundary
  • HydrateFallback
  • hydrateFallbackElement
  • id
  • index
  • lazy
  • loader
  • path
  • shouldRevalidate
• OutletProps

  • context
• PathRouteProps

  • action
  • caseSensitive
  • children
  • Component
  • element
  • ErrorBoundary
  • errorElement
  • handle
  • hasErrorBoundary
  • HydrateFallback
  • hydrateFallbackElement
  • id
  • index
  • lazy
  • loader
  • path
  • shouldRevalidate
• RouteMatch
• RouterProps

  • basename
  • children
  • future
  • location
  • navigationType
  • navigator
  • static
• RouterProviderProps

  • fallbackElement
  • future
  • router
• RoutesProps

  • children
  • location
• unstable_PatchRoutesOnNavigationFunction

Type Aliases

• DataRouteObject
• Hash
• Pathname
• RouteObject
• RouteProps
• Search

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>;

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;
        unstable_patchRoutesOnNavigation?: unstable_PatchRoutesOnNavigationFunction;
    }
) => 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

function Navigate

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

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

type Search = string;