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.

Hooks Reference

Hook	Returns	Mode
`useNavigate`	A function to navigate imperatively	All
`useLocation`	The current `Location`	All
`useParams`	The matched dynamic segments	All
`useSearchParams`	`[URLSearchParams, setter]`	All
`useMatch(pattern)`	A match object or `null`	All
`useMatches`	Every matched route in the branch	Data
`useHref(to)`	The resolved href, with basename	All
`useResolvedPath(to)`	What a relative `to` resolves to	All
`useInRouterContext`	Whether a Router is above you	All
`useNavigationType`	`POP`, `PUSH`, or `REPLACE`	All
`useOutlet`	The child route element	All
`useOutletContext`	Context passed via `<Outlet context>`	All
`useRoutes`	Build routes from an object, no JSX	All
`useLoaderData`	This route's loader data	Data
`useRouteLoaderData(id)`	Another route's loader data	Data
`useActionData`	This route's action return value	Data
`useNavigation`	Global pending state	Data
`useFetcher`	An independent loader/action caller	Data
`useFetchers`	Every in-flight fetcher	Data
`useSubmit`	Submit programmatically	Data
`useFormAction`	The resolved action URL for this route	Data
`useRevalidator`	Manually re-run loaders	Data
`useRouteError`	The error in an error boundary	Data
`useBlocker`	Block a client-side navigation	Data
`useBeforeUnload`	Run something before the tab closes	Data
`useViewTransitionState(to)`	Whether a View Transition to `to` is active	Data

Components Reference

Component	Purpose
`<BrowserRouter>` etc.	Provide a router (declarative mode)
`<RouterProvider router>`	Provide a data router
`<Routes>` / `<Route>`	Declare routes as JSX
`<Outlet>`	Render the matched child route
`<Link>`	A client-side anchor
`<NavLink>`	A `Link` that knows if it is active
`<Navigate>`	Navigate on render
`<Form>`	A form that posts to a route action
`<Await>`	Render a streamed promise
`<ScrollRestoration>`	Restore scroll position per history entry
`<Meta>` / `<Links>` / `<Scripts>`	Framework mode document tags
`<ScrollRestoration>` in root	Framework mode root template

Outlet Context

Pass values from a layout to whichever child is rendered, without a separate context provider.

function DashboardLayout() {
  const [tab, setTab] = useState("all");
  return <Outlet context={{ tab, setTab }} />;
}

function Child() {
  const { tab, setTab } = useOutletContext();
}

// Typed
type DashContext = { tab: string; setTab: (t: string) => void };
const { tab } = useOutletContext<DashContext>();

Prefer a root loader plus useRouteLoaderData for server data, and useOutletContext for client-only UI state a layout owns.

Basename

createBrowserRouter(routes, { basename: "/app" });
<BrowserRouter basename="/app">

// react-router.config.ts, framework mode
export default { basename: "/app" } satisfies Config;

With a basename, <Link to="/about"> produces /app/about. Do not include the basename in your to props, or you get /app/app/about.