Export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

avatar

Borislav Hadzhiev

Last updated: Apr 4, 2022

banner

Photo from Unsplash

Export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' #

To solve the error "export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'", import Routes instead of Switch and wrap your <Route /> components with a <Routes> component, e.g. <Routes><Route path="/about" element={<About />} /></Routes>.

export switch imported as switch not found

App.js
import React from 'react'; // 👇️ import Routes instead of Switch 👇️ 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="/about">About</Link> </li> </ul> </nav> {/* 👇️ Wrap your Route components in a Routes component */} <Routes> <Route path="/about" element={<About />} /> <Route path="/" element={<Home />} /> </Routes> </div> </Router> ); } function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; }

In React router v6, we have to replace the <Switch> component with <Routes>.

Make sure your project is running the latest version by issuing the npm install react-router-dom@latest command.

If you don't want to update your code, you can install v5 of react-router-dom by running npm install react-router-dom@5.2.0 from your project's root directory.

In react router v6, the exact prop has been removed and you can put your routes in whatever order you wish and the router automatically detects the best route for the current URL.

In react router v6, instead of passing a children prop to the Route components, we use the element prop, e.g. <Route path="/about" element={<About />} />.

React router v6 uses a simplified path format where <Route path> has 2 kinds of placeholders:

  • dynamic :id params
  • * wildcards

The * wildcard syntax can only be used at the end of a path.

App.js
import React from 'react'; import {BrowserRouter as Router, Route, Link, Routes} from 'react-router-dom'; import {useParams} from 'react-router-dom'; export default function App() { return ( <Router> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> {/* 👇️ link to dynamic path */} <Link to="/users/4200">Users</Link> </li> <li> {/* 👇️ link to catch all route */} <Link to="/does-not-exist">Catch all route</Link> </li> </ul> </nav> {/* 👇️ Wrap your Route components in a Routes component */} <Routes> <Route path="/about" element={<About />} /> {/* 👇️ handle dynamic path */} <Route path="/users/:userId" element={<Users />} /> <Route path="/" element={<Home />} /> {/* 👇️ only match this when no other routes match */} <Route path="*" element={ <div> <h2>404 Page not found etc</h2> </div> } /> </Routes> </div> </Router> ); } function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } function Users() { const params = useParams(); return <h2>Users: {params.userId}</h2>; }

The route <Route path="/users/:userId" element={<Users />} /> uses a dynamic userId parameter, which we can access by using the useParams hook.

The route would match anything after /users/, e.g. /users/123 or /users/asdf.

The route that has a path equal to * serves as a catch all route. It only matches when no other routes do.

For more examples, refer to the official docs page of react router v6.

Conclusion #

To solve the error "export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'", import Routes instead of Switch and wrap your <Route /> components with a <Routes> component, e.g. <Routes><Route path="/about" element={<About />} /></Routes>.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.