Electron + React 空白页问题求助：加载资源却无法渲染应用

核心问题排查与修复步骤 #

1. 适配React Router路由模式 #

Electron通过file://协议加载本地页面，BrowserRouter依赖HTML5 History API，在本地文件协议下无法正常工作，必须替换为HashRouter：

• 找到React应用入口文件（如src/App.js或src/index.js），修改路由组件：

  // 替换前
  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  
  // 替换后
  import { HashRouter as Router, Routes, Route } from 'react-router-dom';
  

2. 修正Electron主进程配置 #

你的electron-main.js存在重复事件绑定和配置不规范问题，修改后的代码如下：

const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");

function createWindow() {
  const startUrl = process.env.ELECTRON_START_URL || url.format({
    pathname: path.join(__dirname, "build/index.html"),
    protocol: "file:",
    slashes: true,
  });

  const win = new BrowserWindow({
    width: 800,
    height: 800,
    webPreferences: {
      nodeIntegration: false, // 关闭node集成，用preload脚本替代更安全
      contextIsolation: true, // 开启上下文隔离，符合Electron安全规范
      webSecurity: false, // 解决file协议下资源加载限制
    },
  });

  win.loadURL(startUrl);
  win.webContents.openDevTools(); // 强制打开开发者工具，排查隐藏报错
}

app.whenReady().then(createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

关键提示：打开开发者工具后，查看Console和Network标签，能发现很多表面上看不到的报错信息，是排查空白页的核心手段。

3. 修复React版本与react-scripts版本不兼容 #

你用了React 18，但react-scripts版本是3.0.1（过于老旧），React 18的渲染API已更新，旧版脚本无法适配，这是页面无法渲染的核心原因：

1. 升级react-scripts到最新兼容版本：

   npm install react-scripts@latest
   

2. 修改src/index.js的渲染代码：

   // 替换前
   import ReactDOM from 'react-dom';
   ReactDOM.render(<App />, document.getElementById('root'));
   
   // 替换后
   import { createRoot } from 'react-dom/client';
   const root = createRoot(document.getElementById('root'));
   root.render(<App />);
   

4. 验证完整流程 #

按以下顺序执行操作：

1. 运行npm run build生成完整的build文件夹；
2. 运行npm run electron启动Electron应用。

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