Question

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

我已经对此进行了一些阅读，并且我发现这个术语有点密集且难以理解，所以如果有人可以帮我拼出来，我真的很感激。

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

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

我理解这一点（或者如果我不合适，请纠正我。）

如果不首先进入服务器端JS，我想知道如何解决这个特定的问题。

我读过关于Heroku的信息 - 但是在安装之后，它似乎没有给出如何使一切运行起来的指导。我已经看过包含一个server.js文件的配置文件，该文件将应用程序挂钩到快速服务器上，但这也让我有点失望。

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

提前致谢。

Answer 1

警告：这只是一个初级答案。请自行承担风险。

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

现在，它如何运作？

案例1：您通过网址请求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：on .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.

启用react-router＆＃39; browserHistory＆＃39;在实时服务器上工作

1 个答案: