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

Posted 2023-02-19

【中文标题】./src/App.js 尝试导入错误：“Switch”未从“react-router-dom”导出

【英文标题】：./src/App.js Attempted import error: 'Switch' is not exported from '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;

【参考方案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