今天小编给大家分享一下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; }}
以上就是“nginx部署react刷新404如何解决”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网行业资讯频道。