React Router Switch to Routes Migration

Problem Statement

When working with React Router, you might encounter the error: Attempted import error: 'Switch' is not exported from 'react-router-dom'. This typically occurs when using a version of React Router that no longer supports the Switch component.

The original code that triggers this error looks like this:

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="app-container">
        <NavBar />
        <Switch>
          <Route path="/home" component={Home} />
        </Switch>
        <Footer />
      </div>
    </Router>
  );
}

Solution

The Switch component was replaced with Routes in React Router v6. You need to update both your imports and your component syntax.

Option 1: Upgrade to React Router v6 Syntax (Recommended)

Update your import statement and replace Switch with Routes:

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

function App() {
  return (
    <Router>
      <div className="app-container">
        <NavBar />
        <Routes>
          <Route path="/home" element={<Home />} />
        </Routes>
        <Footer />
      </div>
    </Router>
  );
}

Key Changes in v6

• Switch becomes Routes
• component prop becomes element prop
• Component references use JSX syntax (<Component />) instead of just the component name
• The exact prop is no longer needed - routes match exactly by default

Option 2: Downgrade to React Router v5

If you prefer to keep the old syntax, you can downgrade to v5:

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

Complete Example with Multiple Routes

Here's a comprehensive example showing the v6 syntax with multiple routes:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home/Home';
import About from './pages/About/About';
import Products from './pages/Products/Products';
import NotFound from './pages/NotFound/NotFound';

function App() {
  return (
    <Router>
      <div className="app-container">
        <NavBar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/products" element={<Products />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
        <Footer />
      </div>
    </Router>
  );
}

Understanding the Changes

React Router v6 introduced several improvements:

1. Better route matching algorithm - No need for the exact prop
2. Relative routing - Routes and links are relative to their parent
3. Performance improvements - Better bundle size and runtime performance
4. New features - Support for new patterns like nested routes

Migration Considerations

When migrating from v5 to v6, note that:

• All Switch components must be converted to Routes
• Route component and render props are replaced with element
• Nested route patterns have changed significantly

Version Compatibility Table

React Router Version	Switch Component	Routes Component	Recommended Action
v5 and earlier	✅ Supported	❌ Not available	Keep using Switch
v6	❌ Removed	✅ Supported	Migrate to Routes

Alternative Import Approach

If you want to minimize code changes during migration, you can use this alias approach:

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

However, this is not recommended for new projects as it may cause confusion.

Conclusion

The "Switch is not exported from react-router-dom" error indicates you're using React Router v6 syntax with v5 code patterns. The recommended solution is to update your code to use Routes instead of Switch and adopt the new element prop syntax.

For more detailed migration guidance, refer to the official React Router v6 upgrade guide.