./src/App.js 尝试导入错误：“Switch”未从“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

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 react-router-dom@5.3.0

Answer 2

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 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 react-router-dom@5.2.0

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