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

Matthew C.

—August 15, 2024

The ProblemThe 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 SolutionThe 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.