React Reloading Page 不适用于服务器，但适用于本地主机

Question

我一直在寻找这个问题的答案，但还没有找到解决方案。也许只是因为我不理解这里给出的其他答案在 Whosebug

我的情况：我有一个 React 应用程序运行 React Router v4。我的申请在 http://localhost:3000/myApp and for production under http://myserver/myApp

下运行

我的问题：每当我在本地主机上刷新页面时，一切正常。我可以毫无问题地复制粘贴 URL，一切都完美无缺。当我在服务器上这样做时，出现错误 "Not Found" ...

我的想法/到目前为止我尝试过的：我想我不完全理解客户端和服务器端路由之间的区别。我以为我这样做了，但不知何故，它在本地主机上工作，但在服务器上不工作，这对我来说没有意义。

所以实际上我不确定问题是否出在 client/serverside 上，或者是因为我的应用程序不在根目录中运行。 localhost 上的 /myApp 只需添加一个 <BrowserRouter basename='/console'> 这可能是个问题吗？服务器无法正确解释？由于服务器是一个 apache 服务器，后面有很多配置我不太明白（它是一个业务服务器，托管其他应用程序....）。

我真的认为问题是我还没有实现服务器端路由...但为什么它在我的本地主机上工作？ webpack 开发服务器是否在幕后实现了它？

如果有人能帮助我，我将不胜感激。如果您需要更多信息，请随时询问:)

非常感谢

Answer 1

您需要有一个服务器来处理浏览器历史记录的重定向 api。在开发模式下，webpack-dev-server 会为你做这些，但是当你部署它时，你需要同样地配置你的网络服务器。

例如，在 apache 中，当请求与通过 .htaccess 的文件不匹配时重定向到索引：

Options +FollowSymLinks
IndexIgnore */*
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html

例如，在 express 中，您可以使用像 https://www.npmjs.com/package/express-history-api-fallback 这样的中间件来重定向。

nginx 示例

# Default server configuration
server {
  listen 80 default_server;
  server_name myserver.me;
  root /var/www/app;
  # Routes without file extension e.g. /user/1
  location / {
    try_files $uri /index.html;
  }
  # 404 if a file is requested (so the main app isn't served)
  location ~ ^.+\..+$ {
    try_files $uri =404;
  }
}

等等等等

React Reloading Page 不适用于服务器，但适用于本地主机

React Reloading Page doesn't work on Server, but works on localhost

client-server

reactjs

react-router