react-router browserHistory刷新页面404问题解决方法
版权申诉
130 浏览量
2020-11-28
13:32:40
上传
评论 1
收藏 106KB PDF 举报
react-router browserHistory刷新页面刷新页面404问题解决方法问题解决方法
使用React开发新项目时，遇见了刷新页面，直接访问二级或三级路由时，访问失败，出现404或资源加载异常的情况，本篇针对此问题进
行分析并总结解决方案。
背景背景
使用webpack-dev-server做本地开发服务器时，正常情况只需要简单使用webpack-dev-server指令启动即可，但是当项目处于以下两种情
况时，往往需要有嵌套路由和异步加载路由：
我们使用react-router这种路由库构建单页面应用路由；
使用html-webpack-plugin插件动态将加载js的<script>标签注入html文档；
这时，访问localhost:9090是可以正常加载页面和js等文件的，但是当我们需要访问二级甚至三级路由或者刷新页面时，如
localhost:9090/posts/92时，可能会出现两种情况：
页面加载失败，返回Cannot Get（404）；
服务响应，但是没有返回webpack处理输出的html文件，导致无法加载js资源，第二种情况如图：
那么我们怎么处理才能正常访问，各页面路由呢？博主追踪溯源，查找文档配置后解决了问题，本篇就是对整个解决问题过程的总结。
分析问题分析问题
发现问题后，我们就要开始分析，解决问题了，我们判断这个问题一般是两方面原因造成：
react-router路前端由配置；
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 指令：
server {
评论0