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

server {
 ...
 location / {
  try_files $uri /index.html
 }
}

Apache

如果使用Apache服务器，则需要在项目根目录创建.htaccess文件，文件包含如下内容：

RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

以下都是针对服务器的配置，可惜的是我们目前还没引入相关服务器，只是使用了webpack-dev-server的内置服务，但是我们已经找到问题所在了，就是路由请求无法匹配返回html文档，所以接下来就该去webpack-dev-server文档中查找解决方式了。

webpack-dev-server

在这里不得不吐槽一下webpack-dev-server官方文档，博主反复看了几遍，才看清楚了问题所在，这里也分两种情况：

1. 没有修改output.publicPath，即webpack配置文件中没有声明值，属于默认情况；
2. 设置了output.publicPath为自定义值；

点此查看文档

默认情况

默认情况下，没有修改output.publicPath值，只需要设置webpack-dev-server的historyApiFallback配置：

devServer: {
 historyApiFallback: true
}

If you are using the HTML5 history API you probably need to serve your index.html in place of 404 responses, which can be done by setting historyApiFallback: true

如果你的应用使用HTML5 history API，你可能需要使用index.html响应404或者问题请求，只需要设置g historyApiFallback: true即可

自定义值

However, if you have modified output.publicPath in your Webpack configuration, you need to specify the URL to redirect to. This is done using the historyApiFallback.index option

如果你在webpack配置文件中修改了 output.publicPath 值，那么你就需要声明请求重定向，配置historyApiFallback.index 值。

// output.publicPath: '/assets/'
historyApiFallback: {
 index: '/assets/'
}

Proxy

发现使用以上方式，并不能完全解决我的问题，总会有路由请求响应异常，于是博主继续查找更好的解决方案：

点此查看文档

The proxy can be optionally bypassed based on the return from a function. The function can inspect the HTTP request, response, and any given proxy options. It must return either false or a URL path that will be served instead of continuing to proxy the request.

代理提供通过函数返回值响应请求方式，针对不同请求进行不同处理，函数参数接收HTTP请求和响应体，以及代理配置对象，这个函数必须返回false或URL路径，以表明如何继续处理请求，返回URL时，源请求将被代理到该URL路径请求。