nginx部署react刷新404的解决办法:1、修改Nginx配置为“server {listen 80;server_name https://www.xxx.com;location / {root xxx;index index.html index.htm;...}”;2、刷新路由,按当前路径去nginx加载页面即可。
本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。
nginx部署react刷新404怎么办?
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; } }
推荐学习:《react视频教程》
以上是nginx部署react刷新404怎么办的详细内容。更多信息请关注PHP中文网其他相关文章!