Switching from Switch to Routes in React Router v6

Problem Statement

When working with React applications that require routing, developers often encounter the error 'Switch' is not exported from 'react-router-dom'. This occurs when:

1. Using React Router v6 or later
2. Attempting to import the Switch component
3. Following tutorials or examples written for older versions

The error happens because React Router v6 introduced breaking changes, removing the Switch component and replacing it with the new Routes component.

Version Compatibility

This error specifically indicates a mismatch between your code (written for v5) and your installed React Router version (v6+).

Solution: Migrate to React Router v6 Syntax

Option 1: Update Your Code to Use Routes (Recommended)

The modern approach is to upgrade your code to work with React Router v6 by replacing Switch with Routes and adjusting the Route component syntax.

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Key changes from v5 to v6:

• Switch → Routes
• Route component prop → element prop
• Children components → JSX elements

Option 2: Downgrade to React Router v5

If you need to maintain compatibility with existing code or dependencies, you can downgrade to v5:

npm uninstall react-router-dom
npm install react-router-dom@5

Detailed Migration Guide

Route Syntax Comparison

React Router v5

import { Switch, Route } from 'react-router-dom';

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  <Route path="/users">
    <Users />
  </Route>
</Switch>

React Router v6

import { Routes, Route } from 'react-router-dom';

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/users" element={<Users />} />
</Routes>

Handling Multiple Routes

In v6, you don't need to wrap each route in separate Routes components (as suggested in one answer). Instead, use a single Routes component with all your routes:

// Correct approach in v6
<Routes>
  <Route path="/" element={<Navbar />} />
  <Route path="/about" element={<About />} />
  <Route path="/contact" element={<Contact />} />
</Routes>

Additional v6 Features

React Router v6 introduces several improvements:

• Relative routing and links
• Improved route matching algorithm
• Smaller bundle size
• New hooks like useNavigate and useRoutes

Common Pitfalls and Solutions

Incorrect Import

Ensure you're importing from the correct package:

// Correct
import { Routes, Route } from 'react-router-dom';

// Incorrect (this would cause the error)
import { Switch, Route } from 'react-router-dom';

Package Verification

Check your installed version in package.json:

{
  "dependencies": {
    "react-router-dom": "^6.0.0" // v6 syntax required
  }
}

When to Choose Each Option

Choose Option 1 (Update to v6) if:

• You're starting a new project
• You want access to the latest features
• You can update your existing codebase

Choose Option 2 (Downgrade to v5) if:

• You're working with a large existing codebase
• You have tight deadlines and can't immediately refactor
• You rely on v5-specific features or patterns

Conclusion

The 'Switch' is not exported from 'react-router-dom' error is a clear indicator that you're using React Router v6 syntax with v5 patterns or vice versa. The recommended solution is to migrate to v6's Routes component, which offers improved performance and features. However, if necessary, you can temporarily downgrade to v5 while planning your migration strategy.

For complete migration guidance, refer to the official React Router upgrade guide.