React、Electron 和路由器答案

【问题标题】：React, Electron, And RouterReact、Electron 和路由器
【发布时间】：2016-10-26 08:01:05
【问题描述】：

我目前正在将我制作的一个简单的网络应用程序（使用 React 和 Redux）改编成一个原生桌面应用程序。

我正在使用 GitHub 的 Electron 和 Webpack 来执行此操作。如果我使用来自 React-Router 的 hashHistory 一切都很好。但我想使用 browserHistory，所以我的应用程序在作为 web 应用程序运行时仍然看起来不错（在 URL 方面）。如果我这样做，我会收到以下错误：

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

这对我来说很有意义。我正在加载 index.html 作为 Electron 的主文件：

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

我只是想知道是否可以将 browserHistory 与 React-Router 和 Electron 一起使用。如果有人知道，将不胜感激！

【问题讨论】：

标签： javascript reactjs webpack react-router electron

【解决方案1】：

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

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

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

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

浏览器 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;

以上代码只是概念。它来自我的项目，在那里我删除了过时的东西。因此，如果不进行一些修改，它可能无法正常工作

现在对于 electron，您使用 index-electron.jsx，对于浏览器使用 index-browser.jsx。您的大部分代码都可以跨两个环境重用。而且非常灵活。

【讨论】：