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的值，而不会向服务端发请求。(重点：这个api不会发请求，只是改变了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;

复制代码