javascript - React、Electron 和路由器

Question

我目前正在将我制作的一个简单的网络应用程序(使用 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

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

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

在您的情况下，您将创建两个 Bootstrap 文件，一个用于 electron - 带有 memoryHistory(我认为它对 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。您的大部分代码都可以跨两个环境重用。而且非常灵活。