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项目中，一般有两种路由方式。
browserHistoryhashHistory
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的 useReducer 使用场景及替代 useState
useStateuseReducer是 React 提供的状态管理 Hook,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2026-05-05
最近笔者在完成一个移动端小项目的过程中需要实现整屏翻页的效果；调研完毕之后,最终决定使用pullPage.js实现此功能,fullPage.js使用起来比较方便,并且官网上也给了在react项目中使用的demo,本文记录了这个第三方库的使用过程,感兴趣的朋友可以参考下2023-11-11
这篇文章主要介绍了React获取url后面参数的值示例代码,代码简单易懂，文末给大家补充介绍了react获取URL中参数方法，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了如何应用 SOLID 原则整理 React 代码之单一原则,今天，我们将从一个糟糕的代码示例开始，应用 SOLID 的第一个原则，看看它如何帮助我们编写小巧、漂亮、干净的并明确责任的 React 组件，需要的朋友可以参考下2022-07-07
react component changing uncontrolled in
这篇文章主要为大家介绍了react component changing uncontrolled input报错解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了React事件节流效果失效的原因及解决，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下2021-04-04
为实现多文件上传,需使用beforeUpload和customRequest替代onChange以避免多次调用问题,并处理文件路径以兼容Electron不同平台2025-08-08
这篇文章主要为大家介绍了react native图片解析流程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
useSWR 是一个 React Hooks,是 HTTP 缓存库 SWR 的核心方法之一,SWR 是一个轻量级的 React Hooks 库,通过自动缓存数据来实现 React 的数据获取,本文给大家介绍react:swr接口缓存案例详解,感兴趣的朋友一起看看吧2023-11-11
解决React在安装antd之后出现的Can''t resolve ''./locale''问题(推荐)
这篇文章主要介绍了解决React在安装antd之后出现的Can't resolve './locale'问题,本文给大家分享解决方案，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
最新评论