./src/App.js尝试导入错误："交换机"未从"反应路由器-dom"导出

Question

我不明白为什么不起作用。我已经卸载了react router dom包并重新安装了它，但我总是遇到同样的错误。

我得到的错误：/src/App.js尝试导入错误："Switch"未从"react router dom"导出

这是我的密码。我希望有人能帮我一把，提前感谢

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

我也遇到了同样的问题，并一直困扰着我。但主要正如您最近所问的，React路由器dom已经更新，并且他们已经删除了Switch所以请再次尝试安装以下代码。其版本5。

npm install react-router-dom@5

Answer 2

如果意外将react-router-dom更新到版本6，它将不再导出Switch组件。它被Routes组件取代，必须直接包装/渲染Route组件。

1. 将Switch替换为Routes组件。

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

   按照从v5升级，在应用程序中将您的项目从v5迁移到v6，因为API组件发生了相当多的变化。

2. 恢复到react-router-domv5。

   • 运行npm un -s react-router-dom
   • 运行npm i -s react-router-dom@5.3.0

Answer 3

我也遇到过同样的问题。我安装了版本6。然后我发现Switch被Routes取代了。但换成Routes会干扰我的前端。所以我卸载了这个版本，并通过以下命令返回到以前的版本：

npm卸载反应路由器dom

npm安装react-router-dom@5.2.0

这解决了我的"交换机未导出错误"问题。