Как направить в приложении electronic React во время производства

Я использую электрон 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.

Как использовать маршрут / Маршрутизатор во время производства, или есть ли другой способ.

Заранее спасибо.


reactjs javascript electron electron-builder
person CVKM    schedule 25.09.2019    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Хорошо, я решил это, добавив # / add в конце ссылки, например:

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

arrow_upward
2
arrow_downward

В моем случае у меня возникла проблема с хеш-фрагментом в пути, который закодирован как /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
})
person Maksym Kotov    schedule 07.04.2020

arrow_upward
0
arrow_downward

У меня была такая же проблема при попытке создать приложение для электроники / реакции. url.format () работает как шарм, но, к сожалению, он устарел с версии node 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'));
person Martin    schedule 15.04.2021