React-Router使用BrowerRouter刷新时无法跳转,附：vue的history模式刷新问题解决

如何保持使用BrowserRouter，并且还能支持我们在任意路由下刷新浏览器呢？

一：BrowserRouter与HashRouter的区别

BrowserRouter： A Router that uses the HTML5 history API (pushState,replaceState and the popstate event) to keep your UI in sync with the URL.

BrowserRouter使用H5的History API及其方法使我们的项目页面与路由保持一致。访问时与后端渲染的项目体验一致，每次路由改变都可视作路由发生了跳转，url看起来比较清爽。

HashRouter： A Router that uses the hash portion of the URL (i.e.window.location.hash) to keep your UI in sync with the URL.

HashRouter通过改变location.hash，监听其改变并渲染相应的页面。hash值的改变并不会发生页面跳转，这与Vue项目的默认模式是一致的（单页面应用）。

二：矛盾点与问题解决
使用BrowserRouter固然会很爽，但是我们在某个页面调试想刷新浏览器的时候，这就很令人抓狂了（如上），但我们又不想看到浏览器地址栏上有点膈应的——‘#’，就要想办法解决这个了。

出发点一：
我们知道在开发中， 我们通过webpack来将页面打包，通过webpack dev server服务器发送页面，当我们刷新页面时，路由的path(例如上面的‘/index’),服务器先当成了对某个接口的get请求，但是并没有该接口，所以页面返回了该错误。
我们期望webpack有个配置项可以帮我们做一个预处理，当返回了错误页面时，我们希望交给前端页面去处理显示。赶紧翻开了webpack官方文档，果然：

出发点二：
不知道小伙伴是否做过Vue项目，当我们将其router的mode改为history时，也会发生这样的错误，
之前我在工作中便遇到了，我们用了上面的解决办法，但是在上线后发现依旧不行，但是翻了vue-router的文档我们就知道，通过nignx还有解决办法：

vue-router的history模式

真奇怪，明明是找react-router的问题，怎么莫名其妙跑到vue的文档上看了呢，O(∩_∩)O