本文详解 react router v6 在 electron 应用中报错 “type is invalid — expected a string or class/function but got: undefined” 的根本原因及标准解决方案，涵盖 `switch`→`routes`、`component`→`element` 的迁移要点，并提供可直接复用的目录结构与代码范式。
在将 React Router 与 Electron 结合使用时，开发者常因沿用 v5 的 API 习惯（如
Warning: React.jsx: type is invalid — expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
该错误并非组件未导出或路径错误（尽管这些也是常见诱因），而更大概率是 React Router v6 的路由声明方式发生了重大变更 —— 它彻底弃用了 Switch、Route 的 component/render/children 三元模式，转而统一采用 element 属性接收已实例化的 JSX 元素（即
✅ 正确的 v6 路由结构（Electron 环境适用）
核心原则：路由定义必须集中于单一顶层
1. 入口文件 index.js（初始化 Router）
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> {/* ✅ 必须在此层级包裹 */}
<App />
</HashRouter>
</React.StrictMode>
);2. 主路由容器 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>
{/* ✅ path "/" 匹配根路径；element 接收 JSX 元素 */}
<Route path="/" element={<Home />} />
{/* ✅ path "search" 对应 /search（HashRouter 自动处理 # 前缀） */}
<Route path="search" element={<Search />} />
{/* ✅ 可添加 404 路由 */}
<Route path="*" element={<h3>Page Not Found</h3>} />
</Routes>
</div>
);
}3. 页面组件 Home.js（仅负责渲染，不包含 Router）
import { Link } from 'react-router-dom'; // ✅ Link 必须从 react-router-dom 导入
export default function Home() {
return (
<div className="main">
<div className="head">
{/* ✅ to 属性使用相对路径（无前导 /）或绝对路径均可 */}
<Link to="/search">Go to Search</Link>
<br />
<Link to="/">Back to Home</Link>
</div>
{/* 其他内容... */}
</div>
);
}4. 注意事项与避坑指南
- ❌ 禁止在子组件内重复嵌套
或 ：会导致 Router 上下文丢失，引发 undefined 错误； - ❌ 禁止在 Route 中使用 component={Search}：v6 已移除该 prop，必须改用 element={
}； - ❌ 禁止混用 v5 与 v6 的导入：确保全部从 'react-router-dom' 导入 Link, Routes, Route，而非旧版 'react-router'；
- ✅ Electron 推荐 HashRouter：因其不依赖服务端路由，完美适配 file:// 协议；
- ✅ 组件命名与导出需严格一致：Search.js 中 export default Search，则 App.js 中 import Search from './Search' —— 检查大小写与文件扩展名（.js vs .jsx）；
- ✅ 启用 Strict Mode 是好习惯：可提前捕获潜在的副作用问题。
? 进阶提示：添加页面过渡动画（如 slide）
若需实现点击跳转时的滑动动画，可在 App.js 中结合 useLocation 与 CSS transitions：
import { Routes, Route, useLocation } from 'react-router-dom';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
function AnimatedRoutes() {
const location = useLocation();
return (
<TransitionGroup>
<CSSTransition key={location.key} timeout={300} classNames="slide">
<Routes location={location}>
<Route path="/" element={<Home />} />
<Route path="search" element={<Search />} />
</Routes>
</CSSTransition>
</TransitionGroup>
);
}配合 CSS：
.slide-enter {
opacity: 0;
transform: translateX(100%);
}
.slide-enter-active {
opacity: 1;
transform: translateX(0);
transition: all 300ms ease;
}
.slide-exit {
opacity: 1;
transform: translateX(0);
}
.slide-exit-active {
opacity: 0;
transform: translateX(-100%);
transition: all 300ms ease;
}遵循以上结构，即可彻底解决 undefined 渲染错误，并构建出稳定、可维护的 Electron + React Router v6 应用架构。
