'Switch' is not exported from 'react-router-dom'

The React error 'Switch' is not exported from 'react-router-dom' occurs when we try to import 'Switch' from react-router-dom v6. In react-router-dom v6, ‘Switch’ is replaced by ‘Routes’.

To solve this issue we can import Routes instead of Switch and wrap your <Route /> components with a <Routes> component. Another solution is to downgrade the react-router-dom version to 5 or below. Let us explain with some sample codes.

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

export default function App() {
  	return (
    	<Router>
      		<div>
        		<nav>
          			<ul>
            			<li>
              				<Link to="/">Home</Link>
            			</li>
            			<li>
              				<Link to="/contact">Contact</Link>
            			</li>
          			</ul>
        		</nav>

        		<Routes>
          			<Route path="/contact" element={<Contact />} />
          			<Route path="/" element={<Home />} />
        		</Routes>
      		</div>
    	</Router>
  	);
}

function Home() {
  	return <p>Home Page</p>;
}

function Contact() {
  	return <p>Contact Page</p>;
}

In the above example for code, we have imported Routes from react-router-dom. All the Route component was wrapped with the routes component instead of the Switch component in the older version of react-router-dom. In react router dom v6, instead of passing children prop to the Route components, we are passing routing page components (eg: Home, Contact) as element props like  <Route path="/contact" element={<Contact />} />. The exact prop was removed from React Router v6 and we can put our routes in the order you wish and the router automatically detects the best route for the current URL. Also, make sure to wrap all components from react-router-dom in a Router component(BrowserRouter as Router) imported from react-router-dom.

The main advantages of Routes over Switch are:

• All <Route> components and <Link> components inside a <Routes> are relative. This makes more predictable code in <Route path> and <Link to>.
• Routes are chosen based on the best match instead of being traversed in order. This helps to avoid bugs due to unreachable routes.
• Routes can be nested in one place instead of being spread out into different components. In small to medium-sized apps, this helps us to see all your routes at once. In large apps, we can nest routes in bundles that can be loaded dynamically via React.lazy.

React Router V6 introduces many powerful new features and improved compatibility with the latest versions of React. React Router v6 makes use of React hooks heavily, so we need to make sure our React version is 16.8 or greater before attempting the upgrade React Router v6.

The useHistory hook was deprecated in React Router V6. Instead, we can use of useNavigate hook. For more details see react router dom doc.

Another possible solution is to uninstall the current react-router-dom v6 and install version 5. We can do this by the following command.

npm uninstall react-router-dom
npm install [email protected]

If you are using yarn, use the below commands.

yarn remove react-router-dom
yarn add [email protected]

We can check the current version of React Router by opening the package.json file in the root directory. In the package.json file, we can find "react-router-dom": “^6.4.3” under "dependencies".

Conclusion

To solve React error 'Switch' is not exported from 'react-router-dom', import Routes instead of Switch and wrap your <Route /> components with a <Routes> component. In react-router-dom v6, ‘Switch’ is replaced by routes ‘Routes’. Another possible solution is to downgrade React Router to version 5.

For more deep knowledge, visit React Router V6 official doc.