React电商项目中react-router-dom未找到Switch组件的问题求助

问题核心是react-router-dom版本不兼容：你当前安装的是v6版本，该版本已移除Switch组件，改用Routes替代；而你参考的YouTube视频用的是v5版本，因此出现导出找不到的错误。

两种解决方法： #

方法一：改用v6新写法（推荐） #

修改App.js代码，将Switch替换为Routes，同时调整Route的写法：

import Header from './Header'
import './App.css'
import './Header.css'
import Home from './Home'
// 替换Switch为Routes
import { BrowserRouter as Router , Routes , Route} from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="app">
        <Routes>
          {/* v6中Route的内容需放在element属性内 */}
          <Route path='/' element={
            <>
              <Header/>
              <Home/>
            </>
          }/>
        </Routes>
      </div>
    </Router>
  );
}

export default App;

方法二：降级到react-router-dom v5 #

如果想完全跟随视频的写法，可卸载当前版本，安装v5：

npm uninstall react-router-dom
npm install react-router-dom@5

执行后你原有的代码即可正常运行。

内容的提问来源于stack exchange，提问作者dan