React项目打包发布到Tomcat页面空白问题及解决
作者: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; } }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。