如何阻止React/Electron重写GET请求？解决路由传参异常

问题原因 #

Rewriting GET /index.html/3D-Graph/?graph-path=3D-Graph to /index.html 是Electron加载本地文件时的Chromium默认行为。当你用file://协议加载index.html后，React路由的路径会被拼接到index.html后面，形成类似file:///xxx/index.html/3D-Graph的格式——但本地文件系统里不存在index.html文件夹下的3D-Graph路径，Chromium找不到对应资源，就自动重写回index.html，导致React路由失效。

解决方案 #

方案1：改用哈希路由（最简单） #

把BrowserRouter换成HashRouter，哈希路由的路径会放在#后面，不会被Chromium当成文件路径处理，自然不会触发重写。

修改App组件的路由导入和使用：

import { HashRouter as Router, Routes, Route } from 'react-router-dom';

export default function App() {
  return (
      <Router>
        <Routes>
            <Route path="/3D-Graph/*" element={
              <UserContext.Provider value="3D-Graph">
                <GraphApp />
              </UserContext.Provider>
            } />

            <Route path="/" element={
              <UserContext.Provider value="2D-Graph">
                <GraphApp />
              </UserContext.Provider>
            } />
        </Routes>
      </Router>
  );
}

获取参数的代码无需修改，useLocation().search依然能正常拿到graph-path参数。

方案2：注册Electron自定义协议（保持BrowserRouter） #

如果想继续使用BrowserRouter的路径风格，可以在Electron主进程中注册自定义协议，把所有路由请求都映射到index.html。

主进程代码示例：

const { app, BrowserWindow, protocol } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
    },
  });

  // 注册自定义协议"app://"
  protocol.registerFileProtocol('app', (request, callback) => {
    // 去掉协议前缀，解析路径
    const url = request.url.replace('app:///', '');
    let targetPath = path.join(__dirname, '../build', url);
    
    // 如果路径没有后缀（说明是React路由），直接返回index.html
    if (!path.extname(targetPath)) {
      targetPath = path.join(__dirname, '../build', 'index.html');
    }
    
    callback({ path: targetPath });
  });

  // 用自定义协议加载应用入口
  mainWindow.loadURL('app:///index.html');
}

app.whenReady().then(createWindow);

这样所有app:///3D-Graph这类路由请求都会被导向index.html，React路由就能正常工作了。

方案3：IPC通信传递路径（更贴合Electron原生场景） #

既然是Electron应用，完全可以绕过路由，直接用主进程-渲染进程的IPC通信传递文件路径，避免路由和文件系统的冲突。

1. preload脚本（暴露IPC接口给React）：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  // 调用主进程获取图表路径
  getGraphPath: () => ipcRenderer.invoke('get-graph-path'),
});

2. 主进程（提供路径数据）：

const { ipcMain } = require('electron');

// 处理渲染进程的路径请求
ipcMain.handle('get-graph-path', async () => {
  // 这里替换成你从主进程获取的实际文件路径
  return '/path/to/3D-Graph.html';
});

3. React组件（调用API获取路径）：

import { useEffect, useState } from 'react';

function GraphApp() {
  const [htmlFile, setHtmlFile] = useState('');

  useEffect(() => {
    // 调用Electron暴露的API获取路径
    window.electronAPI.getGraphPath().then(filePath => {
      setHtmlFile(filePath);
    });
  }, []);

  // 渲染HTML内容
  return <div dangerouslySetInnerHTML={{ __html: htmlFile }} />;
}

这种方式更符合Electron的原生通信模式，不需要依赖路由传递参数，也不会有路径冲突问题。

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