Electron+React路由问题：新建窗口加载组件提示URL资源不存在

问题描述 #

在Electron与React项目中使用HashRouter时，创建新窗口加载指定路径（/impresoras）的组件失败，提示错误“No resource with given URL found”，开发模式和生产模式下均出现该问题。

相关代码 #

electron.js 新建窗口函数 #

function impresoraConfigWindows(){
  impresoraConfigWin = new BrowserWindow({
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: true,
        preload: path.join(__dirname, "preload.js")
    },
    width:500,
    height:430,
    resizable:false,
    autoHideMenuBar:true,
    alwaysOnTop:true,
    title: 'imprimir'
});
impresoraConfigWin.loadURL(`file://${path.join(__dirname, '../build/index.html#impresoras')}`);
impresoraConfigWin.on('closed', ()=>{
    impresoraConfigWin = null;
});
}

App.js 路由容器配置 #

<HashRouter basename='/'>
    <Main cuentas={cuentas} printers={printers} impresoras={impresoras} logged={logged} setLogged={setLogged} cambio={cambio} setCambio={setCambio} planillas={planillas} gastos={gastos} cajas={cajas} targetas={targetas} fecha={fecha} setFecha={setFecha} sesion={sesion} facturas={facturas} categorias={categorias} setSesion={setSesion} socket={socket} mesas={mesas} ingredientes={ingredientes}  productos={productos} tickets={tickets}/>
</HashRouter>

Main.js 路由配置片段 #

<Routes>
    {/* 其他路由省略 */}
    <Route path='/impresoras' element={<Impresoras socket={socket} impresoras={impresoras}/>}/>
    {/* 其他路由省略 */}
</Routes>

问题原因分析 #

1. 哈希路径格式错误：当前loadURL中哈希部分为#impresoras，但React Router的路由path是/impresoras，HashRouter需要完整的哈希路径#/impresoras才能正确匹配。
2. 文件路径拼接问题：path.join在不同系统下的分隔符可能导致file URL格式异常，或者打包后__dirname的指向变化，导致无法找到index.html。
3. 生产模式路径适配缺失：Electron打包后，资源目录结构变化，原开发模式的路径不再适用。

解决方案 #

方案1：修正哈希路径格式 #

修改electron.js中的loadURL部分，将哈希路径改为#/impresoras：

const indexHtmlPath = path.join(__dirname, '../build/index.html');
impresoraConfigWin.loadURL(`file://${indexHtmlPath}#/impresoras`);

方案2：使用path.resolve确保路径正确性 #

用path.resolve代替path.join，避免系统分隔符问题：

const indexHtmlPath = path.resolve(__dirname, '../build/index.html');
impresoraConfigWin.loadURL(`file://${indexHtmlPath}#/impresoras`);

方案3：适配开发/生产模式的路径差异 #

引入electron-is-dev判断环境，分别配置路径：

const isDev = require('electron-is-dev');
let indexHtmlPath;

if (isDev) {
    // 开发模式指向本地build目录
    indexHtmlPath = path.resolve(__dirname, '../build/index.html');
} else {
    // 生产模式指向打包后的资源目录
    indexHtmlPath = path.join(__dirname, 'index.html');
}

impresoraConfigWin.loadURL(`file://${indexHtmlPath}#/impresoras`);

方案4：开发模式直接加载Dev Server #

如果开发模式下使用react-scripts的Dev Server，可以直接加载带哈希的服务器URL：

impresoraConfigWin.loadURL('http://localhost:3000/#/impresoras');

额外检查项 #

• 确认build目录存在，且index.html中的静态资源引用为相对路径（适配file://协议）。
• 检查preload.js的路径是否正确，避免因preload加载失败导致窗口异常。

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