You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Question 81-86 relates to react router version 4. Can i update these questions and answers to new syntax in react router version 6? #313
Q85 "Router may have only one child" → <Switch> no longer exists; <Routes> in v6
Q86history.push with state → navigate(path, { state })
Q87 NotFound route → path="*" with element={}
Q88 custom history → no longer applicable in v6; useNavigate / createBrowserRouter
Q89<Redirect> → <Navigate replace />
Q172 "benefits of React Router v4" → reframe for v6
I'll keep the question numbering and Back-to-Top anchors unchanged, and note where a v4 concept was removed rather than renamed, since interviewers still ask about the migration.
Happy to narrow it strictly to 81–86 if you'd prefer a smaller diff.
Yes, the questions and answers can be updated to React Router v6. The ideas (routes, links, params, redirects) are the same, but the syntax changed. Install it with: npm install react-router-dom@6
Main changes from v4 to v6:
Switch is now Routes.
The component and render props are replaced by the element prop, which takes JSX: <Route path="/about" element={} />
The exact prop is removed, because v6 matches exactly by default. Use path="/users/" if you want a route to also match its children.
Redirect is replaced by Navigate:
useHistory is replaced by useNavigate. history.push(“/x”) becomes navigate(“/x”), history.replace(“/x”) becomes navigate(“/x”, { replace: true }), and history.goBack() becomes navigate(-1).
withRouter is removed. Use the hooks useNavigate, useParams and useLocation instead.
props.match.params becomes useParams(), and props.location becomes useLocation().
useRouteMatch is replaced by useMatch.
NavLink no longer has activeClassName or activeStyle. Use a function instead: className={({ isActive }) => isActive ? “active” : “”}. The exact prop on NavLink is now called end.
Nested routes are written inside the parent Route, and the parent renders where the child should appear. Child paths are relative to the parent.
A 404 page uses path="".
Every Route must be inside Routes, and route order no longer matters, because v6 picks the best match.
Note: Prompt (blocking navigation) was removed in v6, and class components can no longer get router props directly, so use hooks inside functional components. React Router v7 keeps almost the same syntax, so these answers still apply there.
Activity
sudheerj commentedon Jun 6, 2024
Sure, you can raise a PR
Benappiahpoku commentedon Jun 6, 2024
I will get on it right away
Faizankhan17623 commentedon Sep 14, 2026
I'd like to pick this up, since the original author hasn't opened a PR.
Scope I'm planning, slightly wider than the title since the same v4 syntax leaks into neighbouring answers:
withRouter/render props/contextTypes→useNavigateuseSearchParams<Switch>no longer exists;<Routes>in v6history.pushwith state →navigate(path, { state })path="*"withelement={}useNavigate/createBrowserRouter<Redirect>→<Navigate replace />I'll keep the question numbering and Back-to-Top anchors unchanged, and note where a v4 concept was removed rather than renamed, since interviewers still ask about the migration.
Happy to narrow it strictly to 81–86 if you'd prefer a smaller diff.
KunwarJayaadittyaSingh commentedon Oct 17, 2026
Yes, the questions and answers can be updated to React Router v6. The ideas (routes, links, params, redirects) are the same, but the syntax changed. Install it with: npm install react-router-dom@6
Main changes from v4 to v6:
Switch is now Routes.
The component and render props are replaced by the element prop, which takes JSX: <Route path="/about" element={} />
The exact prop is removed, because v6 matches exactly by default. Use path="/users/" if you want a route to also match its children.
Redirect is replaced by Navigate:
useHistory is replaced by useNavigate. history.push(“/x”) becomes navigate(“/x”), history.replace(“/x”) becomes navigate(“/x”, { replace: true }), and history.goBack() becomes navigate(-1).
withRouter is removed. Use the hooks useNavigate, useParams and useLocation instead.
props.match.params becomes useParams(), and props.location becomes useLocation().
useRouteMatch is replaced by useMatch.
NavLink no longer has activeClassName or activeStyle. Use a function instead: className={({ isActive }) => isActive ? “active” : “”}. The exact prop on NavLink is now called end.
Nested routes are written inside the parent Route, and the parent renders where the child should appear. Child paths are relative to the parent.
A 404 page uses path="".
Every Route must be inside Routes, and route order no longer matters, because v6 picks the best match.
Example, v4:
Example, v6:
<Route path="/" element={} /> <Route path="/user/:id" element={} /> <Route path="/old" element={} /> <Route path="*" element={} />
Reading a param in v6:
const { id } = useParams()
Note: Prompt (blocking navigation) was removed in v6, and class components can no longer get router props directly, so use hooks inside functional components. React Router v7 keeps almost the same syntax, so these answers still apply there.