1

I'm currently working on an Electron React App.

My question in its core: How do you load a specific react page (path) in Electron, in a window for itself? I'd expect something like secondWindow.loadFile(path.join(__dirname, "../index.html#/somePath")); but unfortunately that doesn't work.

My question explained in its full depth: In my app, I have a main window and also a second window. My main window is simply the index.html file on the path /, where my second window is supposed to go with the path /report

Now, in the dev environment, I'm not facing any issues but once I build and distribute the app with electron-builder, the second window is simply blank.

In Main.ts

//main window
function createWindow(width: any, height: any) {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: width,
    height: height,
    fullscreen: false,
    webPreferences: {
      contextIsolation: true,
      preload: path.join(__dirname, "/preload.js"),
    },
  });
  mainWindow.loadFile(path.join(__dirname, "../index.html"));
}

//second window
function createPopupWindow(width: any, height: any) {
  popupWindow = new BrowserWindow({ 
    height: 300,
    width: 400,
    x: width - 400,
    y: height - 300,

    webPreferences: {
      contextIsolation: true,
      preload: path.join(__dirname, "/preload.js"),
    },
  });
  Menu.setApplicationMenu(null);
  popupWindow.loadURL("http://localhost:3000/#/report"); // The problem is this line
}

In React

class App extends Component {
    componentDidMount() {}

    render() {
        return (
            <HashRouter>
                <Switch>
                    <Route element={<WithNavbar />}>
                        <Route path="/" element={<OverviewPage />} />
                        <Route path="/stats" element={<StatsPage />} />
                    </Route>
                    <Route element={<WithoutNavbar />}>
                        <Route path="/report" element={<SelfReport />} />
                    </Route>
                </Switch>
            </HashRouter>
        );
    }
}

export default App;

I'm assuming the second window works in dev environment because of localhost. My goal is now, to also use loadFile instead of loadURL. How would I do that with a specific path and not just index.html file?

Scorpia
  • 375
  • 4
  • 15
  • I found the solution here: https://stackoverflow.com/questions/58092777/how-to-route-in-electron-react-app-during-production – Scorpia Apr 23 '22 at 16:04

0 Answers0