Question

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

我的情况：我有一个与React Router v4一起运行的React应用程序。我的应用程序正在http://localhost:3000/myApp下运行，并在http://myserver/myApp下进行生产

我的问题：每当我在localhost上刷新页面时，一切正常。我可以毫无问题地复制粘贴URL，一切运行正常。在服务器上执行此操作时，出现错误“未找到” ...

我的想法/到目前为止我已经尝试过的事情：我想我不完全了解客户端路由和服务器端路由之间的区别。我以为是这样做的，但是对我来说，它可以在localhost上运行，但不能在服务器上运行。

所以实际上我不确定问题出在客户端/服务器端，还是因为我的应用程序不在根目录中运行。本地主机上的/ myApp只需添加<BrowserRouter basename='/console'>即可完成这可能是个问题吗？服务器无法正确解释该信息？由于该服务器是一台apache服务器，后面我有很多配置（我不是很了解它（它是一台商业服务器，用于托管其他应用程序...。）。

我真的认为问题在于我尚未实现服务器端路由...但是为什么它可以在我的本地主机上工作？ Webpack开发服务器是否在后台实现了该功能？

如果有人可以在这里帮助我，我将非常感谢。如果您需要更多信息，请随时询问：）

非常感谢您

Answer 1

您需要有一台处理浏览器历史记录api重定向的服务器。在开发模式下，webpack-dev-server将为您完成此操作，但是在部署它时，您需要同样配置您的Web服务器。

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

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

例如，您可以使用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在Server上不起作用，但在localhost上起作用

1 个答案: