解决react使用BrowserRouter部署后刷新页面报404

React Router的文档有说明，常用的 history 有三种形式， 但是你也可以使用 React Router 实现自定义的 history。

browserHistory

hashHistory

createMemoryHistory

browserHistory

Browser history 是使用 React Router 的应用推荐的 history。它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/some/path这样真实的 URL 。

hashHistory

Hash history 使用 URL 中的 hash（#）部分去创建形如 example.com/#/some/path 的路由。

createMemoryHistory

Memory history 不会在地址栏被操作或读取。这就解释了我们是如何实现服务器渲染的。同时它也非常适合测试和其他的渲染环境（像 React Native ）。和另外两种history的一点不同是你必须创建它，这种方式便于测试。

React Router 官方文档

---

HashRouter

本来项目开始我用的是HashRouter做路由跳转，打包丢服务器上之后发现URL上面带了一个 # 不怎么好看，就想说把它给去掉。然后把HashRouter改为BrowserRouter之后再打包上去发现有问题了。首次加载正常，但刷新页面时就报404了。BrowserRouter在开发环境下是没问题的，webpack的配置里面已经做了处理。但是服务器环境下是直接访问了服务器的真实路径，然而这路径下毛都没有，404就正常了。

404

解决方法：

1、使用hash模式，乖乖把BrowserRouter改回HashRouter

2、继续使用BrowserRouter，服务器做下配置。我这里的服务器是nginx，相对的使用 try_files 指令，当在服务器上找不到其他文件时，让 nginx 提供静态文件服务并指向index.html 文件

nginx配置

配置完了之后再回去重启一下nginx让修改的配置生效就ok了。