Attempted Import Error: 'Switch' is not exported from 'react-router-dom'

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.

Catching Import Errors in Production

While import errors like this typically surface during development, React error tracking in production helps catch version mismatch issues that slip through. Production environments can expose problems from dependency updates, build configuration issues, or cases where different parts of your application expect different library versions. Error monitoring tools capture these import failures with full stack traces and build information, helping you identify whether users are hitting cached builds or experiencing CDN delivery issues with your updated dependencies.