关注互联网应用及运维技术的个人博客

react项目打包部署上线完毕后,刷新报错404

报错分析:
在浏览器内可以从首页跳转到其他路由地址,而不报错是因为这些是由前端自己渲染的。React Router定义的对应路由,脚本并没有刷新访问请求后台数据,是JS动态更改的location。
当刷新时,先访问的是后台地址,反馈数据后再加载页面内的React代码,最后才在浏览器内执行,这时报错404。是因为后台并没有针对这个过程的路由给出返回的HTML内容,就没有执行React-Router。

只需要把原来的BrowserRouter替换成HashRouter,这样所有的请求都会定位在index.html页面,服务器端就不需要做任何的配置了。

路由控制为BrowserRouter时,URL是指向真实URL的资源路径,当通过真实URL路径访问网站时,由于路径是指向服务器的真实路径,而该路径下并没有相关的资源,所以访问时就报错404.

在React项目中采用React-Router来配置页面路由时,React-Router是建立在history基础上,常见的history路由方案有三种形式:
1、hashHistory
2、browserHistory
3、createMemoryHisory

在本地开发时使用BrowserRouter是不出现问题的,因为在webpack.config.js中使用了webpack-dev-server就已经做好了配置。

  1. BrowserRouter: http://localhost:8080/abc/def
  2. HashRouter: http://localhost:8080/#/abc/def

如果在服务器动态支持时就使用BrowserRouter,否则使用HashRouter。因为单纯的静态页面路径从/切换到/abc之后,这时刷新页面将会无法正常访问

如果觉得写服务器配置文件麻烦的话就直接使用HashRouter 。

赞(0)
未经允许不得转载:飞天狒狒 » react项目打包部署上线完毕后,刷新报错404

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址