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?