electron-react-boilerplate :sub window on clicking a button - reactjs

Question

i have a doubt that how the reactjs file can be loaded into a new window on
clicking a button in electron-react-boilerplate.
const handleVideoCall=()=>{
const remote=require('electron').remote;
const BrowserWindow=remote.BrowserWindow;
const win = new BrowserWindow({
height: 600,
width: 800,
});
win.loadFile(fileName);
}
handleVideoCall is the method which is called on clicking the button.
FileName is the reactjs file that i needed to open.
As there is no documentation from react-electron-boilerplate i was stuck with this. Any help is appreciable.

Answer 1

i got the answer i think that this will be helpful for lot of peoples as there are no documentation for electron-react-boilerplate.
Make the nodeIntegration to true or preload js.
const handleVideoCallNew = async number => {
const remote=require('electron').remote;
const BrowserWindow=remote.BrowserWindow;
const win = new BrowserWindow({
height: 600,
width: 800,
frame:false,
webPreferences: {
nodeIntegration: true,
}
});
win.loadURL(`file://${__dirname}/app.html#/login`);
}
And on the router file
<Route path="/login" component={Login} />
By using this code we can open the reactjs file and route to login. The app.html is main file which is loaded in main.dev.js in electron-react-boilerplate code. The hashing is simplest method to open the reactjs file.
As the loadURL in electron only loads urls and htmls files we can't open js files. So open the main app.html and hash using routes.

Answer 2

Just create a react videoCall Component then create a window and load a url with query params like this,
const videoCallWidow = new BrowserWindow({
height: 600,
width: 800,
webPreferences: {
nodeIntegration: true,
webSecurity: false,
},
})
videoCallWidow.loadURL(
url.format({
pathname: path.join(__dirname, '../build/index.html'),
protocol: 'file:',
slashes: true,
query: {
page: 'videoCall',
},
})
)
after that, In your index.js file you will get query params so on that you can put a condition to load videoCall Component or app component .
ReactDOM.render(
locationPath === 'videoCall' ? <videoCallComponent /> : <App />,
document.getElementById('root')
)