Electron

Question

我在摆弄 react、react-router 和 electron，我创建了一个像这样的简单路由器：

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

我可以在我的浏览器和 electron 应用程序上看到所有路由没有问题，但有一个问题。如何使用 <ElectronBrowserWindow>.loadURL(); 直接加载 /popup 页面？这是我拥有的：

    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
    );

感谢您的帮助:3

Answer 1

您将无法使用与 Electron 中的 HTTP URL 相同的语法加载基于哈希的条目文件 URL BrowserWindow.

下面的模式应该有效：

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

Answer 2

好吧，我只是环顾四周，发现了同样的东西 post：

这是@IronWaffleMan 的回答：

基本上，我只需要输入 file://${path.join(__dirname, "../build/index.html#popup")}

Electron - React - React Router 加载自定义路由(eg: example.com/#/popup)

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

reactjs

react-router

electron-builder

react-router-dom