React Router Cheatsheet - Routing

This reference is for React developers wiring up client-side navigation with React Router v6. It covers the declarative Routes/Route tree, nested layouts with Outlet, Link/NavLink and programmatic useNavigate, reading dynamic params and refreshing the query string, guarding protected pages, and the reactive data APIs (loader/action) added in v6.4. Each entry fills a concrete gap, like rendering a 404, keeping nav active state, or redirecting after login. After reading you should be able to declare a route tree, link between pages, handle :id params and ?query, and protect authenticated screens.

Languages·36 commands·Last updated 2026-07-21

Router Setup 5

<BrowserRouter><App /></BrowserRouter>

Wrap the app to enable routing

<Routes><Route path="/" element={<Home />} /></Routes>

Declare route rules

<Route path="/users/:id" element={<User />} />

Dynamic route param

<Route path="*" element={<NotFound />} />

404 fallback route

<Route path="/" element={<Layout />}>...</Route>

Root route with a layout

Route Params 5

<Route path="/users/:id" element={<User />} />

Declare a dynamic param

const { id } = useParams()

Get the dynamic params object

<Route path="/files/*" element={<Files />} />

Match multiple path segments (splat)

const splat = useParams()["*"]

Get the splat segment

navigate(-1) / navigate(1)

Go back / forward one page

Query Params 5

const [params, setParams] = useSearchParams()

Read/write query params

params.get("q")

Read a single query param

setParams({ q: "keyword", page: 1 })

Update query params

<Link to="/search?q=react">Search</Link>

Link with a query string

params.toString()

Serialize to a query string

Nested & Layout 5

<Route path="/dashboard" element={<Dashboard />}>

Parent route

<Route index element={<Overview />} />

Default child route (index route)

<Route path="settings" element={<Settings />} />

Relative-path child route

<Outlet />

Render child routes in the parent

<Outlet context={{ user }} />

Pass context to child routes

Guards & Data 5

function ProtectedRoute({ children }) { return isAuth ? children : <Navigate to="/login" /> }

Custom protected route component

<Route element={<ProtectedRoute><Outlet /></ProtectedRoute>}>

Wrap multiple protected routes

<Route loader={async ({ params }) => fetchUser(params.id)} />

Data loader (v6.4+)

<Route action={async ({ request }) => submitForm(request)} />

Data action (v6.4+)

<Route errorElement={<ErrorBoundary />} />

Route-level error boundary

Advanced 6

const location = useLocation()

Get the location object

location.pathname / location.search / location.hash

Parse the current URL parts

const match = useMatch("/users/:id")

Match a path pattern

const Page = lazy(() => import("./Page"))

Lazy-load a component

<Route path="about" element={<Suspense><About /></Suspense>} />

Route-level lazy loading

<ScrollRestoration />

Scroll position restoration (v6.4+)

Tips

React Router v6 replaces v5's <Switch> with <Routes>.
useNavigate replaces v5's useHistory: navigate(-1) goes back, navigate(1) goes forward.
Nested routes need <Outlet /> in the parent to render children; an index route matches the parent path itself.
NavLink's className accepts an { isActive } callback for active styling.
Get dynamic params :id with useParams(); read query params ?q= with useSearchParams().

Official References

Each command links to its official documentation below, so you can verify the latest usage and read deeper.

MDN JavaScript Docs

Maintained by LaoHand

Publicly updated on Jul 21, 2026, continuously proofread against official docs.

Contact Us

Wrong command or description? Send us corrections, business inquiries or product feedback by email.