react-router browserHistory刷新页面404问题解决方法

使用React开发新项目时，遇见了刷新页面，直接访问二级或三级路由时，访问失败，出现404或资源加载异常的情况，本篇针对此问题进行分析并总结解决方案。

背景

使用webpack-dev-server做本地开发服务器时，正常情况只需要简单使用webpack-dev-server指令启动即可，但是当项目处于以下两种情况时，往往需要有嵌套路由和异步加载路由：

1. 我们使用react-router这种路由库构建单页面应用路由；
2. 使用html-webpack-plugin插件动态将加载js的<script>标签注入html文档；

这时，访问localhost:9090是可以正常加载页面和js等文件的，但是当我们需要访问二级甚至三级路由或者刷新页面时，如localhost:9090/posts/92时，可能会出现两种情况：

1. 页面加载失败，返回Cannot Get（404）；
2. 服务响应，但是没有返回webpack处理输出的html文件，导致无法加载js资源，第二种情况如图：

那么我们怎么处理才能正常访问，各页面路由呢？博主追踪溯源，查找文档配置后解决了问题，本篇就是对整个解决问题过程的总结。

分析问题

发现问题后，我们就要开始分析，解决问题了，我们判断这个问题一般是两方面原因造成：

1. react-router路前端由配置；
2. webpack-dev-server服务配置；

react-router

因为前端路由更容易确定问题，更方便分析，而且对于react-router更熟悉，所以首先去查询react-router路由库相关配置信息，发现文档中提到了使用browserHistory时，会创建真实的URL，处理初始/请求没有问题，但是对于跳转路由后，刷新页面或者直接访问该URL时，会发现无法正确相应，更多信息查看参考文档，文档中也提供了几种服务器配置解决方式：

Node

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// 通常用于加载静态资源
app.use(express.static(__dirname + '/public'))

// 在你应用 JavaScript 文件中包含了一个 script 标签
// 的 index.html 中处理任何一个 route
app.get('*', function (request, response){
 response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

在使用Node作为服务时，需要使用通配符*监听所有请求，返回目标html文档（引用js资源的html）。

Nginx

如果使用的是nginx服务器，则只需要使用try_files 指令：