踩坑经历

昨天看了篇关于react-route的文章,说BrowserRouter比HashRouter好一些,react也是推荐使用BrowserRouter,毕竟自己在前端方面来说,就是个小白,别人说什么我就照做嘛,因此我就把路由从HashRouter改成BrowserRouter
然后今天就一直在悲剧中度过来了,当路由模式采用browserHistory时,点击每个导航都可以显示正确的页面,一旦浏览器刷新,页面就显示Cannot GET
然后各种百度,各种调试,一直都没调通,甚至有那么几个小时,想推倒重来,毕竟没有什么是重做解决不了的,但是这样成本太大,又得把代码复制一遍,甚至可能到最后,还是会出现这个问题,一直到晚上10点洗澡的时候,突然想通了,是不是由于把路由从HashRouter改成BrowserRouter造成用户访问的资源不存在,以至于Content Security Policy的呢?洗完澡赶紧改回来,果然行了,果然洗澡的时候是最放松的,脑袋最清醒。

分析原因(百度找的)

React-Router 是建立在 history 之上的,常见的history路由方案有三种形式,分别是:

  • hashHistory

    • hashHistory 使用 URL 中的 hash(#)部分去创建路由,举例来说,用户访问http://www.example.com/,实际会看到的是http://www.example.com/#/。
  • browserHistory
    • browserHistory 是使用 React-Router 的应用推荐的 history方案。它使用浏览器中的 History API 用于处理 URL,创建一个像example.com/list/123这样真实的 URL
    • 当刷新页面时,浏览器会向服务器请求,服务器实际会去找根目录下对应的文件,发现找不到,因为实际上我们的服务器并没有这样的 物理路径/文件 或没有配置处理这个路由,所有内容都是通过React-Router去渲染React组件,自然会报404错误。
  • createMemoryHistory
    • Memory history 不会在地址栏被操作或读取。这就解释了我们是如何实现服务器渲染的。同时它也非常适合测试和其他的渲染环境(像 React Native )。和另外两种history的一点不同是你必须创建它,这种方式便于测试。

两种解决方法

  • 使用hashHistory,不用做额外处理
  • 使用browserHistory,服务器需要进行相关路由配置
    方法见这里

react route使用HashRouter和BrowserRouter的区别-Content Security Policy img-src 404(Not found)的更多相关文章

  1. ReactRouter中HashRouter和BrowserRouter的区别

    仅个人理解,如有不当请指正 一.从原理上 HashRouter在路径中包含了#,相当于HTML的锚点定位.(# 符号的英文叫hash,所以叫HashRouter,和散列没关系哦)) 而BrowserR ...

  2. ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别

    ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...

  3. React开发中react-route-dom使用BrowserRouter部署到服务器上刷新时报404的问题

    React项目部署中遇到的问题 react开发中react-route使用BrowserRoute路径在iis服务器上刷新时报404的问题 解决:在发布的项目根目录添加web.config配置文件 在 ...

  4. react-router v4中 HashRouter 和 BrowserRouter的使用

    遇到的问题 项目中控制路由跳转使用的是BrowserRouter,代码如下: ReactDOM.render(( <BrowserRouter> <div className=&qu ...

  5. HashRouter与BrowserRouter的异同

    项目中控制路由跳转使用的是BrowserRouter 在开发过程中使用是没有问题的,但是将页面上传至服务器之后,问题就来了:用户访问的资源不存在,页面是空白的. 原因: 在browserHistory ...

  6. react -Route exact Redirect

     exact是Route下的一个属性,react路由会匹配到所有能匹配到的路由组件,exact能够使得路由的匹配更严格一些(exact的值为bool型).   <Route path='/' c ...

  7. React Route

    有幸你能看来我的这篇文章,这篇文章是继React后面写的Reactroute,所以你需要看看我前面整理的React笔记再来看Reactroute可能更容易 All the work we've don ...

  8. react中,constructor和getInitialState的区别

    1,ES6语法 使用class声明一个类,且要继承react组件的方法和属性的时候 : 在里面我们可以直接指定 this.state = { }, 我们可以当前组件内任何地方使用 this.setSt ...

  9. react — script引入 和 脚手架使用的区别

    1.React 入门实例教程 :http://www.ruanyifeng.com/blog/2015/03/react.html ( 阮一峰的博客)  或   https://segmentfaul ...

随机推荐

  1. linux上安装phpstudy

    摘要:安装:wget-chttp://lamp.phpstudy.net/phpstudy.bin chmod+xphpstudy.bin  #权限设置./phpstudy.bin#运行安装用时十到几 ...

  2. Linux下如何安装Nginx

    看这就够了 https://segmentfault.com/a/1190000012435644 注意如果是远程浏览器访问是否启动了nginx,出现无法访问 服务器能够启动.访问不了页面 很大可能是 ...

  3. jQuery ajax表单提交

    Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form ...

  4. windows注册服务

    Windows服务是运行一些服务程序的较好方式(这些程序专门为各种功能提供服务,无操作界面,运行在后台),其创建方法也很简单,通过系统自带的sc命令即可方便的创建. sc命令创建Windows服务的方 ...

  5. UICollectionview的头视图和尾视图

    UITableView有头视图和尾视图,那么UICollectionView有没有头视图和尾视图呢? 答案是有的. 1.新建一个类,必须继承自 UICollectionReusableView. 2. ...

  6. Linux下如何启用MySQL数据库远程访问

    远程连接MySQL出于安全考虑,一般都关闭了远程访问,但有时候需要提供远程访问数据库的服务,下面我们快速学习下: 第一步:修改my.cnf文件使用文本编辑器去编辑MySQL服务器的配置文件my.cnf ...

  7. Ubuntu 18.04 上使用xrdp远程桌面连接

    参考:https://blog.csdn.net/qq_25556149/article/details/82216190 1,环境查看 2,安装 xrdp.tightvncserver apt-ge ...

  8. Python中bytes与字符串的相互转化

    代码: # bytes转字符串方式一 b=b'\xe9\x80\x86\xe7\x81\xab' string=str(b,'utf-8') print(string) # bytes转字符串方式二 ...

  9. The timeout period elapsed prior to completion of the operation or the server is not responding.

    问题:更新数据的状态值时,部分报出如下异常: 即时有成功更新,时有报错问题出现. 在LOG中发现成功更新的数据,存在更新时间过长问题,将近30秒(EF默认的CommandTimeout为30秒): 代 ...

  10. 阿里云ECS服务器 java JDK安装和配置 mysql安装和配置

    最近配置了一下阿里云ecs服务的服务器环境,主要对java jdk环境的安装和配置,以及数据库mysql的安装和配置,趁着热乎,记录一下! 服务器用的系统是ubuntu_16_04_64的,版本16. ...