nginx部署react刷新404的解決辦法：1、修改Nginx配置為“server {listen 80;server_name https://www.xxx.com;location / {root xxx;index ?index.html index.htm;…}”；2、刷新路由，按當前路徑去nginx加載頁面即可。
nginx部署react應用，刷新路由報404
nginx部署react單頁應用時，如果跳轉到某一個路由，然后刷新當前路由，會報404.
個人認為：react為單頁應用，加載頁面靠路由，而路由不是真實的路徑，要靠js找頁面。而刷新路由后，按當前路徑去nginx加載頁面當然加載不到。如當前項目路徑為https://www.xxx.com/xxx/，nginx上的配置為：
server?{ listen?80; server_name?https://www.xxx.com; location?/?{ ????root?xxx; ????index??index.html?index.htm; } }
當請求https://www.xxx.com/xxx時，會到nginx下面找到該路徑，然后加載index.html。現在切換到路由https://www.xxx.com/xxx/home，刷新頁面后，實際請求的是xxx目錄下home項目里的index.html。如此，就報404了。
正確配置如下，包括80和443的配置：
server?{ listen?80; server_name?https://www.xxx.com; location?/?{ ????root?xxx; ????index??index.html?index.htm; ????rewrite?^/(.*)/(.*.js$)?/$1/$2?break; ????????rewrite?^/(.*)/(.*.map$)?/$1/$2?break; ????????rewrite?^/(.*)/(.*.css$)?/$1/$2?break; ????????rewrite?^/(.*)/(.*.(png|jpg|gif)$)?/$1/$2?break; ????rewrite?^/(.*)/(.*.(ttf|woff|woff2|svg|otf|eot)$)?/$1/$2?break; ????????rewrite?^/(.*)/?/$1/index.html?break; } } server?{ ????listen???????443; ????server_name??54.222.208.17; ????ssl??????????????????on; ?ssl_certificate??????/etc/nginx/your.pem; ?ssl_certificate_key??/etc/nginx/your.key; ?ssl_session_timeout??5m; ????#charset?koi8-r; ????#access_log??logs/host.access.log??main; ????location?/?{ ????????root?xxx; ????????index??index.html?index.htm; ????????rewrite?^/(.*)/(.*.js$)?/$1/$2?break; ????????rewrite?^/(.*)/(.*.map$)?/$1/$2?break; ????????rewrite?^/(.*)/(.*.css$)?/$1/$2?break; ????????rewrite?^/(.*)/(.*.(png|jpg|gif)$)?/$1/$2?break; ?rewrite?^/(.*)/(.*.(ttf|woff|woff2|svg|otf|eot)$)?/$1/$2?break; ????????rewrite?^/(.*)/?/$1/index.html?break; ????} }
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
