React、Electron、and Router

Question

私は、（ReactとReduxを使って）ネイティブデスクトップアプリケーションに作った単純なWebアプリケーションを現在適応させています。

私はGitHubのElectronとWebpackを使用しています。 React-Router ..からhashHistoryを使用するとすべてが問題ありませんが、webappとして実行しているときに私のアプリケーションがまだ見栄えが良い（URLに見える）ようにbrowserHistoryを使いたいと思います。これを行うと、次のエラーが表示されます。

No route matches path ".../index.html" 

私には意味があります。私は、電子のためのメインファイルとしてのindex.htmlをロードしています：

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

反応-ルータおよび電子とbrowserHistoryを使用することで、すべての可能性である場合、私はちょうど思ったんだけど。誰もがそれが大いに感謝されることを知っている！

Answer 1

正確ではありません。しかし、もっと良い解決策があります。

反応アプリからブートストラップファイルを分離する必要があります。 あなたのアプリを読み込み、外部からいくつかの追加のパラメータを渡すブートストラップファイル。

あなたの状況では、2つのブートストラップファイルを作成します.1つはmemoryHistory（電子の方が良いと思います）と2つ目のブラウザストラテジファイルです。

ブートストラップファイルの例は、電子のインデックス-electron.jsx：ブラウザインデックス-browser.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")); 

例：私の例差で

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")); 

が小さいです（履歴のみ）、さらに変更を加えることができます。ご覧のとおり、私は外部からの追加の開始パラメータも提供しています（initialState、config）。

そして、どのようにあなたのアプリケーションがすべき：上記のコード

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; 

は唯一の概念です。それは私のプロジェクトのもので、私は時代遅れのものを取り除きました。したがって、いくつかの変更を加えなければ動作しない可能性があります。

電子の場合はindex-electron.jsxを、ブラウザの場合はindex-browser.jsxを使用します。あなたのコードのほとんどは、両方のenvsを使用して再利用可能です。そしてそれは非常に柔軟です。