Question

我正在使用电子反应样板，并希望在新的BrowserWindow中打开一个组件。有关如何执行此操作的问题和答案有很多，但打包应用程序后，它们都无法正常工作。

我发现的问题/答案：

在我的组件中，我尝试使用以下几行打开一个通往其他路线的新窗口。

wind.loadURL(`file://${__dirname}/app.html#/video`)

wind.loadURL(`file://${Path.join(__dirname, '../build/app.html#/video')}`)

wind.loadURL(`file://${Path.join(__dirname, '../build/index.html#/video')}`)

第一个在运行yarn dev时起作用，但不在生产中。他们都为各自的路径抛出ERR_FILE_NOT_FOUND。

这是我的路线设置方式：

export default function Routes() {
  return (
    <App>
      <HashRouter>
        <Route exact path={routes.HOME} component={HomePage} />
        
        <Route path={routes.VIDEO} component={VideoPage} />
      </HashRouter>
    </App>
  );
}

使用React的路由器打开新的BrowserWindow时，是否有一种简单的方法允许路由？

Answer 1

好的时机。过去几天我在同一条船上，只是想通了。除非，我没有像您一样更改为HashRouter。相反，我保留了所有路由内容，就像默认的electron-react-boilerplate一样，如ConnectedRouter。也许任何一种方法都可以。

https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/1853#issuecomment-674569009

__dirname仅适用于开发人员。我使用DebugTron来检查每个资源正在加载哪些URL，它是file://path/to/app.asar/something。然后我想出了通往阿萨尔（Asar）的途径。无论应用程序位于何处，这对我在dev和prod中都有效。您还需要设置nodeIntegration: true。在macOS上进行了测试。

const electron = require("electron")
//...
win.loadURL(`file://${electron.remote.app.getAppPath()}/app.html#/yourroutename`)

更完整的示例，以防万一有人想知道如何加载另一个页面并将参数传递给它：

import routes from '../constants/routes.json'
const electron = require("electron")
// ...
var win = new BrowserWindow({
  width: 400, height: 400,
  webPreferences: { nodeIntegration: true }
})
win.loadURL(`file://${electron.remote.app.getAppPath()}/app.html#${routes["ROOM"]}?invitationCode=${encodeURIComponent(code)}`)
win.show()

并在组件中加载路线：

const queryString = require('query-string')
// ...
constructor(props) {
  super(props)
  const params = queryString.parse(location.hash.split("?")[1])
  this.invitationCode = params.invitationCode
}

在生产抛出文件中找不到哈希路由错误

1 个答案: