通过文件协议拦截将React哈希路由传递给Electron

问题描述

我的Electron应用程序出现问题,重新加载本地文件失败。

Electron应用程序包装最初由create-react-app创建的React Web应用程序。 React应用程序是使用react-scripts构建的,整个构建文件夹(以及其他构建文件夹)然后使用Electron Forge打包,然后使用Squirrel Windows安装程序进行安装。文件夹结构如下:

Folder structure of the packaged application

React应用程序文件全部存在于此build文件夹中,包括启动时Electron应用程序加载的index.html。为了确保Electron可以正确找到我的文件,我在主electron.js中使用以下代码拦截文件协议:

protocol.interceptFileProtocol('file',(request,callback) => {
  const url = request.url.substr(String('file://').length);
  callback({ path: path.join(__dirname,'build',url) });
});

代码可以很好地加载和浏览React应用,但是在某些情况下,我希望允许用户使用刷新按钮刷新页面。我尝试了多种重新加载方式,但是每次尝试都遇到相同的问题:请求失败,状态为(Failed) ERR_FILE_NOT_FOUND

我已经在Google的所有网站中搜索了存在相同问题的其他人,而我发现的最接近的是this SO post,这是由于路由问题导致重新加载失败。我怀疑这里也可能是这种情况。该应用程序使用React Router并最初使用browserRouter。从那以后,我转而使用HashRouter,它会创建类似index.html#/route/path链接

我的应用程序具有/dashboard路由,根路径(/index.html)将自动重定向到该路由。我认为这是正在发生的事情:文件协议将正斜杠解释为文件路径中的其他文件夹,因此Electron尝试加载名为dashboard文件,而不是加载index.html。它应该将哈希(#)之后的所有内容解释为URI fragment,但相反,它尝试加载显然不存在的文件。正常浏览该应用程序时,似乎没有file://协议请求被提出,这解释了为什么仅在尝试重新加载时才出现此问题。

我确实发现this question关于访问本地文件的React路由。它似乎相关,但是它没有使用文件协议拦截,这似乎在影响我的结果。

最后要提出一个具体的问题:我如何告诉Electron我试图在文件末尾加载一个URI片段,而又没有试图将该片段解释为文件路径的一部分?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...