Wrap the app in a router, declare routes (path → element), navigate with ` ` / `useNavigate`, read params via `useParams`/`useSearchParams`. v6+ supports nested routes, loaders, and data routers.

Back to React

React

easy

junior

How do you implement routing in React with react-router-dom?

Wrap the app in a router, declare routes (path → element), navigate with `<Link>` / `useNavigate`, read params via `useParams`/`useSearchParams`. v6+ supports nested routes, loaders, and data routers.

6 min read·~12 min to think through

react-router-dom v6+ has two ways to declare routes:

Element tree (<Routes>/<Route>) — JSX-driven, simple.
Data router (createBrowserRouter) — config-driven, supports loaders/actions, best for new apps.

The hooks you'll touch:

useNavigate() — programmatic navigation, replaces v5's history.push.
useParams() — read URL segments (/users/:id → { id }).
useSearchParams() — read/write the query string.
useLocation() — current URL incl. state.

Patterns to know:

Nested routes + <Outlet/> for shared layouts.
Protected routes — a wrapper that checks auth and redirects with <Navigate to="/login" replace />.
404 — a catch-all path="*" route.
Code splitting — lazy + Suspense per route to keep the main bundle small.

In Next.js / Remix, you don't use react-router — file-system routing and the framework router replace it. Mention both worlds; senior interviewers often ask "would you use react-router or a framework router?" and want the tradeoff.

Code

Follow-up questions

•What does the data router add over <Routes>?
•How does react-router differ from Next.js App Router?
•How do you preserve scroll position across navigation?

Common mistakes

•Using `<a href>` for in-app navigation — full page reload, loses state.
•Forgetting `replace` on auth redirects — back button bounces the user back into the protected page.
•Putting a router inside a router (e.g. by accident) — leads to weird match behavior.

Performance considerations

•Lazy-load route elements; the entire app shouldn't ship to render `/`.
•Use `<Link prefetch>`-style hover prefetch in your own router or framework where supported.

Edge cases

•Trailing slashes — react-router doesn't normalize by default; either pick canonical URLs and redirect or accept both.
•Hash routing (`HashRouter`) bypasses server config but is bad for SEO; use only when you can't control the server.

Real-world examples

•Most CRA-based dashboards still use react-router. Greenfield SSR apps usually pick Next or Remix instead.

Senior engineer discussion

Senior signal: explain when to graduate from react-router to a framework, the loader/action data-flow model, and how SPA routing impacts SEO and analytics.