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

最新推荐文章于 2024-10-29 14:29:31 发布

原创最新推荐文章于 2024-10-29 14:29:31 发布 · 809 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

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

17 篇文章

订阅专栏

阿里云服务器

4 篇文章

订阅专栏

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

前言：在基于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