HashHistory 与 BrowserHistory答案

【问题标题】：HashHistory vs. BrowserHistoryHashHistory 与 BrowserHistory
【发布时间】：2017-04-29 01:06:14
【问题描述】：

我正在使用带有 Webpack-Dev-Server 和 React-Router 的 Node。

在我的app.js 文件中，我有：

<Router history={browserHistory}>
  <Route path="/" component={Layout}>
    <IndexRoute component={FindFriends} />
    <Route path="/you" component={YouAndYourFriends} />
  </Route>
</Router>

使用browserHistory浏览器返回错误：Cannot GET /you

当我将browserHistory 更改为hashHistory 时，一切正常。

我的错误在哪里？或者你应该用browserHistory做什么？

【问题讨论】：

我认为问题在于节点服务器需要帮助来支持pushState。 Webpack 将所有内容都放在一个包中，并且 node 无法识别应该使用同一个文件提供子页面。如果您仔细检查输出，您应该会看到一条消息告诉您安装 pushstate：npmjs.com/package/pushstate-server
见stackoverflow.com/questions/36289683/…
youtube.com/…

标签： reactjs browser-history webpack-dev-server

【解决方案1】：

我遇到了这个问题。通过将以下内容添加到我的webpack.config.js

来解决它

devServer: {
  historyApiFallback: true,
  contentBase: path.join(__dirname, "dist"), // Not Related but important
}

您也可以通过命令行切换此选项： https://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option

在我的例子中，我通过将它放在配置文件中来让它工作。

祝你好运！

【讨论】：