electron react TS 打开子窗口显示路由页面

最近要实现微信企业号桌面端的tab页面用新窗口打开，踩坑无数终于实现 "electron": "^17.1.2", "@electron/remote": "^2.0.7",

不能在页面代码内直接创建新窗口，将会失败 要在页面内将创建命令传递给主进程那边统一创建 xxx.tsx 页面内代码

import { ipcRenderer } from 'electron'
...
const creatWin = () => {
    console.log("555")
    ipcRenderer.send('newwindow')
}
...

<Button className="MrMb8" type="primary" onClick={creatWin}>新窗口打开页面</Button>

主进程中接收创建命令来创建新窗口
xxx.js

const { app, BrowserWindow, ipcMain,globalShortcut } = require('electron');
...
let newWin;

const createWindow = () => {
   //主进程窗口
   const mainWindow = new BrowserWindow({
        height: 768,
        width: 1200,
        minWidth: 1200,
        minHeight: 768,
        show:false,
        frame:false,
        webPreferences: {
          webSecurity: true,
          nodeIntegration: true,
          nodeIntegrationInWorker: true,
          enableRemoteModule: true,
          contextIsolation: false,
        }
    });
    
    //监听页面传过来的创建窗口命令 创建子窗口
    ipcMain.on('newwindow',function(){
        console.log("创建-----------")
        if(newWin){
          newWin.focus() // 存在 则聚焦
          return
        }
        newWin = new BrowserWindow({
          width:900,
          height:620,
          minWidth:900,
          minHeight:620,
          frame:true,//是否显示顶部标题
          fullscreen:false, //是否全屏显示
          title:"项目名",
          autoHideMenuBar:true,
          webPreferences: {
            nodeIntegration: true,
            // 官网似乎说是默认false，但是这里必须设置contextIsolation
            contextIsolation: false,
            enableRemoteModule: true,
          }
        })
        require("@electron/remote/main").enable(newWin.webContents) 
        newWin.loadURL('http://localhost:3000/#/deskHomeccc')  // 此处写 你要打开的路由地址
        newWin.webContents.openDevTools();
        newWin.on('close',()=>{
          newWin=null
        })
     })

})

至此子窗口成功创建