启用 react-router 的“browserHistory”在实时服务器上工作

Question

我已经构建了一个可以部署在我的开发服务器上的 React 应用程序，并且一切正常。我现在想将它上传到远程服务器，但这就是我遇到麻烦的地方。

我已经对此进行了一些阅读，我发现术语有点密集和难以理解，所以如果有人能帮我解释一下，我将不胜感激。

据我了解，如果您使用的是hashHistory，则您的 URL 很“丑陋”，但优点是它可以部署在实时服务器上。

相比之下，使用browserHistory（就像我一样）会为您提供“漂亮”的 URL，但是当您想要上传到服务器时会产生问题，特别是当您在嵌套 URL 处刷新页面时，因为服务器不会了解这一点 - react-router 正在创建虚假 URL，这些 URL 用于生成正确的 javascript 以在需要的地方加载组件。

我明白了（或者如果我不明白，请纠正我）。

在没有深入研究服务器端 JS 的情况下，我想知道如何解决这个特定问题。

我已经阅读了有关 Heroku 的信息 - 但是在安装之后，它似乎并没有提供太多关于如何启动和运行所有内容的指导。我见过包含server.js 文件的配置，该文件将应用程序连接到快速服务器，但这也让我有些失落。

如果有人能指出我正确的方向，我将不胜感激，记住这对我来说是全新的领域！非常感谢对术语和尽可能详细的解释。

提前致谢。

Answer 1

警告：这只是一个初级答案。阅读风险自负。

好的.. 让我们从相信一件事开始。 Every Web App Serve By Server;

现在，它是如何工作的？

案例 1： 您通过 URL 请求文件为 http://mart71.com/index.html 或 http://mart71.com，它为您服务 index.html

案例 2： 您对 http://mart71.com/products/2 的请求，它以产品页面（动态）作为 Id:2 的响应

好的.. 现在Single Page Application 是如何工作的？

如果是SPA，您的每一个请求都应该由index.html处理 因此，您请求http://mart71.com，服务器为“index.html”及其所有javascript 文件和您的Javascript 运行并显示需要在借贷页面上显示的内容。

您请求另一个 URI 作为http://mart71.com/products/2，首先它的负载index.html 及其所有javascript 和Javascript 运行并将浏览器历史状态推送到products/2（网址更改）并显示页面。在这种情况下，您的服务器不知道该页面上实际显示的内容。

这意味着什么？

Simply, setup your server to serve all request by `index.html`

怎么做？

Nginx：在 nginx.conf 上

location / {
    try_files $uri /index.html =404; // means what ever the url is, serve index.html
}

Apache：在 .htaccess 或 .conf 上

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

node.js express.js

don't try this at production.. considered as bad practice. Use Nginx or Apache as proxy server.