获取Electron生产窗口以使用loadURL加载路线?

本文介绍了获取Electron生产窗口以使用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:

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:

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加载路线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

APP