load react route in another electron window

Question

I am using hashrouter with electron-react-boilerplate. I noticed that the new window browser started showing white screen, thus, can't find any url to load after the app is packaged.

My route is configured this way

import { Route, Routes, HashRouter as Router} from 'react-router-dom';

<Router>
      <Routes>
        <Route path="/" index element={<LoaderScreen />} />
        <Route path="expired" index element={<ExpiredPage />} />
        <Route path="live" element={<LiveScreen />} />
        <Route key={1} path="/app/" element={<Layout />}>
          <Route key={1} index element={<FreeScreen />} />
          <Route key={1} path="simple" element={<FreeScreen />} />
          <Route key={3} path="schedule" element={<PaidScreen />} />
          <Route key={5} path="settings" element={<SettingsScreen />} />
        </Route>
      </Routes>
    </Router>

Any this is the function that resolves the url path

export function resolveHtmlPath(htmlFileName: string) {
  if (process.env.NODE_ENV === 'development') {
    const port = process.env.PORT || 1212;
    const url = new URL(`http://localhost:${port}`);
    url.pathname = htmlFileName;
    return url.href;
  }
  return `file://${path.resolve(__dirname, '../renderer/', htmlFileName)}`;
}

I need to load the component/route from main.ts into a separate window using hashrouter.Thanking you in advance

These are things that I have tried. This line of code loads the window when the development server is started liveWindow?.loadURL('http://localhost:1212#/app/settings') and since the package app does not run a server, I tried using this liveWindow?.webContents.loadURL(resolveHtmlPath('index.html#/app/settings')). I could still not get the route loaded.

I have also tried this file://${path.join(__dirname, '../build/index.html#/live')}); and file://${path.join(__dirname, '../renderer/index.html#/live')});

Answer 1

Did a little adjustment to the resolveHtmlPath function.

export function resolveHtmlPath(htmlFileName: string, hash?: string) {
  if (process.env.NODE_ENV === 'development') {
    const port = process.env.PORT || 1212;
    const url = new URL(`http://localhost:${port}`);
    url.pathname = htmlFileName;
    return url.href;
  }
  // Add hash here (if provided)
  return `file://${path.resolve(__dirname, '../renderer/', htmlFileName)}${
    // eslint-disable-next-line prefer-template
    hash ? '#' + hash : ''
  }`;
}

So I could do the url this way;

liveWindow?.webContents.loadURL(resolveHtmlPath('index.html', 'live'))