'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.

Related Blogs

ckeditor

How to Integrate Custom Build CKEditor5 with React

Explains how to create a custom build CKEditor5 and integrate with react with sample code.

Objects Are Not Valid as a React Child

React objects are not valid as a react child

The React error "Objects are not valid as a React child" occurs when we render an object or an array in our JSX code. We can't use JavaScript objects as a child in React.

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.