React, Electron, und Router

Question

Ich bin derzeit eine einfache Web-App, die ich (mit React und Redux) in eine native Desktop-App gemacht.

Ich verwende GitHubs Electron und Webpack, um dies zu tun. Alles ist in Ordnung, wenn ich hashHistory von React-Router benutze, aber ich möchte browserHistory verwenden, damit meine App immer noch gut aussieht (URL-weise), wenn sie als Webapp läuft. Wenn ich dies jedoch tue, erhalte ich den folgenden Fehler:

Was für mich sinnvoll ist. Ich lade index.html als Hauptdatei für Electron:

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

Ich frage mich nur, ob es überhaupt möglich ist browserHistory zu verwenden, mit React-Router und Electron. Wenn jemand weiß, würde es sehr geschätzt werden!

Answer 1

Nicht genau. Aber es gibt sogar eine bessere Lösung.

Sie sollten die Bootstrap-Datei von Ihrer React-App trennen. Bootstrap-Datei, die Ihre App lädt und einige zusätzliche Parameter von außen weiterleitet.

In Ihrer Situation werden Sie zwei Bootstrap-Dateien erstellen, eine für Elektron - mit MemoryHistory (ich denke, es ist besser für Elektron) und die zweite für Browser mit Browser-Verlauf.

Beispiel der Bootstrap-Datei für Elektronen index electron.jsx:

import React from "react"; 
import ReactDOM from "react-dom"; 
import { createMemoryHistory } from "react-router"; 
import App from "./App.jsx"; 

const initialState = window.__INITIAL_STATE__; 
const config = window.__CONFIG__; 

const history = createMemoryHistory("begin-path"); 

ReactDOM.render(
    <App 
    config={config} 
    history={history} 
    initialState={initialState} 
    />, document.getElementById("root")); 

Beispiel für Bootstrap-Datei für Browser-Index-browser.jsx:

import React from "react"; 
import ReactDOM from "react-dom"; 
import { browserHistory } from 'react-router'; 
import App from "./App.jsx"; 

const initialState = window.__INITIAL_STATE__; 
const config = window.__CONFIG__; 

ReactDOM.render(
    <App 
    config={config} 
    history={history} 
    initialState={initialState} 
    />, document.getElementById("root")); 

In meinen Beispielen Unterschied ist klein (nur Geschichte), aber Sie können mehr Änderungen vornehmen. Wie Sie sehen, stelle ich auch zusätzliche Parameter von extern (initialState, config) zur Verfügung;

Und wie Ihre App sollte:

import React from 'react'; 
import { Router, Route } from 'react-router'; 
class App extends React.Component { 
    static propsTypes = { 
    history: React.PropTypes.object, 
    config: React.PropTypes.object, 
    initialState: React.PropTypes.object 
    }; 
    render() { 
    return (
     <Router history={this.props.history}> 
     <Route ...> 
      ... 
     </Route> 
     </Router> 
    ); 
    } 
} 
export default App; 

Above-Code ist nur Empfängnis. Es ist von meinem Projekt, wo ich veraltete Dinge entfernt habe. Daher kann es ohne irgendeine Änderung nicht funktionieren

Jetzt für Elektron verwenden Sie index-electron.jsx, und für Browser index-browser.jsx. Der meiste Code ist wiederverwendbar über beide envs. Und es ist sehr flexibel.