zoukankan      html  css  js  c++  java
  • 《转》react项目打包部署上线完毕后,刷新报错404

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

    置顶 2018年12月17日 08:58:06 前端匠心 
    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuelian3015/article/details/85043635

    报错分析:
    在浏览器内可以从首页跳转到其他路由地址,而不报错是因为这些是由前端自己渲染的。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 。

  • 相关阅读:
    C
    C
    你好,欢迎到这里来
    数组专题
    web前端的性能优化
    MornUI 源码阅读笔记
    application tips
    [转]就这样,创建了自己的运行时共享库(RSL)
    [转]glew, glee与 gl glu glut glx glext的区别和关系
    编码相关了解
  • 原文地址:https://www.cnblogs.com/mokeke/p/10644852.html
Copyright © 2011-2022 走看看