React项目偶现白屏

背景：

1.使用Nginx做代理，把浏览器请求转发到COS上。

2.React使用browserHistory路由(cdn.com/user/list)方式。

3.刷新页面，偶现白屏

1.React Router

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

1. browserHistory
2. 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;
  }
}