react项目打包部署上线完毕后，刷新报错404

报错分析：

在浏览器内可以从首页跳转到其他路由地址，而不报错是因为这些是由前端自己渲染的。React Router定义的对应路由，脚本并没有刷新访问请求后台数据，是JS动态更改的location。

当刷新时，先访问的是后台地址，反馈数据后再加载页面内的React代码，最后才在浏览器内执行，这时报错404。是因为后台并没有针对这个过程的路由给出返回的HTML内容，就没有执行React-Router。

 

只需要把原来的BrowserRouter替换成HashRouter,这样所有的请求都会定位在index.html页面，服务器端就不需要做任何的配置了。

 

路由控制为BrowserRouter时，URL是指向真实URL的资源路径，当通过真实URL路径访问网站时，由于路径是指向服务器的真实路径，而该路径下并没有相关的资源，所以访问时就报错404.

 

在React项目中采用React-Router来配置页面路由时，React-Router是建立在history基础上，常见的history路由方案有三种形式：

1、hashHistory

2、browserHistory

3、createMemoryHisory

 

在本地开发时使用BrowserRouter是不出现问题的，因为在webpack.config.js中使用了webpack-dev-server就已经做好了配置。

1. BrowserRouter： http://localhost:8080/abc/def
2. HashRouter： http://localhost:8080/#/abc/def

如果在服务器动态支持时就使用BrowserRouter，否则使用HashRouter。因为单纯的静态页面路径从/切换到/abc之后，这时刷新页面将会无法正常访问

 

如果觉得写服务器配置文件麻烦的话就直接使用HashRouter 。

来源：oschina

链接：https://my.oschina.net/u/4313887/blog/3710818