Attempted Import Error: 'Switch' is not exported from 'react-router-dom'
Matthew C.
—The Problem
After upgrading React Router from version 5 to version 6, I’ve been getting the following error:
Attempted import error: 'Switch' is not exported from 'react-router-dom'.
The error looks like this in Vite:
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/react-router-dom.js?v=41e7aa05' does not provide an export named 'Switch'
The Solution
React Router version 6 has several breaking changes from version 5, and the above error occurs due to one of them.
Specifically, the error is caused by the <Switch> component, which is used to render a specific route:
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './Home'; import About from './About'; import NotFound from './NotFound'; function App() { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/about" component={About} /> <Route path="*" component={NotFound} /> </Switch> </Router> ); } export default App
After upgrading to React Router 6, you should replace the <Switch> component with the <Routes> component.
The <Routes> component functions like the <Switch> component, but has several improvements, such as relative <Route>s and <Link>s.
The <Route> component has an element prop, instead of render or component props. This change was effected to make the <Route> component’s API less verbose and simplify its use with React <Suspense>, as explained in the React Router docs.
When you replace the <Switch> component with the <Routes> component, be sure to use the element prop instead of the render or component props:
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import Home from './Home'; import About from './About'; import NotFound from './NotFound'; function App() { return ( <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="*" element={<NotFound />} /> </Routes> </Router> ); } export default App
There are several other breaking changes you may encounter when moving from version 5 to version 6, so take a look at the React Router version 5 to version 6 upgrade guide to learn how you can incrementally upgrade. There’s also a backward compatibility package that allows you to incrementally migrate to version 6 by running version 5 and version 6 in parallel. Once all of your components are only using the version 6 APIs, your app no longer needs the compatibility package and can run on version 6 alone.
- Sentry BlogGuide to Error & Exception Handling in React
- Sentry BlogHow to identify fetch waterfalls in React
- Syntax.fmReact Server Components
- Sentry BlogSentry can’t fix React hydration errors, but it can really help you debug them
- Syntax.fmWhy the jQuery Creator Uses React and Typescript
- Syntax.fmListen to the Syntax Podcast
- Sentry BlogReact Native Debugging and Error Tracking During App Development
- Syntax.fmDiscussion on building native iOS and Android apps with React Native
- SentryReact Error & Performance Monitoring
- Sentry BlogFixing memoization-breaking re-renders in React
- SentryReact Debug Hub
- Listen to the Syntax Podcast
![Syntax.fm logo]()
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODES
Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.