react-router-dom报错：Switch、Route未找到，替换Routes仍无效求助

• 问题根源：你安装的是react-router-dom v6，这个版本移除了Switch组件（替换为Routes），同时Route的使用方式也发生了变化——不再支持直接嵌套组件，必须通过element属性传入。你之前只替换了Switch但没调整Route的写法，加上导入未同步，才会持续报错。

• 修正后的完整代码：

import './App.css';
import Header from './Header';
import Home from './Home';
// 替换Switch为Routes，确保Route也在导入列表中
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className='app'>
        <Routes>
          {/* 使用element属性包裹要渲染的组件 */}
          <Route path='/' element={
            <>
              <Header />
              <Home />
            </>
          } />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

• 额外排查步骤：
  • 确认版本：执行npm list react-router-dom查看当前版本，v6及以上必须用Routes，v5及以下可保留Switch（但报错说明你装的是v6）。
  • 清理依赖缓存：如果改完仍报错，删除node_modules和package-lock.json，重新运行npm install，再重启开发服务器。
  • 检查拼写：确保Routes和Route拼写正确，注意大小写（React组件名首字母必须大写）。

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