Wie React Router mit Electron verwenden?

Question

Mit this boilerplate als Referenz erstellte ich eine Electron App. Es verwendet Webpack, um die Skripte zu bündeln und den Server als Host zu verwenden.

Webpack-Konfiguration ist praktisch gleich wie this und Server this.

Electron Skript Lasten:

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

Und index.html lädt das Skript vom Server gehostet:

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

I electron index.js laufen die App und node server zu bauen Server zu starten Die Verwendung von Webpack bündelt die Skripte.

Es funktioniert gut, meine React Komponente App ist montiert. Aber wie integriere ich den react-router in diesen?

Ich implementierte es genauso wie ich in einer Browser-App. Ich bekomme diese Fehlermeldung:

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

Es wird Dateipfad als Route. Das Durchlaufen des Kesselplattencodes hat nicht geholfen. Was vermisse ich?

Answer 1

Eine andere Option wäre stattdessen hashHistory zu verwenden. Eigentlich, in Ihrem referenzierten Repo you can see that they're using hashHistory, wie wäre es, dies zu versuchen und zurück zu buchen?

Answer 2

Ich verwende React Router v4 und wollte nicht auf die HashRouter zu Rückfall, so dass ich es gelöst mit etwas unter den Gleichen von:

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

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

Answer 3

beste Option zum Zeitpunkt der this Antwort zu verwenden Sie die MemoryRouter, arbeitete für mich :)

Answer 4

der (aktuelle) react-router docs say:

Generally speaking, you should use a <BrowserRouter> if you have a server that responds to requests and a <HashRouter> if you are using a static file server.

Eine Electron App bas ist itisch ein statischer Dateiserver.

MemoryRouter kann auch funktionieren, solange das gesamte Routing aus dem React-Teil der App stammt. Es fällt nur aus, wenn Sie vom Browser-Prozess zu einer bestimmten Seite navigieren möchten, z. Sie möchten ein neues Fenster öffnen und direkt zur Seite "Allgemeine Einstellungen" navigieren. In diesem Fall können Sie tun dies mit HashRouter:

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

Ich glaube nicht, dass es eine Möglichkeit, mit MemoryRouter zu tun ist (aus dem Browser-Prozess).