react-router-dom

Variables

• Form
• Link
• NavLink
• UNSAFE_FetchersContext
• UNSAFE_ViewTransitionContext

Functions

• BrowserRouter()
• createBrowserRouter()
• createHashRouter()
• createSearchParams()
• HashRouter()
• RouterProvider()
• ScrollRestoration()
• UNSAFE_useScrollRestoration()
• unstable_HistoryRouter()
• unstable_usePrompt()
• unstable_useViewTransitionState()
• useBeforeUnload()
• useFetcher()
• useFetchers()
• useFormAction()
• useLinkClickHandler()
• useSearchParams()
• useSubmit()

Interfaces

• BrowserRouterProps

  • basename
  • children
  • future
  • window
• FetcherFormProps

  • action
  • encType
  • method
  • onSubmit
  • preventScrollReset
  • relative
• FetcherSubmitFunction
• FormProps

  • fetcherKey
  • navigate
  • reloadDocument
  • replace
  • state
  • unstable_viewTransition
• HashRouterProps

  • basename
  • children
  • future
  • window
• HistoryRouterProps

  • basename
  • children
  • future
  • history
• LinkProps

  • preventScrollReset
  • relative
  • reloadDocument
  • replace
  • state
  • to
  • unstable_viewTransition
• NavLinkProps

  • caseSensitive
  • children
  • className
  • end
  • style
• ScrollRestorationProps

  • getKey
  • storageKey
• SubmitFunction
• SubmitOptions

  • action
  • encType
  • fetcherKey
  • method
  • navigate
  • preventScrollReset
  • relative
  • replace
  • state
  • unstable_flushSync
  • unstable_viewTransition

Type Aliases

• FetcherWithComponents
• ParamKeyValuePair
• SetURLSearchParams
• URLSearchParamsInit

Namespaces

• global

  • Document
• ScrollRestoration

  • displayName
• unstable_HistoryRouter

  • displayName

variable Form

const Form: React.ForwardRefExoticComponent<any>;

• A @remix-run/router-aware <form>. It behaves like a normal form except that the interaction with the server is with fetch instead of new document requests, allowing components to add nicer UX to the page as the form is submitted and returns with data.

variable Link

const Link: React.ForwardRefExoticComponent<any>;

• The public API for rendering a history-aware <a>.

variable NavLink

const NavLink: React.ForwardRefExoticComponent<any>;

• A <Link> wrapper that knows if it's "active" or not.

variable UNSAFE_FetchersContext

const UNSAFE_FetchersContext: React.Context<FetchersContextObject>;

variable UNSAFE_ViewTransitionContext

const UNSAFE_ViewTransitionContext: React.Context<ViewTransitionContextObject>;

function BrowserRouter

BrowserRouter: ({
    basename,
    children,
    future,
    window,
}: BrowserRouterProps) => React.JSX.Element;

• A <Router> for use in web browsers. Provides the cleanest URLs.

function createBrowserRouter

createBrowserRouter: (
    routes: RouteObject[],
    opts?: DOMRouterOpts
) => RemixRouter;

function createHashRouter

createHashRouter: (routes: RouteObject[], opts?: DOMRouterOpts) => RemixRouter;

function createSearchParams

createSearchParams: (init?: URLSearchParamsInit) => URLSearchParams;

• Creates a URLSearchParams object using the given initializer.

  This is identical to new URLSearchParams(init) except it also supports arrays as values in the object form of the initializer instead of just strings. This is convenient when you need multiple values for a given key, but don't want to use an array initializer.

  For example, instead of:

  let searchParams = new URLSearchParams([ ['sort', 'name'], ['sort', 'price'] ]);

  you can do:

  let searchParams = createSearchParams({ sort: ['name', 'price'] });

function HashRouter

HashRouter: ({
    basename,
    children,
    future,
    window,
}: HashRouterProps) => React.JSX.Element;

• A <Router> for use in web browsers. Stores the location in the hash portion of the URL so it is not sent to the server.

function RouterProvider

RouterProvider: ({
    fallbackElement,
    router,
    future,
}: RouterProviderProps) => React.ReactElement;

• Given a Remix Router instance, render the appropriate UI

function ScrollRestoration

ScrollRestoration: typeof ScrollRestoration;

• This component will emulate the browser's scroll restoration on location changes.

