Sentry Answers>React>

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

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:

Click to Copy
Attempted import error: 'Switch' is not exported from 'react-router-dom'.

The error looks like this in Vite:

Click to Copy
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:

Click to Copy
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:

Click to Copy
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
  • Syntax.fm logo
    Listen to the Syntax Podcast

    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.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark of Functional Software, Inc.