反应,电子和路由器

时间:2016-06-23 20:06:31

标签: javascript reactjs webpack react-router electron

我目前正在调整我使用的简单网络应用程序(使用React和Redux)到本机桌面应用程序。

我正在使用GitHub的Electron和Webpack来做到这一点。如果我使用来自React-Router的hashHistory,一切都很好..但是我想使用browserHistory,所以我的应用程序在作为webapp运行时仍然看起来很好(URL-wise)。如果我这样做,我会收到以下错误:

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

这对我有意义。我正在加载index.html作为Electron的主要文件:

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

我只是想知道是否可以将browserHistory与React-Router和Electron一起使用。如果有人知道会非常感激!

1 个答案:

答案 0 :(得分:2)

不完全是。但是还有更好的解决方案。

您应该将您的反应应用程序与引导程序文件分开。 Bootstrap文件加载你的应用程序并从外面传递一些额外的参数。

在您的情况下,您将创建两个引导程序文件,一个用于电子 - 带有memoryHistory(我认为它对电子更好),第二个用于具有浏览器历史记录的浏览器。

电子 index-electron.jsx 的bootstrap文件示例:

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

浏览器的bootstrap文件示例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"));

在我的示例中,差异很小(仅限历史记录),但您可以进行更多更改。如你所见,我还从外部提供额外的开始参数(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。您的大部分代码都可以通过两个环境重复使用。它非常灵活。