获取Electron生产窗口以使用loadURL加载路线? [英] Get Electron production window to load a route with loadURL?
问题描述
我设法构建了我的react/electron应用程序,并使其在本地运行.但是,我的应用程序的默认"路由为/app
,因此,当我的应用程序在本地运行时,不会显示任何内容.这就是我所拥有的:
I've managed to build my react/electron app and have it run locally. However, the 'default' route for my app is /app
, so when my app runs locally, nothing shows up. This is what I have:
public/main.js:
public/main.js:
function createWindow() {
mainWindow = new BrowserWindow({
width: 400,
height: 400,
show: true,
frame: false,
transparent: true,
webPreferences: {
nodeIntegration: true,
preload: `${__dirname}/preload.js`,
},
});
const startURL = isDev
? "http://localhost:3000/app"
: `file://${path.join(__dirname, "../build/index.html")}`;
mainWindow.loadURL(startURL);
mainWindow.once("ready-to-show", () => {
// mainWindow.show()
mainWindow.setSize();
});
mainWindow.on("closed", () => {
mainWindow = null;
});
}
app.on("ready", createWindow);
src/index.js:
src/index.js:
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Route path="/app" exact component={App} />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
我正在使用react-router来完成这项工作.这确实可以在本地工作,但不适用于生产环境.为了测试这一点,我将 path ="/app"
更改为 path ="//"
,并删除了 exact
,并进行了构建,它按预期工作.但是,我确实希望它指向特定的/app
路由,因为我希望其他不相关的窗口位于其他端点.我如何使构建正确识别这一点?我尝试将 package.json
中的 homepage:"./"
更改为 homepage:" ./app"
什么都不会改变.
I'm using react-router to make this work. This does work locally, just not in production. To test this, I changed path="/app"
to path="/"
and removed exact
, built it, and it worked as expected. However, I do want this to point at that particular /app
route, since I want other unrelated windows to be at other endpoints. How do I get the build to recognise this properly? I've tried changing homepage: "./"
to homepage: "./app"
in package.json
but that didn't change anything.
我确实尝试将startURL更改为 file://$ {path.join(__dirname,"../build/index.html#/app")}
(添加#/app
,由建议这个答案),但是那也不起作用...
I did try changing the startURL to file://${path.join(__dirname, "../build/index.html#/app")}
(adding the #/app
, as suggested by this answer) but that didn't work either...
推荐答案
此答案分为两部分;第一个是错字.代替#/app
,添加 #app
是正确的(因此完整的字符串将变为 file://$ {path.join(__dirname,``../build/index.html#app")}
).
Turns out there's two parts to this answer; the first one was a typo. Instead of #/app
, adding #app
is correct (so the full string becomes file://${path.join(__dirname, "../build/index.html#app")}
).
另一个问题显然与react-router-dom和 BrowserRouter
有关;它在生产中不起作用.所以我有这个:
The other issue is related to react-router-dom and the BrowserRouter
apparently; it doesn't work in production. So instead I have this:
if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Route path="/app" exact component={App} />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
} else {
ReactDOM.render(
<React.StrictMode>
<HashRouter>
<Route path="/app" exact component={App} />
</HashRouter>
</React.StrictMode>,
document.getElementById("root")
);
}
HashRouter
在dev中不起作用,因此需要此代码.
The HashRouter
doesn't work in dev, hence the necessity of this code.
这篇关于获取Electron生产窗口以使用loadURL加载路线?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!