Как использовать React Router с Electron?

Используя этот шаблон в качестве ссылки, я создал приложение Electron. Он использует веб-пакет для связывания сценариев и экспресс-сервера для его размещения.

Конфигурация Webpack практически такая же, как this и сервер .

Электрон script нагрузки:

mainWindow.loadURL('file://' + __dirname + '/app/index.html');

И index.html загружает script, размещенный сервером:

<script src="http://localhost:3000/dist/bundle.js"></script>

Я запускаю electron index.js для создания приложения и node server для запуска сервера, который с помощью webpack связывает скрипты.

Он отлично работает, мое приложение приложения React смонтировано. Но как я интегрирую в нее реактивный маршрутизатор?

Я реализовал его так же, как в браузере. Я получаю эту ошибку:

[react-router] Location "/Users/arjun/Documents/Github/electron-app/app/index.html" did not match any routes

Он принимает путь к файлу в качестве маршрута. Прохождение кода плиты котла не помогло. Что мне не хватает?

Ответы

Ответ 1

Другой вариант - использовать hashHistory. Фактически, в вашем репозитории вы можете видеть, что они используют hashHistory, как насчет того, чтобы попробовать это и отправить назад

Ответ 2

Я использую React Router v4 и не хочу возвращаться к HashRouter, поэтому я решил его с чем-то вроде:

import { Redirect, BrowserRouter } from 'react-router-dom';

const App = () => (
  <BrowserRouter>
    <div>
      {window.location.pathname.includes('index.html') && <Redirect to="/" />}
    </div>
  </BrowserRouter>
);

Ответ 3

Лучшим вариантом во время этого является использование MemoryRouter, работал у меня:)

Ответ 4

(текущий) ответные документы-ответчики:

Вообще говоря, вы должны использовать <BrowserRouter> если у вас есть сервер, который отвечает на запросы, и <HashRouter> если вы используете статический файловый сервер.

Приложение Electron - это в основном статический файловый сервер.

MemoryRouter также может работать, пока вся маршрутизация происходит из части React приложения. Он падает только тогда, когда вы хотите перейти к определенной странице из процесса браузера, например. вы хотите открыть новое окно и перейти непосредственно к странице "Общие настройки". В этом случае вы можете сделать это с помощью HashRouter:

prefsWindow.loadURL(`file://${__dirname}/app/index.html#/general-prefs`);

Я не думаю, что есть способ сделать это с MemoryRouter (из процесса браузера).

Ответ 5

Первое, что я попробую, это загрузить index.html из http://localhost:3000 вместо файла://url.