React Reloading Page在Server上不起作用，但在localhost上起作用

Question

我一直在尋找這個問題的答案，但是還沒有找到解決方案。 也許僅僅是因為我不理解這里關於stackoverflow的其他答案

我的情況：我有一個與React Router v4一起運行的React應用程序。 我的應用程序在http：// localhost：3000 / myApp下運行，並在http：// myserver / myApp下進行生產

我的問題：每當我刷新本地主機上的頁面時，一切正常。 我可以毫無問題地復制粘貼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

例如，在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;
  }
}

等等等