React Router结合Electron报错：组件类型无效，跳转动画实现遇阻

核心问题分析 #

你遇到的报错是因为混用了React Router v5和v6的API，同时Route组件的写法不符合当前版本规范：

1. React Router v6已移除Switch组件，改用Routes，你同时导入两者导致冲突
2. v6中Route不再支持component属性，需改用element传入组件实例
3. v6的Route默认是精确匹配，exact属性已废弃

修复后的代码 #

Home.js #

import { HashRouter, Route, Routes, Link } from "react-router-dom";
import Search from './Search';

const Home = () => {
  return (
    <HashRouter>
      <div>
        <div>
          <Link to="/search"><h2>test</h2></Link>
        </div>
        <Routes>
          <Route path='/search' element={<Search />} />
        </Routes>
      </div>
    </HashRouter>
  )
}

export default Home;

额外检查点 #

• 确认react-router-dom版本为v6（可查看package.json），如果是v5则需调整为v5的API（保留Switch，使用component属性）
• 检查Search.js中导入的Weather组件：如果Weather是默认导出，需改为import Weather from "./weather";，避免因导入错误导致组件undefined

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