Electron - React - React Router load custom route (eg: example.com/#/popup)

Question

I was messing around with react, react-router and electron and i created a simple router like this:

export const Router: FC = () => {
    return (
        <HashRouter>
            <Switch>
                <Route exact path="/">
                    <IndexPage />
                </Route>
                <Route path="/stats">
                    <StatsPage />
                </Route>
                <Route path="/popup">
                    <PopupPage />
                </Route>
            </Switch>
        </HashRouter>
    );
};

I can see all routes on my browser and electron app with no problem but there is a problem. How can I load /popup page directly with <ElectronBrowserWindow>.loadURL(); ? Here is what i have:

    popupWindow = new BrowserWindow({
        width: 260,
        height: 360,
        x: 0,
        y: 0,
        resizable: false,
        alwaysOnTop: true,
        webPreferences: {
            nodeIntegration: true,
            enableRemoteModule: true,
            devTools: false,
            contextIsolation: false,
        },
        frame: false,
        icon,
        title: "Brawlhalla Stats",
    });
    popupWindow.loadURL(
        isDev
            ? "http://localhost:3000/#/popup" // this one works
            : `file://${path.join(__dirname, "../build/index.html?#/popup")}`, // this one not
    );

thanks for all of your helps :3

Answer 1

Well, i just look around and found this same post: Get Electron production window to load a route with loadURL?

And here is @IronWaffleMan's answer: https://stackoverflow.com/a/65068333/10124281

Basicly, i just had to type file://${path.join(__dirname, "../build/index.html#popup")}

Answer 2

You won't be able to load a hash-based entry file URL using the same syntax as the an HTTP URL within an Electron BrowserWindow.

Below pattern should work:

popupWindow.loadURL(
    isDev
        ? url.format({
            protocol: 'file',
            pathname: `${path.join(__dirname, "..", "build", "index.html#popup")}`
            })
        : "http://localhost:3000/#/popup"
);