Electron+React项目开发正常，生产环境报404 Not Found求助

问题根源 #

你遇到的404问题核心在于：React Router的createBrowserRouter依赖HTML5 History API，而Electron打包后应用运行在file://本地文件协议下，本地文件系统无法处理History模式的路由跳转（比如刷新子路由、直接访问子路由路径），导致请求找不到对应文件。

方案1：改用HashRouter（最省心） #

HashRouter通过URL哈希（#）管理路由，不受file://协议限制，生产环境可以直接正常工作，无需额外配置。

修改你的router.js：

// 替换原导入语句
import { createHashRouter, RouterProvider } from 'react-router-dom';

// 用createHashRouter替代createBrowserRouter
const router = createHashRouter([
  // 你的原有路由配置完全保留
  {
    path: '/',
    element: <App />,
    children: [
      // 子路由配置
    ]
  }
]);

export default function AppRouter() {
  return <RouterProvider router={router} />;
}

方案2：适配BrowserRouter（需Electron主进程配置） #

如果坚持使用History模式，需要在Electron主进程中拦截导航请求，将所有非资源文件的路由请求重定向到index.html，让React Router处理路由逻辑。

修改main.js的窗口配置部分：

const mainWindow = new BrowserWindow({
  // 你的窗口配置项
});

// 拦截导航，处理History模式路由
mainWindow.webContents.on('will-navigate', (event, url) => {
  const parsedUrl = new URL(url);
  // 过滤掉资源文件请求，只处理路由路径
  const isResourceFile = url.endsWith('.html') || url.endsWith('.js') || url.endsWith('.css') || url.endsWith('.png');
  if (parsedUrl.protocol === 'file:' && !isResourceFile) {
    event.preventDefault();
    // 重定向到入口文件，交由React Router处理
    mainWindow.loadFile(path.join(__dirname, '../build/index.html'));
  }
});

// 确保生产环境加载路径正确
if (isDev) {
  mainWindow.loadURL('http://localhost:3000');
} else {
  // 这里的路径要和electron-builder打包后的文件结构匹配
  mainWindow.loadFile(path.join(__dirname, '../build/index.html'));
}

额外检查要点 #

1. 确认electron-builder配置（package.json中）正确包含了所有需要打包的资源：

"build": {
  "appId": "com.your.app.id",
  "files": [
    "build/**/*",
    "main/**/*"
  ],
  "directories": {
    "buildResources": "public"
  }
}

2. 检查public目录下的main文件夹是否被正确打包到生产环境，资源引用尽量使用相对路径，避免绝对路径导致的找不到文件问题。

内容的提问来源于stack exchange，提问作者Ashikur Rahman Munna