sub window 생성

<aside> 💡 button 클릭 시 윈도우를 연다고 가정 electron 11 기준

</aside>

1. renderer 프로세스에서 remote 사용 가능하도록 변경

   // main.dev.ts
   
   webPreferences: {
   	...
     enableRemoteModule: true,
   },
   

2. 클릭 콜백함수 정의 및 콜백 등록

   // App.tsx
   
   const handleMyCallback = async () => {
     const remote = require('electron').remote;
     const BrowserWindowa = remote.BrowserWindow;
     const win = new BrowserWindowa({
       height: 600,
       width: 800,
       webPreferences: {
         nodeIntegration: true,
       }
     });
     win.loadURL(`file://${__dirname}/index.html#/mymy`);
   }
   
   ...
   
   <button type="button" onClick={handleMyCallback}>
   

3. Route에 path 옵션 다르게 해서 추가

• Router는 HashRouter를 써야된다. (기존은 BrowserRouter)

  // App.tsx
  export default function App() {
    return (
      <HashRouter>
        <Switch>
          <Route path="/" component={Hello} />
          <Route path="/mymy" component={HelloB} />
        </Switch>
      </HashRouter>
    );
  }
  

  • 여기에 HelloB에 원하는 컴포넌트를 넣으면됨.

  Electron에서 react route 쓰는것에 대해 정리해놓은 글

  • https://2ssue.github.io/programming/electron-react-router/