如何在生产期间在 electron 中路由反应应用程序

Question

I am using electron 6.10.0 and using React.js.

In my app, there is an add task option in menu, which creates a new window.

Everything works fine during development, but during production this line causes problem.

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

It loads index.html, through which it loads index.js and which renders router.js. This is the code in Router.js.

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

Mainwindow works fine because the hash is ' / ' but for add window the hash doesn't change and it loads the mainwindow content again in addwindow.

How to use the route/Router during production, or is there any other way around.

Thanks in advance.

Answer 1

Ok, I solved it by adding #/add at the end of the link, like this:

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

Answer 2

In my case, I had a problem with a hash fragment in a path that is encoded as /build/index.html%23add , and that file/url doesn't exist.

I added hash property to url format and all works fine.

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

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

Answer 3

I had the same issue while trying to build electron/react app. url.format() works like a charm but unfortunately it's deprecated since node v11. I made a simple helper function that uses new URL class syntax.

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