react-router4：解决使用browserRouter模式导致的404问题

前言

众所周知，react一般会借助react-router来开发单页应用（spa）,这样浏览器就不会完全刷新，对用户视觉体验上非常好，这也就是现代web开发的常态，开发一个应用（application），而不是仅仅是页面（page，古老的web页面）。

react-router4

2018年，react-router最新的大版本是4，不同于前面的3，2，1，完全基于组件化思想，网上众说纷纭，褒贬不一，这里不表。

不变的还是路由的两种模式： hashRouter 和 browserRouter。

hashRouter会在路由跳转的url后面加上#/a/b,因为hash值发生变化，浏览器并不会向服务端发起请求。

browserRouter则借助html5里面history的新的api，可以使用js改变url的值，而不会向服务端发请求。

那我们该选择哪种模式，网上有的说选browser，有的选hash，这里暂且不表。我在项目中选择的browser，不要问我为什么。

import { BrowserRouter as Router, Switch} from "react-router-dom";
class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            <Switch>
                // 会做一下登录鉴权判断
                { RenderRoutes({routes:mainConfig}) }
            </Switch>
          </div>
        </Router>
      </Provider>
    );
  }
}
复制代码

问题

开发完成后，npm run build打包生成静态资源（html、css、js等），放到服务器给客户用（因为是前后端分离的项目，前端项目只要放在用户能访问到的地方，比如cdn、oss、服务器都行）。服务器通常需要启用web服务，比如nginx、apache，亦或node启动一个服务，指定静态资源文件地址。本次选用ngnx，配置好以后，只要把打包好的静态资源上传到服务器中ningx默认指定静态资源文件，就可以访问了。

但是当我们进去其他路由，如果刷新浏览器，就会报404错误，要想重新进入，必须返回路由默认首页。

解决

上面的问题其实是因为，刷新浏览器，相当于浏览器向服务端请求/manage/admin/list，但是服务端（或者nginx）并没有配置这样一个路由，找不到当然返回404。

那是不是就需要我们配置这样一个路由，当然不是，因为还有许多其他路由，这样配置当然不可能；其次，spa应用路由是在前端由react-router配置控制的。

解决办法就是，把找不到的路由，都返回index.html,这样刷新后，利用浏览器缓存，js会根据路由，控制应该那个页面显示。刷新前后还是同一个页面。真正的配置，只需要在nginx的配置，比如我使用的默认配置（/etc/nginx/conf.d/default.conf),加上如下

location / {

	   try_files $uri /index.html;

复制代码