Electron集成react-router-dom路由跳转报ERR_FILE_NOT_FOUND问题

我是Electron开发初学者，大概率遗漏了某项基础配置。我尝试在Electron应用中使用react-router-dom实现简单路由功能，但程序无法定位到正确的目标文件。
开发者工具中查看到的应用结构参考：app structure
路由核心代码如下：

ReactDOM.render(
    <HashRouter>
        <Routes>
            <Route path='/' element={<App />} />
            <Route path='ConfigurationEditor' element={<ConfigurationEditor />} />
        </Routes>
    </HashRouter>,
document.getElementById('root'));

点击跳转按钮修改window.location为"/ConfigurationEditor"时，抛出错误：Failed to load URL: file:///ConfigurationEditor with error: ERR_FILE_NOT_FOUND。
结合目录结构分析，报错符合预期：对应组件文件存放在top/.或top/syntax-configuration-editor目录下，而非file://协议根目录下。核心疑问是如何将相关目录正确映射到file://路径下（若该方向为正确解决思路）？

排查参考信息 #

• 应用窗口通过window.loadFile('index.html')方法加载创建
• 项目package.json中"homepage"字段配置为"./"，"build"字段配置如下：

"asar": true,
"files": [
      "**/*",
      "dist/",
      "node_modules/**/*",
      "package.json",
      "dist/main.js"
    ],

• 触发路由跳转的UI组件代码如下：

<Button className={styles.buttonStyle}
variant='contained'  
size='large'
color='primary'
fullWidth
onClick={(e) = {e.preventDefault;window.location.href="/ConfigurationEditor"}}
>
Configurations
</Button>

你之前想做file路径映射的思路完全走偏了，问题和文件存放位置没有任何关系，核心是前端路由的跳转方式用错了：

1. 你用的HashRouter是纯前端路由，所有路由切换都不会发起新的文件请求，始终在同一个index.html页面内靠JS渲染不同组件，根本不需要做路径映射。
2. 直接修改window.location.href为/开头的路径，会让Electron内置的Chromium直接跳转到file协议的磁盘根目录找对应文件，完全跳出React应用的运行上下文，必然报文件不存在的错误。

按以下步骤修改即可解决：

• 第一步：替换跳转逻辑，不要直接操作window.location，用react-router-dom v6官方提供的导航API
  函数组件内先引入useNavigate钩子：

  import { useNavigate } from 'react-router-dom'
  

  在组件内初始化导航方法，替换按钮的点击事件：

  // 组件内部
  const navigate = useNavigate()
  
  // 按钮onClick修正后
  onClick={(e) => {
    e.preventDefault() // 原代码漏了括号，preventDefault是函数需要调用才会生效
    navigate('/ConfigurationEditor')
  }}
  

  如果不想用钩子，也可以直接用react-router-dom提供的Link组件包裹按钮，本质逻辑一致。
• 第二步：统一路由路径写法，把路由表中ConfigurationEditor的路径补全前导斜杠，避免相对路径匹配异常：

  <Route path="/ConfigurationEditor" element={<ConfigurationEditor />} />
  

• 补充说明：如果非要手动写地址跳转HashRouter路由，地址格式必须是./index.html#/目标路径，因为HashRouter的路由是拼接在URL的#锚点后的，不会触发页面刷新。你当前的loadFile加载方式、homepage: "./"配置都是符合HashRouter使用要求的，不需要额外修改。

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