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，加入下面一段代码：

    
        404
        /index.html
    

配置web.xml

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

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