如何在使用 MemoryRouter 的 Electron React Boilerplate 应用程序中将 URL 加载到 BrowserView 中?

分享于2022年07月17日 electron electron-react-boilerplate node.js react-router-dom reactjs 问答
【问题标题】:如何在使用 MemoryRouter 的 Electron React Boilerplate 应用程序中将 URL 加载到 BrowserView 中?(How to load a URL into a BrowserView in an Electron React Boilerplate app that uses MemoryRouter?)
【发布时间】:2022-01-06 13:08:52
【问题描述】:

我正在使用 Electron React Boilerplate 构建一个 Electron 应用程序。 ERB 使用来自 react-router-dom 的 MemoryRouter。 我面临的问题是我想将 URL 加载到 BrowserWindow 内的 BrowserView 中。但是,我认为您不能像 BrowserRouter 和 React 那样通过 URL 访问页面/组件,MemoryRouter 将 URL 保存在内存中。

mainWindow = new BrowserWindow({
    show: false,
    width: 1024,
    height: 728,
    minWidth: 436,
    minHeight: 147,
    icon: getAssetPath('icon.png'),
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
    },
    frame: false,
  });

  mainWindow.loadURL(resolveHtmlPath('index.html'));
let browserView2 = new BrowserView({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
    },
  });

  browserView2.setBounds({ x: 25, y: 100, width: 1024, height: 728 });
  browserView2.setAutoResize({
    width: true,
    height: true,
    horizontal: true,
    vertical: true,
  });

  // I want to load a page from React into the BrowserView
  browserView2.webContents.loadURL('http://localhost:1212/desired-component');

  // However, I can load an HTML file into the BrowserView like this
  // browserView2.webContents.loadURL(
  //   `file://${path.resolve(__dirname, '../renderer/', 'desired-component.html')}`
  // );

  mainWindow?.setBrowserView(browserView2);


【解决方案1】:

请尝试用 BrowserRouter 替换 MemoryRouter

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

const Hello = () => {
  return 
hello...
; }; const World = () => { return
world...
; }; export default function App() { return ( } /> } /> ); }

然后尝试将页面加载到 browserView 中:

browserView.webContents.loadURL('http://localhost:1212/world');

  • 这解决了我的问题。但是我认为您不能将 BrowserRouter 与 Electron 一起使用,所以我从未想过我应该将其更改为 BrowserRouter,每篇文章都是关于将 HashRouter 和 MemoryRouter 与 Electron 一起使用等,但谢谢。