React Router errorReact Router: “Attempted import error: 'Switch' is not exported from 'react-router-dom'”

Which v5 name you used, and the v6 replacement

1. 01

   Switch: use Routes, and element instead of component

   “React Router v6 introduces a Routes component that is kind of like Switch, but a lot more powerful.” React Router, Upgrading from v5

   Wrap routes in Routes. Each Route takes element with JSX, not component or render, and exact is gone because v6 picks the best match. Routes are chosen based on the best match instead of being traversed in order, so the order of your routes no longer decides which one renders.

   // v5
   <Switch>
     <Route exact path="/" component={Home} />
     <Route path="/users/:id" component={User} />
   </Switch>
   
   // v6
   <Routes>
     <Route path="/" element={<Home />} />
     <Route path="/users/:id" element={<User />} />
   </Routes>

2. 02

   useHistory: use useNavigate

   “Most of the time this means changing useHistory to useNavigate and changing the history.push or history.replace callsite.” React Router, Upgrading from v5

   useNavigate returns a function. history.push('/home') becomes navigate('/home'), and history.replace('/home') becomes navigate('/home', { replace: true }).

   import { useNavigate } from 'react-router-dom';
   
   function SaveButton() {
     const navigate = useNavigate();
     return <button onClick={() => navigate('/done')}>Save</button>;
   }

3. 03

   Redirect: use Navigate

   A redirect route becomes a Route whose element is <Navigate to="/new" replace />. A private route wrapper returns <Navigate to="/login" /> when the user isn’t signed in, and is used as an element, not as a custom child of Routes.

   <Route path="/old" element={<Navigate to="/new" replace />} />

4. 04

   withRouter and class components

   withRouter was removed. In a function component, use useNavigate, useParams and useLocation. For a class component, write a small wrapper function component that calls those hooks and passes the values down as props. Other renames come up next: useRouteMatch becomes useMatch, NavLink activeClassName becomes a className function, Prompt was removed, and a parent route with child routes needs path="/users/*" or an <Outlet />. useNavigate() may be used only in the context of a <Router> means the component renders outside BrowserRouter.

Checked against the vendor’s docs on November 8, 2026: React Router: Upgrading from v5.

Rather hand it over?

Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.

• from $450App Fix TicketOne reproducible bug in an existing mobile or web app, diagnosed and fixed.See scope and start
• from $450AI-Built App RescueA Lovable, Bolt or Cursor app checked end to end in 3 days, then its worst problems fixed at a fixed price.No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.See scope and start

Related: React “Element type is invalid” · Page not found on refresh (Netlify, Vercel) · React “Invalid hook call”