生产引发文件中的哈希路由未找到错误

Question

我正在使用电子反应样板，并希望在新的BrowserWindow中打开一个组件。关于如何做到这一点，有很多问题和答案，但在打包应用程序后，它们都不起作用。

我发现的问题/答案：

• 如何使用React.JS处理Electron应用程序中的多个窗口
• 电子反应样板：单击按钮时的子窗口
• https://stackoverflow.com/a/47926513/3822043

在我的组件中，我尝试使用以下行打开一个通向不同路由的新窗口。

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')}`)

第一个在运行纱线开发时有效，但在生产中无效。它们都为各自的路径抛出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只在dev中工作。我使用DebugTron来检查每个资源加载的URL，它是file://path/to/app.asar/something。然后我想办法找到通往阿萨尔的路。无论应用程序位于何处，这在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
}