Blank Screen on Non-Root URLs in Packaged Electron App with Multiple Windows

[satpro131]

Issue Description:

I am using the electron-react-boilerplate to build an Electron app that opens multiple windows. Each window is supposed to render a different route (e.g., /, /newtable, etc.).

In development mode, everything works fine, and all routes are displayed correctly. However, in the packaged app, only the root route (/) renders as expected. Any other route, such as /newtable, shows a blank screen.

Steps to Reproduce:

1. Use electron-react-boilerplate to create an Electron app.
2. Configure the app to open multiple windows with different routes.
3. Package the app using the provided packaging scripts.
4. Open the packaged app and navigate to a non-root route (e.g., /newtable).

Expected Behavior:

Each route should render correctly in its respective window.

Actual Behavior:

Only the root route (/) is rendered. Non-root routes display a blank screen.
In case I replaced MemoryRouter with BrowserRouter, it is working fine in development mode for all routes but not in packaged app even for (/).

Additional Information:

• Electron version: 31.3.0
• React version: 18.2.0
• Node version: 20.17.0
• OS: macOS ( I haven't tested with window)

Question:

What changes can I make to ensure all routes render correctly in the packaged app?

Below is my code

App.tsx

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import icon from '../../assets/logo.png';
import './App.css';
import './fonts.css';
import NewTable from './NewTable;

function Home() {
  const openNewTableWindow = () => {
    window.electron.ipcRenderer.sendMessage('open-new-table');
  };
  return (
    <div className="flex-1 justify-center items-center">
      <div className="flex justify-center items-center my-5 mx-0">
        <img width="200" alt="icon" src={icon} />
      </div>
      <h1 className="text-4xl text-cyan-500">Electron React Boilerplate</h1>
      <div className="flex justify-center items-center my-5 mx-0">
        <button type="button" onClick={openNewTableWindow}>
          Open New Window
        </button>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/newtable/:id" element={<NewTable />} />
      </Routes>
    </Router>
  );
}

main.ts

I have added below code to main.ts

ipcMain.on('open-new-table', () => {
  const newWindow = new BrowserWindow({
    width: 720,
    height: 576,
    webPreferences: {
      preload: app.isPackaged
        ? path.join(__dirname, 'preload.js')
        : path.join(__dirname, '../../.erb/dll/preload.js'),
    },
  });

  newWindow.loadURL(resolveHtmlPath(`newtable}`));
});

preload.ts

Updated preload.ts

// Disable no-unused-vars, broken for spread args
/* eslint no-unused-vars: off */
import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';

export type Channels = 'ipc-example' | 'open-new-table';

const electronHandler = {
  ipcRenderer: {
    sendMessage(channel: Channels, ...args: unknown[]) {
      ipcRenderer.send(channel, ...args);
    },
    on(channel: Channels, func: (...args: unknown[]) => void) {
      const subscription = (_event: IpcRendererEvent, ...args: unknown[]) =>
        func(...args);
      ipcRenderer.on(channel, subscription);

      return () => {
        ipcRenderer.removeListener(channel, subscription);
      };
    },
    once(channel: Channels, func: (...args: unknown[]) => void) {
      ipcRenderer.once(channel, (_event, ...args) => func(...args));
    },
  },
};

contextBridge.exposeInMainWorld('electron', electronHandler);

export type ElectronHandler = typeof electronHandler;

Thank you for your help!