如何解决nginx部署react刷新404的状况

发布时间：2023-07-04 11:00:42 所属栏目：教程来源：转载

导读： 　　给大家分享一下nginx部署react刷新404如何解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有

　　给大家分享一下nginx部署react刷新404如何解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

　　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;

　　    }

　　}

（编辑：航空爱好网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!