一度に複数のレンダラープロセスを、画面遷移とかではなく起動したいときがある。
例えば、以下のように書く。
ディレクトリ構成。
.
├ index.html
├ routes.tsx
├ src/
├ main.ts
├ renderer/
├ about.tsx
├ contact.tsx
index.html は以下のような感じ。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'" />
<title>Example</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="routes.tsx"></script>
</body>
</html>
HashRouterを使って component を読み込む。
routes.tsx
import React from "react";
import { createRoot } from 'react-dom/client';
import { HashRouter, Route, Routes } from 'react-router-dom';
import { About } from "./src/renderer/About";
import { Contact } from "./src/renderer/Contact";
const root = createRoot(document.getElementById('root') as HTMLElement);
root.render(
<HashRouter>
<Routes>
<Route path='about' element={<About />} />
<Route path='contact' element={<Contact />} />
</Routes>
</HashRouter>
);
これをメインプロセス側で以下のようにロードする。
main.ts
// /about
aboutWindow.loadURL(`file://${__dirname}/../renderer/index.html#/about`);
// /contact
contactWindow.loadURL(`file://${__dirname}/../renderer/index.html#/contact`);
参考ページ。