Маршрутизация хэша в производственном файле бросания не найдена ошибка

Я использую шаблон electronic-react-generator и хочу открыть компонент в новом BrowserWindow. Есть несколько вопросов и ответов о том, как это сделать, но ни один из них не работает после упаковки приложения.

Вопросы / ответы, которые я нашел:

В своем компоненте я попытался использовать следующие строки, чтобы открыть новое окно с другим маршрутом.

wind.loadURL(`file://${__dirname}/app.html#/video`)

wind.loadURL(`file://${Path.join(__dirname, '../build/app.html#/video')}`)

wind.loadURL(`file://${Path.join(__dirname, '../build/index.html#/video')}`)

Первый работает при запуске yarn dev, но не в производстве. Все они выдают ERR_FILE_NOT_FOUND для соответствующих путей.

Вот как настроены мои маршруты:

export default function Routes() {
  return (
    <App>
      <HashRouter>
        <Route exact path={routes.HOME} component={HomePage} />
        
        <Route path={routes.VIDEO} component={VideoPage} />
      </HashRouter>
    </App>
  );
}

Есть ли простой способ разрешить маршрутизацию при открытии нового BrowserWindow с использованием маршрутизатора React?


reactjs electron electron-react-boilerplate
person Tristan    schedule 12.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Отличное время. Я был в одной лодке последние несколько дней, просто понял это. За исключением того, что я не перешла на HashRouter, как вы. Скорее, я оставил всю маршрутизацию по умолчанию electron-react-boilerplate, например ConnectedRouter. Может, в любом случае сработает.

https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/1853#issuecomment-674569009

__dirname работает только в dev. Я использовал DebugTron, чтобы проверить, какие URL-адреса загружаются для каждого ресурса, и это было file://path/to/app.asar/something. Потом я придумал, как получить путь к асару. Это сработало для меня как в разработке, так и в продукте, независимо от того, где находится приложение. Также необходимо установить nodeIntegration: true. Проверено на macOS.

const electron = require("electron")
//...
win.loadURL(`file://${electron.remote.app.getAppPath()}/app.html#/yourroutename`)

Более полный пример на случай, если кому-то также интересно, как загрузить другую страницу и передать ей аргументы:

import routes from '../constants/routes.json'
const electron = require("electron")
// ...
var win = new BrowserWindow({
  width: 400, height: 400,
  webPreferences: { nodeIntegration: true }
})
win.loadURL(`file://${electron.remote.app.getAppPath()}/app.html#${routes["ROOM"]}?invitationCode=${encodeURIComponent(code)}`)
win.show()

а в компоненте маршрут загружает:

const queryString = require('query-string')
// ...
constructor(props) {
  super(props)
  const params = queryString.parse(location.hash.split("?")[1])
  this.invitationCode = params.invitationCode
}
person sudo    schedule 16.08.2020