React部署到 Tomcat上使用 BrowserRouter不能刷新404的问题

最新推荐文章于 2024-05-12 01:27:46 发布

原创最新推荐文章于 2024-05-12 01:27:46 发布 · 1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#React #Tomcat部署 #404问题

React项目专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在Java Web项目中，将React前端部署到Tomcat服务器时遇到的BrowserRouter刷新404问题。分析了BrowserRouter和HashRouter的区别，并提供了解决404问题的具体步骤，包括复制build目录、清理ROOT目录、创建WEB-INF和web.xml文件。

最近在做一个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.youkuaiyun.com/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的问题了，最终的目录如下：