./src/App.js Attempted import error: 'Switch' is not exported from 'react-router-dom'

Question

I can't figure it out why doesn't work. I have uninstalled the react-router-dom package and reinstalled it, but I always have the same error.

The error I'm getting: ./src/App.js Attempted import error: 'Switch' is not exported from 'react-router-dom'.

This is my code. I hope that someone could give me a hand, Thanks in advance

import './App.css';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import NavBar from '../src/Components/UI/NavBar/NavBar';
import Footer from '../src/Components/UI/Footer/Footer';
import Home from './Components/Views/Home/Home';

function App() {
  return (
    <Router>
      <NavBar/>
      <Switch>
        <Route path="/">
          <Home/>
        </Route> 
      </Switch>
      <Footer/>
    </Router>
  );
}

export default App;

Answer 1

I had the same problem and took me forever. but mainly as you have asked recently the React-router-dom has been updated and they have removed Switch So try installing below code again. its version 5.

npm install react-router-dom@5

Answer 2

If you accidentally updated react-router-dom to version 6 it no longer exports a Switch component. It was replaced by a Routes component that must directly wrap/render the Route components.

1. Swap the Switch for the Routes component.

   import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
   ...
   
   function App() {
     return (
       <Router>
         <NavBar/>
         <Routes>
           <Route path="/" element={<Home/>} />
         </Routes>
         <Footer/>
       </Router>
     );
   }
   

   Follow the Upgrading from v5 to migrate your project from v5 to v6 across your app as there were quite a few breaking component API changes.

2. Revert back to react-router-dom v5.

   • Run npm un -s react-router-dom
   • Run npm i -s [email protected]

Answer 3

I have also faced the same problem. I had version 6 installed. Then I have found out that Switch was replaced by Routes. But changing to Routes was messing with my front-end. So I uninstall the version and went back to previous version by these commands:

npm uninstall react-router-dom

npm install [email protected]

This has solved my problem with 'Switch is not exported error'.