Question

我正在使用电子6.10.0和React.js。

在我的应用中，菜单中有一个添加任务选项，它会创建一个新窗口。

在开发过程中一切正常，但是在生产过程中，这条线会引起问题。

addWindow.loadURL(isDev ? 'http://localhost:3000/add' : `file://${path.join(__dirname, '../build/index.html')}`);

它加载index.html，通过它加载index.js并呈现router.js。这是Router.js中的代码。

<HashRouter>
    <Switch>
      <Route exact path="/" component={App} />
      <Route exact path="/add" component={addWindow} />
    </Switch>
  </HashRouter>

Mainwindow可以正常工作，因为哈希是'/'，但是对于添加窗口，哈希不会改变，它会在addwindow中再次加载mainwindow内容。

在生产过程中如何使用路由/路由器，或者还有其他方法。

谢谢。

Answer 1

就我而言，我在编码为/build/index.html%23add的路径中的散列片段有问题，并且该文件/ URL不存在。

我将hash属性添加到url格式，并且一切正常。

const path = require('path')
const url = require('url')

url.format({
    pathname: path.join(__dirname, 'index.html'),
    hash: '/add',
    protocol: 'file:',
    slashes: true
})

Answer 2

好吧，我通过在链接末尾添加＃/ add来解决它，如下所示：

addWindow.loadURL(isDev ? 
'http://localhost:3000/add' :
`file://${path.join(__dirname, '../build/index.html#/add')}`);

Answer 3

我在尝试构建电子/反应应用程序时遇到了同样的问题。 url.format() 就像一个魅力，但不幸的是它自节点 v11 以来已被弃用。我做了一个简单的辅助函数，它使用了新的 URL 类语法。

const isDev = require('electron-is-dev');
const { URL } = require('url');

// Define React App dev and prod base paths
const devBasePath = 'http://localhost:3000/';
const prodBasePath = `file://${__dirname}/build/index.html`;

const constructAppPath = (hashRoute = '') => {
  const basePath = isDev ? devBasePath : prodBasePath;

  const appPath = new URL(basePath);

  // Add hash route to base url if provided
  if (hashRoute) appPath.hash = hashRoute;

  // Return the constructed url
  return appPath.href;
};

console.log('initial path', constructAppPath());
console.log('hash path', constructAppPath('/example/path'));

生产过程中如何在电子反应应用中进行路由

3 个答案: