react-router browserHistory刷新页面4

造成404的原因相信你已经搞得很明白了，也知道了几种解决办法。

• 配置nginx

location /xxx {
  try_files $uri $uri/ /xxx/index.html;
}

• 放弃browserHistory使用hashHistory
• 使用其他插件
  但是如果我想通过java代理来控制呢？比如react部署在java控制的代理server下。其实原理上只需要用java来模拟nginx的try_files机制即可。
• redirect方式是无效的

    public void start() {

        get("/xxx", (request, response) -> memberCentre(request, response));
    }

    public String memberCentre(Request request, Response response) {
        response.redirect("/index.html");
        return "";
    }

• redirect和try_files的原理应该不一样，try_files应该是将file发送给客户端，而不是发送给客户端一个重定向消息从而使客户端请求/index.html，这样不能加载预期的页面，得到的是一个空白页面。try_files方式奏效的原理应该是客户端请求服务器二级页面，而Nginx截取这个请求，直接把index.html返回给客户端，客户端react拿到index.html后再渲染二级页面。这里是react的二级页面请求得到index.html，react根据二级页面请求再次渲染index.html。而如果是redirect的方式的话，服务端会重定向客户端，客户端会重新直接请求index.html，这里就丢失了本该是二级页面请求response的context，丢失了这个context，即使react拿到了index.html，也不知道该如何渲染页面。
• sendfile方式。

public String memberCentre(Request request, Response response) {
        response.sendfile("/index.html");
        return "";
}

• 如果你所使用的框架代码不支持sendfile方法，也可以直接读取index.html文件，把文件内容以字符串方式返回给客户端。

static {
        StringBuffer sb = new StringBuffer();
        try (BufferedReader br = new BufferedReader(new FileReader(react_index))) {
            String data = null;
            while ((data = br.readLine()) != null) {
                sb.append(data);
            }
        } catch (FileNotFoundException e1) {
            LOG.error("Get react index.html failed, " + react_index + " not exist", e1);
        } catch (IOException e2) {
            LOG.error("Get react index.html failed, " + react_index, e2);
        }
        index_content = sb.toString();
    }

    public void start() {

        get("/accounts/detail/*", (request, response) -> accountsDetail(request, response));
    }

    public String accountsDetail(Request request, Response response) {
        return index_content;
    }