nginx部署react刷新404如何解决

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

我们提供的服务有：网站建设、成都网站建设、微信公众号开发、网站优化、网站认证、光明ssl等。为成百上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的光明网站制作公司

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;
    }
}

以上就是“nginx部署react刷新404如何解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。

名称栏目：nginx部署react刷新404如何解决
本文网址：http://shouzuofang.com/article/pedhce.html