React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React项目打包发布到Tomcat页面空白

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.React Router

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

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;
  }
}

总结

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

您可能感兴趣的文章:
阅读全文