React、Electron 和路由器

Question

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

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

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

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

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

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

Answer 1

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

您应该将 bootstrap 文件与您的 React 应用分开。 Bootstrap 加载您的应用程序并从外部向其传递一些额外参数的文件。

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

Electron bootstrap 文件示例 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"));

bootstrap 浏览器文件示例索引-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。您的大部分代码都可以跨两个环境重用。而且非常灵活。

React、Electron 和路由器

React, Electron, And Router

javascript

reactjs

webpack

react-router

electron