首页 > 运维 > nginx > 正文

nginx部署react刷新404如何解决

WBOY
发布: 2023-05-15 18:01:19
转载
3426 人浏览过

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如何解决的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:yisu.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!