我目前正在调整我使用的简单网络应用程序(使用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一起使用。如果有人知道会非常感激!
答案 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。您的大部分代码都可以通过两个环境重复使用。它非常灵活。