nginx部署react刷新404如何解決

今天小編給大家分享一下nginx部署react刷新404如何解決的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

nginx部署react刷新404的解決辦法：1、修改Nginx配置為“server {listen 80;server_name https://www.xxx.com;location / {root xxx;index  index.html index.htm;...}”；2、刷新路由，按當(dāng)前路徑去nginx加載頁面即可。

nginx部署react應(yīng)用，刷新路由報(bào)404

nginx部署react單頁應(yīng)用時(shí)，如果跳轉(zhuǎn)到某一個(gè)路由，然后刷新當(dāng)前路由，會(huì)報(bào)404.

個(gè)人認(rèn)為：react為單頁應(yīng)用，加載頁面靠路由，而路由不是真實(shí)的路徑，要靠js找頁面。而刷新路由后，按當(dāng)前路徑去nginx加載頁面當(dāng)然加載不到。如當(dāng)前項(xiàng)目路徑為https://www.xxx.com/xxx/，nginx上的配置為：

server {
listen 80;
server_name https://www.xxx.com;
location / {
    root xxx;
    index  index.html index.htm;
}
}

當(dāng)請求https://www.xxx.com/xxx時(shí)，會(huì)到nginx下面找到該路徑，然后加載index.html。現(xiàn)在切換到路由https://www.xxx.com/xxx/home，刷新頁面后，實(shí)際請求的是xxx目錄下home項(xiàng)目里的index.html。如此，就報(bào)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;
    }
}

以上就是“nginx部署react刷新404如何解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請關(guān)注億速云行業(yè)資訊頻道。