function UNSAFE_useScrollRestoration

UNSAFE_useScrollRestoration: ({
    getKey,
    storageKey,
}?: {
    getKey?: GetScrollRestorationKeyFunction;
    storageKey?: string;
}) => void;

• When rendered inside a RouterProvider, will restore scroll positions on navigations

function unstable_HistoryRouter

unstable_HistoryRouter: typeof HistoryRouter;

• A <Router> that accepts a pre-instantiated history object. It's important to note that using your own history object is highly discouraged and may add two versions of the history library to your bundles unless you use the same version of the history library that React Router uses internally.

function unstable_usePrompt

unstable_usePrompt: ({
    when,
    message,
}: {
    when: boolean | BlockerFunction;
    message: string;
}) => void;

• Wrapper around useBlocker to show a window.confirm prompt to users instead of building a custom UI with useBlocker.

  Warning: This has *a lot of rough edges* and behaves very differently (and very incorrectly in some cases) across browsers if user click addition back/forward navigations while the confirm is open. Use at your own risk.

function unstable_useViewTransitionState

unstable_useViewTransitionState: (
    to: To,
    opts?: { relative?: RelativeRoutingType }
) => boolean;

• Return a boolean indicating if there is an active view transition to the given href. You can use this value to render CSS classes or viewTransitionName styles onto your elements

  Parameter href

  The destination href

  Parameter

  [opts.relative] Relative routing type ("route" | "path")

function useBeforeUnload

useBeforeUnload: (
    callback: (event: BeforeUnloadEvent) => any,
    options?: { capture?: boolean }
) => void;

• Setup a callback to be fired on the window's beforeunload event. This is useful for saving some data to window.localStorage just before the page refreshes.

  Note: The callback argument should be a function created with React.useCallback().

function useFetcher

useFetcher: <TData = any>({
    key,
}?: {
    key?: string;
}) => FetcherWithComponents<TData>;

• Interacts with route loaders and actions without causing a navigation. Great for any interaction that stays on the same page.

function useFetchers

useFetchers: () => (Fetcher & { key: string })[];

• Provides all fetchers currently on the page. Useful for layouts and parent routes that need to provide pending/optimistic UI regarding the fetch.

function useFormAction

useFormAction: (
    action?: string,
    { relative }?: { relative?: RelativeRoutingType }
) => string;

function useLinkClickHandler

useLinkClickHandler: <E extends Element = HTMLAnchorElement>(
    to: To,
    {
        target,
        replace: replaceProp,
        state,
        preventScrollReset,
        relative,
        unstable_viewTransition,
    }?: {
        target?: React.HTMLAttributeAnchorTarget;
        replace?: boolean;
        state?: any;
        preventScrollReset?: boolean;
        relative?: RelativeRoutingType;
        unstable_viewTransition?: boolean;
    }
) => (event: React.MouseEvent<E, MouseEvent>) => void;

• Handles the click behavior for router <Link> components. This is useful if you need to create custom <Link> components with the same click behavior we use in our exported <Link>.

function useSearchParams

useSearchParams: (
    defaultInit?: URLSearchParamsInit
) => [URLSearchParams, SetURLSearchParams];

• A convenient wrapper for reading and writing search parameters via the URLSearchParams interface.

function useSubmit

useSubmit: () => SubmitFunction;

• Returns a function that may be used to programmatically submit a form (or some arbitrary data) to the server.

type FetcherWithComponents

type FetcherWithComponents<TData> = Fetcher<TData> & {
    Form: React.ForwardRefExoticComponent<
        FetcherFormProps & React.RefAttributes<HTMLFormElement>
    >;
    submit: FetcherSubmitFunction;
    load: (
        href: string,
        opts?: {
            unstable_flushSync?: boolean;
        }
    ) => void;
};

type ParamKeyValuePair

type ParamKeyValuePair = [string, string];

type SetURLSearchParams

type SetURLSearchParams = (
    nextInit?:
        | URLSearchParamsInit
        | ((prev: URLSearchParams) => URLSearchParamsInit),
    navigateOpts?: NavigateOptions
) => void;

type URLSearchParamsInit

type URLSearchParamsInit =
    | string
    | ParamKeyValuePair[]
    | Record<string, string | string[]>
    | URLSearchParams;