javascript - How to route in electron react app during production - Stack Overflow

admin管理员组

文章数量:1341686

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="/" ponent={App} />
      <Route exact path="/add" ponent={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.

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="/" ponent={App} />
      <Route exact path="/add" ponent={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.

• javascript
• reactjs
• electron
• electron-builder

Share Improve this question Follow edited Sep 25, 2019 at 8:06 CVKM asked Sep 25, 2019 at 7:02 CVKMCVKM 12311 silver badge77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

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

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

本文标签： javascriptHow to route in electron react app during productionStack Overflow