React Router Cheatsheet

API Reference

Use this React Router reference while you build software engineering projects, review code, or refresh the syntax you reach for most.

How to Read This

Every v8 API is tagged with the modes it works in. F is Framework, D is Data, C is Declarative. Everything imports from react-router unless a row says otherwise, and route config helpers come from @react-router/dev/routes.

Components

Component	What it does	Modes
`Link`	Client side anchor, plus `prefetch` and `discover`	F D C
`NavLink`	`Link` that knows `isActive` and `isPending`	F D C
`Form`	Progressively enhanced form that posts to an action	F D
`Outlet`	Renders the matched child route	F D C
`Navigate`	Navigates on render	F D C
`Await`	Renders a streamed promise inside `Suspense`	F D
`ScrollRestoration`	Restores scroll position per history entry	F D
`Meta`	Renders collected `meta` output into the head	F
`Links`	Renders collected `links` output plus route CSS	F
`Scripts`	The hydration script, required for client routing	F
`PrefetchPageLinks`	Prefetch a route's assets imperatively	F
`Routes` / `Route`	JSX route declaration	C

Routers

API	Import from	Modes
`HydratedRouter`	`react-router/dom`	F
`ServerRouter`	`react-router`	F
`createBrowserRouter`	`react-router`	D
`createHashRouter`	`react-router`	D
`createMemoryRouter`	`react-router`	D
`createStaticRouter` / `createStaticHandler`	`react-router`	D
`RouterProvider`	`react-router/dom`	D
`StaticRouterProvider`	`react-router`	D
`BrowserRouter` / `HashRouter` / `MemoryRouter`	`react-router`	C
`StaticRouter` / `HistoryRouter` / `Router`	`react-router`	C

Framework mode wires its own routers through the Vite plugin, so you never call one of these unless you are writing a custom entry file.

Data Hooks

Hook	Returns	Modes
`useLoaderData`	This route's loader data	F D
`useRouteLoaderData(id)`	Another matched route's loader data	F D
`useActionData`	This route's action return value	F D
`useFetcher`	An independent loader and action caller	F D
`useFetchers`	Every in-flight fetcher	F D
`useSubmit`	Submit programmatically	F D
`useFormAction`	The resolved action URL for this route	F D
`useNavigation`	Global pending state and in-flight form data	F D
`useRevalidator`	Re-run every loader on the page	F D
`useMatches`	Every match, with `id`, `params`, `loaderData`, `handle`	F D
`useRouteError`	The error inside an error boundary	F D
`useAsyncValue`	The resolved value inside `Await`	F D
`useAsyncError`	The rejection inside `Await`	F D

In a Framework mode route module prefer the typed props (loaderData, actionData, params, matches) over these hooks. The hooks are for components nested below the route.

URL and Navigation Hooks

Hook	Returns	Modes
`useNavigate`	Imperative navigate function	F D C
`useLocation`	The current `Location`	F D C
`useParams`	Matched dynamic segments, all strings	F D C
`useSearchParams`	`[URLSearchParams, setter]`	F D C
`useHref(to)`	The resolved href, basename included	F D C
`useResolvedPath(to)`	What a relative `to` resolves to	F D C
`useMatch(pattern)`	A match object or `null`	F D C
`useNavigationType`	`POP`, `PUSH`, or `REPLACE`	F D C
`useOutlet`	The child route element	F D C
`useOutletContext`	Value passed via `<Outlet context>`	F D C
`useRoutes`	Build routes from objects, no JSX	F D C
`useInRouterContext`	Whether a router is above you	F D C
`useBeforeUnload`	Run something before the tab closes	F D C
`useLinkClickHandler`	Build a custom link component	F D C
`useBlocker`	Block a client side navigation	F D
`useViewTransitionState(to)`	Whether a View Transition is active	F D
`unstable_usePrompt`	Confirm dialog before leaving	F D
`unstable_useRouterState`	`active` and `pending` state in one hook	F D

Utilities

Utility	Does	Modes
`redirect(url, init?)`	Redirect from a loader or action	F D
`redirectDocument(url)`	Redirect with a full document load	F D
`replace(url)`	Redirect that replaces the history entry	F D
`data(value, init)`	Return or throw a value with status and headers	F D
`isRouteErrorResponse(e)`	Narrow an error to a route error response	F D
`createContext<T>()`	Create a typed middleware and loader context	F D
`RouterContextProvider`	The `context` object handed to handlers	F D
`createRoutesStub(routes)`	Test router context for unit tests	F D
`createRoutesFromElements`	Turn JSX routes into route objects	D
`createCookie(name, opts)`	A signed, typed cookie	F D
`createCookieSessionStorage`	Session stored in the cookie itself	F D
`createMemorySessionStorage`	Session in memory, dev and tests	F D
`href(path, params)`	Type safe URL from the route config	F
`generatePath(pattern, params)`	Fill params into a pattern	F D C
`matchPath(pattern, pathname)`	Match one pattern, or `null`	F D C
`matchRoutes(routes, location)`	The matched branch	F D C
`resolvePath(to, from)`	Resolve one path against another	F D C
`createPath` / `parsePath`	`Path` object to string and back	F D C
`createSearchParams(init)`	Build a `URLSearchParams`	F D C
`renderMatches(matches)`	Render a matched branch by hand	F D C

Route Config Helpers

From @react-router/dev/routes, used only in app/routes.ts.

Helper	Signature
`route`	`route(path, file, children?)`
`index`	`index(file)`
`layout`	`layout(file, children)`
`prefix`	`prefix(path, children)`
`relative`	`relative(dir)`, helpers with file paths relative to `dir`
`RouteConfig`	The type to `satisfies` on the default export
`flatRoutes`	From `@react-router/fs-routes`, file based conventions