React Router v6 与 Electron 集成时的正确路由配置指南

本文详解 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 习惯（如 和 component prop）而在 v6 中遭遇运行时错误：
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 环境适用）

核心原则：路由定义必须集中于单一顶层 组件内，且 （推荐 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(         {/* ✅ 必须在此层级包裹 */}                );

2. 主路由容器 App.js（唯一 所在处）

import { Routes, Route } from 'react-router-dom'; import Home from './Home'; import Search from './Search';  export default function App() {   return (     
                {/* ✅ path "/" 匹配根路径；element 接收 JSX 元素 */}         } />         {/* ✅ path "search" 对应 /search（HashRouter 自动处理 # 前缀） */}         } />         {/* ✅ 可添加 404 路由 */}         Page Not Found} />            
   ); }

3. 页面组件 Home.js（仅负责渲染，不包含 Router）

import { Link } from 'react-router-dom'; // ✅ Link 必须从 react-router-dom 导入  export default function Home() {   return (     
       
         {/* ✅ to 属性使用相对路径（无前导 /）或绝对路径均可 */}         Go to Search         
         Back to Home       
       {/* 其他内容... */}     
   ); }

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 (                                } />           } />                        ); }

配合 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 应用架构。