React Router Cheatsheet

Navigation and Links

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

Link

<Link> renders a real <a> with an href, then intercepts the click for a client-side transition. Middle-click, Cmd-click, and "copy link address" all still work, which is why you should never replace it with a <div onClick>.

import { Link } from "react-router";

<Link to="/about">About</Link>
<Link to="/users/42">Profile</Link>
<Link to="../">Up one level</Link>
<Link to=".." relative="path">Up one URL segment</Link>
<Link to="/search?q=react">Search</Link>
<Link to={{ pathname: "/search", search: "?q=react", hash: "#top" }}>Search</Link>
<Link to="/login" replace>Login</Link>
<Link to="/checkout" state={{ from: "cart" }}>Checkout</Link>
<Link to="/report" reloadDocument>Full page load</Link>
<Link to="/heavy" prefetch="intent">Prefetch on hover</Link>
<Link to="/anchor#section" preventScrollReset>Keep scroll</Link>
<Link to="https://example.com">External</Link>

Prop	Does
`to`	A path string or a partial `Location` object
`replace`	Replace the history entry instead of pushing
`state`	Attach data readable via `useLocation().state`
`relative`	`"route"` (default) or `"path"`
`reloadDocument`	Skip the router, do a real browser navigation
`preventScrollReset`	Do not scroll to top after navigating
`prefetch`	Framework mode: `none`, `intent`, `render`, `viewport`
`viewTransition`	Wrap the navigation in a View Transition
`discover`	Framework mode: when to fetch the route manifest

Relative Links

relative="route" (the default) resolves against the route hierarchy, not the URL. Inside a route at /users/:id, <Link to=".."> goes to /users, skipping the dynamic segment as one unit. relative="path" walks URL segments literally.

// Rendered by the route /users/:id
<Link to="edit">Edit</Link>            // /users/42/edit
<Link to="..">Back</Link>              // /users
<Link to=".." relative="path">Back</Link>   // /users/42 minus one segment
<Link to="../43">Sibling</Link>        // /users/43

A trailing-slash difference in the parent path is the usual reason a relative link resolves somewhere unexpected. Use useResolvedPath to see what a to actually becomes.

NavLink

NavLink is a Link that knows whether it is active, which is what you want for navigation.

import { NavLink } from "react-router";

<NavLink to="/about">About</NavLink>       // gets class "active" automatically

<NavLink
  to="/about"
  className={({ isActive, isPending, isTransitioning }) =>
    isActive ? "font-medium text-ink" : "text-ink-muted"
  }
>
  About
</NavLink>

<NavLink to="/about" style={({ isActive }) => ({ opacity: isActive ? 1 : 0.6 })}>
  About
</NavLink>

<NavLink to="/about">
  {({ isActive }) => <span>{isActive ? "→ " : ""}About</span>}
</NavLink>

<NavLink to="/users" end>Users</NavLink>   // active ONLY at exactly /users

State	True when
`isActive`	The URL matches this link (or a descendant, unless `end`)
`isPending`	A navigation to this link is in flight
`isTransitioning`	A View Transition to this link is running

end is the fix for "every nav item is highlighted": without it, a NavLink to / matches every URL, because every path is a descendant of /.

For accessibility, add aria-current. NavLink sets aria-current="page" on the active link automatically, so screen readers announce it without you doing anything, and the semantics do not depend on color alone.

useNavigate

For navigation that is not a user clicking a link: after a submit, on a timer, in a guard.

import { useNavigate } from "react-router";

function Form() {
  const navigate = useNavigate();

  async function onSubmit(data) {
    await save(data);
    navigate("/thanks");
    navigate("/thanks", { replace: true });
    navigate("/thanks", { state: { id: data.id } });
    navigate(-1);                    // back
    navigate(1);                     // forward
    navigate(-2);                    // back two entries
    navigate("/list", { preventScrollReset: true });
    navigate("/list", { viewTransition: true });
  }
}

Reach for <Link> first. useNavigate in an effect to "redirect if not logged in" is a common pattern that flashes the wrong UI first. Prefer <Navigate> during render, or a loader redirect() in data mode.

Navigate Component

import { Navigate } from "react-router";

function Protected({ user, children }) {
  if (!user) return <Navigate to="/login" replace state={{ from: location }} />;
  return children;
}

<Navigate> navigates when it renders. Use replace on a guard so the protected URL does not stay in the history and trap the back button.

Programmatic History

import { useHref, useResolvedPath, useLinkClickHandler } from "react-router";

const href = useHref("/about");                  // includes the basename
const path = useResolvedPath("../sibling");      // what a relative `to` resolves to

// Build a custom link component that still behaves like a link
function CustomLink({ to, children, ...rest }) {
  const href = useHref(to);
  const handleClick = useLinkClickHandler(to);
  return <a href={href} onClick={handleClick} {...rest}>{children}</a>;
}