如果用户导航到其他路线，电子 reactjs 应用程序在重新加载后显示空页面

Question

我用 create-react-app 创建我的项目。我使用 react-router-dom 作为路由器，使用 electron-builder 来打包我的应用程序。

当我第一次运行我的应用程序时，它工作正常，但一旦我重新加载页面，所有内容都变白了。如果我不导航到其他路线，该应用程序在重新加载后仍然有效。

下面是我的electron/index.js代码

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1280,
    height: 600,
    minWidth: 800,
    minHeight: 200,
    autoHideMenuBar: true,
    useContentSize: true,
    resizable: true,
    webPreferences: {
      nodeIntegration: true,
    },
  });
  mainWindow.loadURL(isDev
    ? 'http://localhost:3000'
    : `file://${path.join(__dirname, '../build/index.html')}`);
  mainWindow.focus();

  mainWindow.on('close', (e) => {
    if (willQuitApp) {
      /* the user tried to quit the app */
      mainWindow = null;
    } else {
      /* the user only tried to close the window */
      e.preventDefault();
      mainWindow.hide();
    }
  });
}

app.on('ready', createWindow);

Answer 1

我找到了答案。我只需要使用 <HashRouter> 而不是 <BrowserRouter>

Answer 2

重新加载后出现空白页面，因为当您导航到另一个页面时，您更改了 url。因此，当您重新加载时，电子将加载 url 而不是 index.html 文件

如果用户导航到其他路线，电子 reactjs 应用程序在重新加载后显示空页面

Electron reactjs app show empty page after reloading if user navigate to other route

javascript

node.js

reactjs

electron

electron-builder