Electron打包后React Router指向错误URL问题求助

问题场景 #

使用Electron开发React页面应用，通过react-router-dom v6实现标签页切换。npm start运行正常，但经electron-builder执行npm run build打包后，页面路径以/C:/开头，导致页面无法正常渲染。

解决方案 #

1. 配置React Router的路径基准 #

Electron打包后使用本地文件协议（file://）加载页面，React Router默认的绝对路径会与本地磁盘路径冲突，可通过两种方式解决：

• 使用HashRouter替代BrowserRouter：HashRouter的路径基于URL哈希值，不会依赖本地文件系统路径，无需额外配置：

  import { HashRouter } from 'react-router-dom';
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    <HashRouter>
      {/* 你的路由组件 */}
    </HashRouter>
  );
  

• 给BrowserRouter设置basename：根据环境动态设置相对路径作为基准：

  import { BrowserRouter } from 'react-router-dom';
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    <BrowserRouter basename={process.env.NODE_ENV === 'production' ? './' : '/'}>
      {/* 你的路由组件 */}
    </BrowserRouter>
  );
  

2. 调整electron-builder打包配置 #

在项目的package.json中完善build配置，确保静态资源被正确打包：

{
  "build": {
    "appId": "com.your.app.id",
    "asar": true,
    "files": [
      "build/**/*",
      "main.js",
      "node_modules/**/*"
    ],
    "directories": {
      "output": "dist"
    }
  }
}

3. 修正Electron主窗口的页面加载路径 #

确保主进程中根据打包状态加载正确的页面路径，避免绝对路径错误：

// main.js
const path = require('path');
const { app, BrowserWindow } = require('electron');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  if (app.isPackaged) {
    // 打包后加载本地build目录的index.html
    mainWindow.loadFile(path.join(__dirname, '../build/index.html'));
  } else {
    // 开发环境加载React dev server
    mainWindow.loadURL('http://localhost:3000');
  }
}

app.whenReady().then(createWindow);

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