关于 React Router 页面刷新 404

1. 背景

团队的前端使用 React + React Router 开发单页应用（SPA），特别影响用户体验的一个痛点是：

• 浏览器刷新当前页面，提示 404
• 点击浏览器历史记录，提示 404
• 输入 URL，提示 404

Linux + Nginx 环境前端团队找到了解决方案，在 nginx.conf 添加如下代码即可：

location ~ /xxx/ {
  if ($request_uri ~* ^([^.]+|.*\.html)$){
    proxy_pass http://$proxy_ip/xxx-lk/index.html;
  }
  root /opt/wwwroot/;
  index /xxx/index.html;
}

location ~ /xxx-lk/ {
    root /opt/wwwroot/;
    index /xxx/index.html;
  }
}

即将上线的项目，客户使用 Windows 服务器，我们不得不在 IIS 完成同样的配置……

2. 路由原理

2.1. Server side

传统的 B/S 开发，在浏览器地址栏输入 http://example.com/about 后，浏览器请求 example.com 服务器，服务器接收请求之后解析 URL 得到 about，向浏览器发送「关于我们」页面。

2.2. Client side

使用客户端路由时，在浏览器地址栏输入 http://example.com/about 后：

1. 向服务器 example.com 发起请求，服务端路由找不到 /about，默认返回包含所需资源的页面 index.html。
2. 浏览器加载 React 和 React Router，路由初始化成功，将 /about 指向 About us 组件（Component）。
3. 浏览器 URL 为 http://example.com/about，客户端路由导航显示 About us 组件，隐藏其他组件。

2.3. React Router

React Router 是建立在 history 之上的，history 监听浏览器地址栏的变化并解析 URL 转化为 location 对象，然后 router 使用它匹配到路由，正确地渲染对应的组件。

常用的 history 有三种形式：

• browserHistory
• hashHistory
• createMemoryHistory

使用 React Router 时推荐用 Browser history，它使用浏览器的 History API 处理 URL，创建类似于 http://example.com/about 这样真实的 URL。

3. 解决方案

3.1. IIS

web.config

3.2. Nginx

nginx.conf

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

4. 参考资料

• 单页面应用路由实现原理：以 React-Router 为例
• React-router urls don't work when refreshing or writting manually
• React Training - Histories
• Web Configuration for Vue Applications Hosted in IIS
• URL Rewrite Module Configuration Reference
• Module ngx_http_core_module try_files