依靠nginx配置解决 react-router浏览器刷新页面404的问题

分类：Javascript| 发布：佚名| 查看：728 | 发表时间：2016/10/12

项目使用react-router，做成single page application，入口地址/home/hard/Project/game/web-client/build/html/index.html，通过域名domain.com就能访问到这个入口。

问题是，使用了路由之后，假如uri为domain.com/games.html，通过可以通过浏览器api跳转页面，可一旦刷新页面，就会报404。

我希望的是路由到某个uri之后，即使刷新页面，或直接在浏览器中输入这个uri，一样可以直接路由到games.html的页面。

解决

在论坛上提了问，几天了没人响应，也查不到相关的资料，所以说其实查不到的，也问不明白，还得靠自己探索。

使用node的服务器http-server

我一开始没多想，以为是nginx的问题，也许node的服务器天然支持这一点。换了，问题没有解决。

开始的nginx配置

01server{
02    listen 80;
03    server_name www.domain.com domain.com;
04    location ~* \.js$ {
05        root /home/hard/Project/game/web-client/build/js;
06    }
07    location / {
08        root /home/hard/Project/game/web-client/build/html/;
09    }
10}

这个导致404是很明显的，如果uri是domain.com/games.html，那么nginx会试图在/home/hard/Project/game/web-client/build/html/目录下找games.html,404是肯定的。

nginx rewrite解决

新的配置

01server{
02    listen 80;
03    server_name www.domain.com domain.com;
04    location ~* \.js$ {
05        root /home/hard/Project/game/web-client/build/js;
06    }
07    location / {
08        root /home/hard/Project/game/web-client/build/html/;
09    }
10    location ~* html {
11        rewrite .* /index.html break;
12        root /home/hard/Project/game/web-client/build/html/;
13    }
14}

增加了一个 location 用来配置uri里头有html的，我用html来标识是否是客户端页面。

通过rewrite .* /index.html break;把一切path重写为/index.html,break很重要,它使得url的匹配结束，最终服务返回的文档其实是/home/hard/Project/game/web-client/build/html/index.html。

那个break决定了浏览器里的url是不变的，而http响应的文档其实就是index.html，而浏览器上的path，会自动的被react-router处理，进行无刷新的跳转，我们看到的结果就是path对应了那个页面！

365据说看到好文章不转的人，服务器容易宕机！