最近在做一个Java Web项目,用react部署前端到tomcat上时,页面不能刷新,出现404的情况。排查到最后是路由的问题
先说BrowserRouter和HashRouter区别:
BrowserRouter:
原理是H5的history API,IE9及以下不兼容,需要由web server支持,在web client这边window.location.pathname被react router解析,example.com/react/route 一般项目实际用的比较多,browserHistory 是使用 React-Router 的应用推荐的 history方案
HashRouter:
原理是URL的hash,hash 地址就是指 # 号后面的 url,不需要由web server支持,因为它的只有‘/’path需要由web server支持,而#/react/route URL不能被web server读取,意味着不能使用this.props.location.state.index,在web client这边window,location.hash被react router解析,example.com/#/react/route,一般实际项目中使用的较少
区别转自(有部分修改):https://blog.csdn.net/weixin_30414245/article/details/94843416
分析出现404的原因:
react使用单页面应用时,只有一个index.html。当你刷新的时候tomcat会去找当前页面路径的xxx.html当然找不到,出现了404的情况。
解决办法:
1.将你的build目录全部复制到tomcat的目录下
自己react项目build的文件
2.将tomcat目录下的ROOT目录内容全部删除(位置:tomcat->webapps->ROOT)
3.然后将你复制的build内容复制到ROOT目录下
4.在ROOT目录下新建一个WEB-INF,在WEB-INF目录下新建一个web.xml文件,文件的内容如下(粘贴复制即可):
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1"
metadata-complete="true">
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
这样你的react前端页面就不会有404的问题了,最终的目录如下:
其他:
1.若你想在tomcat上新建一个前端发布目录,如build,你可在webapps目录下新建即可,但是需要配置tomcat的conf目录下的web里面配置你的目录将'/'设置成'/build'