React项目部署到tomcat刷新页面404解决方案

一、问题描述

React项目部署到tomcat后,能正常访问和操作,但只要一刷新,页面就报404找不到了。

二、原因

原来之所以你在开发时候可以由首页跳转到其他路由地址,是因为这是由前端自行渲染的,即在React Router定义了对应的路由,有router更改了location,实际并没有刷新网页访问后台。所以页面没有问题。但是部署到tomcat中,当你刷新时,此时并不是之前的客户端通过router来更改location,而是直接访问的后台该页面地址,然后后台返回页面到浏览器上。并没有经过前台的路由(react所有的路由都是在index.html中来转发,所以必须要任何请求必须要经过index.html),所以就报404了。

注:上面出现的问题,react-router模式为BrowerRouter才会有这种问题,HashRouter不会出现问题,因为hash路径并没有改变路径,只是在同一个路径增加参数而已。

三、解决方案

我们需要对报404的页面进行重定向到index.html,剩下的就会由react-router来进行路径跳转。

我们进入tomcat目录下的conf文件夹,编辑该目录下的web.xml,加入下面一段代码:

    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
配置web.xml

重启tomcat服务器,刷新页面,成功访问。

参考:react打包后放到tomcat嵌套路由消失以及刷新页面404解决方案

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容