./src/App.js 尝试导入错误：“Switch”未从“react-router-dom”导出

【问题标题】：./src/App.js Attempted import error: 'Switch' is not exported from 'react-router-dom'./src/App.js 尝试导入错误：“Switch”未从“react-router-dom”导出
【发布时间】：2022-01-12 21:44:24
【问题描述】：

我无法弄清楚为什么不起作用。我已经卸载了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;

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

如果您不小心将 react-router-dom 更新到版本 6，它将不再导出 Switch 组件。它被一个Routes 组件替换，必须直接包装/渲染Route 组件。

将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>
  );
}

按照Upgrading from v5 将您的项目从 v5 迁移到您的应用程序中的 v6，因为有很多重大的组件 API 更改。

恢复到react-router-dom v5。
- 运行npm un -s react-router-dom
- 运行npm i -s react-router-dom@5.3.0

【讨论】：