React项目打包发布到Tomcat页面空白问题及解决

更新时间：2023年06月09日 09:09:55 作者：KogRow

这篇文章主要介绍了React项目打包发布到Tomcat页面空白问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

React项目打包发布到Tomcat页面空白

按照教程在APP.js配置了路由，然后命令行执行cnpm run build打包，生成build目录，将其发布到SSM的webContent目录下，启动SSM项目后，访问index.html无内容。

原因：APP.js里是这样写的：

//根组件
import React from 'react';
import { BrowserRouter as Router,Route} from 'react-router-dom';
import Login from '../commponents/login';
import Home from '../commponents/index';
class App extends React.Component {
  render(){
    return(
    <Router >
      <div>
        <Route exact path="/" component={Login} /> {/*设置默认路由为登录页面*/}
        <Route exact path="/index" component={Home} /> {/*主要组件页*/}
      </div>
    </Router>
    )
  }
}
export default App;

在设置路由时，引入的是BrowserRouter会导致浏览器访问不到相应的路由配置，因此需要将BrowserRouter换成HashRouter。

React项目偶现白屏

背景：

1.使用Nginx做代理，把浏览器请求转发到COS上。
2.React使用browserHistory路由(cdn.com/user/list)方式。
3.刷新页面，偶现白屏

1.React Router

在React项目中，一般有两种路由方式。

browserHistory
hashHistory

ps: hashHistory 使用如 https://cdn.com/#/users/123 这样的 URL，取井号后面的字符作为路径。

browserHistory 则直接使用 https://cdn.com/users/123 这样的 URL。

2.页面部署配置

使用Nginx反向代理

server {
  ...
  location / {
    try_files $uri /index.html
  }
}

使用express，可以使用配置

app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

3.try_files的一个问题

try_files本身是不支持远程url的，这时，如果使用COS的话，就会出问题，所以可以这样写.

server {
  ...
  location / {
    try_files $uri $uri/ /index.html;
  }
  location /index.html {
    proxy_pass https://cdn.cos.myqcloud.com/ltz/index.html;
  }
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

React高级特性Context万字详细解读
React的context就是一个全局变量，可以从根组件跨级别在React的组件中传递。React context的API有两个版本，React16.x之前的是老版本的context，之后的是新版本的context
2022-11-11
使用store来优化React组件的方法
这篇文章主要介绍了使用store来优化React组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
react component changing uncontrolled in
这篇文章主要为大家介绍了react component changing uncontrolled input报错解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
谈谈React中的Render Props模式
这篇文章主要介绍了谈谈React中的Render Props模式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
React中的render何时执行过程
这篇文章主要介绍了React中的render何时执行过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
React中用@符号编写文件路径实现方法介绍
在Vue中，我们导入文件时，文件路径中可以使用@符号指代src目录，极大的简化了我们对路径的书写。但是react中，要想实现这种方式书写文件路径，需要写配置文件来实现
2022-09-09
React文件分段上传实现方法详解
这篇文章主要介绍了React文件分段上传实现方法，将文件切成多个小的文件；将切片并行上传；所有切片上传完成后，服务器端进行切片合成；当分片上传失败，可以在重新上传时进行判断，只上传上次失败的部分实现断点续传；当切片合成为完整的文件，通知客户端上传成功
2022-11-11
react + vite + ts项目中优雅使用.svg文件
这篇文章主要为大家介绍了react + vite + ts项目中优雅使用.svg文件,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
使用 React Router Dom 实现路由导航的详细过程
React Router Dom 是 React 应用程序中用于处理路由的常用库,它提供了一系列组件和 API 来管理应用程序的路由,这篇文章主要介绍了使用 React Router Dom 实现路由导航,需要的朋友可以参考下
2024-03-03
React-Hook中使用useEffect清除定时器的实现方法
这篇文章主要介绍了React-Hook中useEffect详解(使用useEffect清除定时器),主要介绍了useEffect的功能以及使用方法，还有如何使用他清除定时器，需要的朋友可以参考下
2022-11-11