踩坑笔记（十五）：React-Router browserHistory浏览器刷新出现页面404解决方案

煲仔灬饭

于 2021-01-12 20:23:22 发布

阅读量781

点赞数

CC 4.0 BY-SA版权

分类专栏：阿里云服务器踩坑笔记文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_43339112/article/details/112546238

踩坑笔记同时被 2 个专栏收录

17 篇文章

订阅专栏

阿里云服务器

4 篇文章

订阅专栏

基于React-Router的SPA项目部署上线后，刷新或访问具体路径时浏览器页面会出现404问题，原因是URL默认先经后端处理，而后端无对应路由处理模块或路径文件。可通过配置Nginx让访问的任何URI指向index.html解决，也可修改webpack-dev-server和后台node服务器配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：在基于React-Router的SPA项目部署上线后，会出现刷新或访问具体路径时浏览器页面404的问题，本质上是由于所有的URL默认先经后端处理，但后端无该路由处理模块或该路径/文件，导致返回404。该问题通过如下方式解决：

通过配置Nginx，访问任何URI都指向index.html，浏览器上的path，会自动被React-router处理，进行无刷新跳转。

  location / {
            root   html;
            index  index.html index.htm;
           try_files $uri /index.html;
        }

除此之外，据查阅，还可以通过修改webpack-dev-server和后台node服务器配置的方式更改。
具体可参考
https://www.thinktxt.com/react/2017/02/26/react-router-browserHistory-refresh-404-solution.html