react tomcat部署的一些问题总结

在tomcat下部署react静态资源会出现找不到文件404和页面没有内容的情况 要想了解问题的所在就先了解一些tomcat容器特性 html5特性和react特性，首先问题分为两大方面
第一个问题 404出现的原因
这个问题主要四用户在浏览器输入地址后浏览器去该地址获取文件没有获取到，所以出现了404 要想解决这个问题 只有重定向404

<?xml version="1.0" encoding="UTF-8"?>
<!--
 Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<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_4_0.xsd"
  version="4.0"
  metadata-complete="true">

  <display-name>Welcome to Tomcat</display-name>
  <description>
     Welcome to Tomcat
  </description>

<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>


</web-app>

这个是tomcat的设置的特性

第二个问题 页面内没有渲染内容，开发者模式没有报错

这个问题是react路由没有渲染找到内容
我的第一种解决方式是换掉 BrowserRouter路由改用HashRouter

//import { BrowserRouter as Router, Route } from 'react-router-dom';
import { HashRouter as Router, Route } from 'react-router-dom'

第二种方式是修改 Route地址 比如说我把react静态文件放在tomcat webapps下面build目录里 那我就把静态文件的根目录设置成/build，其他目录根据这个目录设置，值得注意的是这种方法必须要使用上面的web.xml,不然无法通过地址栏输入找到想要访问的网页

image.png

react没有渲染内容的原因是浏览器地址与route地址不匹配

其实还有一些方法 比如说通过react路由跳转 不通过地址栏输入也可以实现内容的显示 但是这样就像个残次品 用户体验不好
还有重点是说一下 html5特性 和react路由的实现 react是如何通过地址栏改变却没有出现404的，这主要是react只是通过js修改了网页地址栏的地址并且没有触发浏览器通过地址抓取内容的事件，虽然没有触发浏览器抓取的事件，但是页面却监听了地址栏变化事件 ，然后通过变化的值判断自己如何加载内容,这个就是react路由实现的原理