'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.
On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.
Related Blogs
Create a Back button with React Router
Build password strength checker in React
The style prop expects a mapping from style properties to values, not a string
How to get window width and height in React
Reset to the initial state in React
Warning: The tag is unrecognized in this browser
How to Integrate Custom Build CKEditor5 with React
Get the Mouse Position (coordinates) in React
Explore All Blogs