本文详解 react router v6 在 electron 应用中报错 “type is invalid — expected a string or class/function but got: undefined” 的根本原因及标准解决方案，涵盖 `hashrouter` 正确包裹位置、`routes`/`route` 替代废弃的 `switch`/`component`、以及 `element` 属性的 jsx 元素写法。
在 Electron + React 项目中集成 React Router 时，常见错误如 type is invalid -- expected a string ... but got: undefined，往往并非组件未导出或路径错误，而是因误用 React Router v5 的 API 写法于 v6 环境中所致。React Router v6 彻底重构了路由声明方式：废弃 Switch、component、render、children 等 props，统一由 element 接收 JSX 元素（非组件引用），且所有路由必须在
✅ 正确结构：三层职责分离
-
index.js（入口）：仅负责挂载，用
包裹根组件（如 ），确保路由上下文全局可用； -
App.js（路由中枢）：定义
和所有 ，每个 path 对应一个 element={ }； - Home.js / Search.js（页面组件）：专注渲染逻辑，通过 触发导航，不再内嵌路由器或路由配置。
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter } from 'react-router-dom';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<HashRouter> {/* ✅ 唯一且顶层的 Router */}
<App />
</HashRouter>
</React.StrictMode>
);// App.js
import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import Search from './Search';
export default function App() {
return (
<div className="App">
<Routes> {/* ✅ Routes 是 v6 的唯一路由容器 */}
<Route path="/" element={<Home />} /> {/* ✅ element 接收 JSX 元素 */}
<Route path="search" element={<Search />} />
</Routes>
</div>
);
}// Home.js（纯净页面组件）
import { Link } from 'react-router-dom';
export default function Home() {
return (
<div className="main">
<div className="head">
<Link to="/search">Go to Search</Link>
<br />
<Link to="/">Back to Home</Link>
</div>
{/* 其他内容 */}
</div>
);
}⚠️ 关键注意事项
-
禁止在子组件中重复嵌套
：如原 Home.js 中自行包裹 会导致上下文冲突，引发 undefined 组件错误； -
element 不是 component：
（v5）在 v6 中已失效，必须写为 } />； - 路径匹配规则变化：v6 中 path="/search" 会精确匹配 /search，无需 exact；根路径写 path="/" 即可，path="*" 可作 404 捕获；
- 确保组件默认导出：Search.js 中 export default Search; 正确，但需确认文件名与导入路径一致（如 import Search from './Search' 对应 Search.js，而非 Search.jsx 拼写错误）；
- Electron 特别提示：若使用 HashRouter，需确保 Electron 主进程未拦截 # 路由（通常无需额外配置）；如需 BrowserRouter，则需启用 Electron 的 webPreferences.webSecurity = false 并配置 history.pushState 支持（不推荐，HashRouter 更稳妥）。
✅ 验证与调试建议
- 检查控制台是否仍有 React.createElement: type is invalid 报错——若存在，优先检查 element 是否拼写错误（如写成 elmement）或组件名大小写不匹配；
- 在 App.js 中临时添加
Not Found} />，验证路由是否整体生效； - 使用 React DevTools 查看组件树，确认
下是否真实渲染了目标组件。
遵循以上结构，即可彻底解决 Electron 中 React Router v6 的 undefined component 错误，并为后续添加过渡动画（如配合 useNavigate + CSSTransition）打下坚实基础。
