获取 Electron production window 以使用 loadURL 加载路由？

Question

我已经成功地构建了我的 react/electron 应用程序并在本地安装了它运行。但是，我的应用程序的 'default' 路由是 /app，因此当我的应用程序在本地运行时，没有任何显示。这是我的：

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 路线，因为我希望其他不相关的 windows 位于其他端点。如何让构建正确识别这一点？我试过在 package.json 中将 homepage: "./" 更改为 homepage: "./app"，但这并没有改变任何东西。

编辑：我确实尝试将 startURL 更改为 file://${path.join(__dirname, "../build/index.html#/app")}（按照的建议添加 #/app），但这也不起作用...

Answer 1

原来这个答案有两个部分；第一个是错字。添加 #app 而不是 #/app 是正确的（因此完整的字符串变为 file://${path.join(__dirname, "../build/index.html#app")}）。

另一个问题显然与 react-router-dom 和 BrowserRouter 有关；它在生产中不起作用。所以我有这个：

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 在开发中不起作用，因此需要此代码。

获取 Electron production window 以使用 loadURL 加载路由？

Get Electron production window to load a route with loadURL?

reactjs

electron

electron-builder