React+Electron本地窗口无限加载问题求助及原因定位

问题现象 #

• 在function App(){}与return语句之间添加路由路径判断逻辑（根据路由加载对应组件）时，本地Electron窗口出现无限加载
• 若将return直接紧跟function App(){}，或者移除{Component}，应用可正常运行

问题根源 #

根路径路由配置错误，在匹配根路径时错误渲染了<App />组件，触发无限递归渲染——App组件内部会再次调用自身，形成循环调用，导致窗口持续加载无法完成。

解决方法 #

1. 检查路由配置的根路径对应组件，确保未错误引用<App />
2. 根路径应指向实际的首页组件（如<Home />）而非App组件本身
3. 代码示例对比：
   错误写法（导致递归）：

   function App() {
     const { Component } = useRouteMatch();
     // 根路径匹配到App组件，触发递归调用
     return <Component />;
   }
   
   // 路由配置
   <Route path="/" component={App} />
   

   正确写法：

   import Home from './Home';
   import About from './About';
   
   function App() {
     return (
       <Switch>
         <Route exact path="/" component={Home} />
         <Route path="/about" component={About} />
       </Switch>
     );
   }
   

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