javascript - React、Electron 和 Router

Question

我目前正在将我制作的一个简单的 Web 应用程序(使用 React 和 Redux)改编为 native 桌面应用程序。

我正在使用 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 一起使用。如果有人知道，将不胜感激!

Answer 1

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

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

在您的情况下，您将创建两个引导文件，一个用于 Electron - 带有内存历史记录(我认为这对 Electron 更好)，第二个用于带有浏览器历史记录的浏览器。

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;

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

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