00:00
在react route特最后一个章节呢,再给大家看一个问题啊,也是之前给大家讲过,但没有说的特别细的一个问题,就是啊,这个or特和哈希ru特的一个区别。首先来看一看啊,因为这里给大家已经形成了这个笔记,它的底层原理不一样,不router,它使用的是H5的这个history这个API,注意这个history不是和我们呃上节课使用的这个什么this.purpose。哎,点history和它是,哎,不是同一个东西啊,那这个this.purpose history是对这个H5的history进行的,哎。啊,进行了一个封装啊,而这里说的这个H5的history story API,是啊,就是H5它带的这个H5的这个historyto的这个API啊,不要搞混了啊这点。因为它是H5的啊,新的一个API,所以说它的兼容性存在一些问题,它不兼容I9级以下的一个版本啊,这也是补刀这root它最大的一个问题就是兼容性的一个问题,那我们之前也说过啊,使用这个哈希router,因为它使用的是U2的哈希值,那如果对这个哈希值不太理解,哎,我们可以把它给想象成一个锚点,哎,它是以井号后面什么A什么B这种形式去进行的一个跳转,对吧?那我们的这个补这露R,它就没有这个井号,它是直接以这种形式啊,这种形式啊,那使用这种URL的哈希值,它有个什么好处啊,我们想想这个锚点它有什么好处,它是不是兼容性。
01:26
特别好对吧,那IE9以下的浏览器也兼容对吧?啊,这是它底层运行的原理不一样,但是这个哈希rootr呢,诶接着就是说到这里了啊,他们的这个。Pass的表现形式不一样,那如果我们使用补到rootr,我们的路径中是没有井号的啊,直接就是这种斜杠斜杠的形式对吧?那如果使用的哈rootr,我们在这个路径中它会包含一个井号,哎,是这种形式,这样看起来就不太美观,而且我们看一些啊,比较成熟的一些,呃,商业网站,一些上线运行的网站是很少见到这个井号的,比如给大家演示过的美团啊,大家看不到这井号对吧?哎,所以说这个普Dora用的还是啊比较多的啊。
02:04
那。说到它比较用的比较多,那大家可能疑问,那这里它不兼容IE9级以下的这个版本啊,那我要想做很大的一个兼容性的话,我使用这个可不可以啊啊当然可以,但是实际上大家想一想,我们现在都用到react时期,本来react它里面的核心代码就有很多都不兼容IE6IE7等等等等了啊,所以我们做这种IE9以下的这个兼容,没有没有特别大的一个必要啊。接着啊,接着说他。第三个啊区别,那其实前面这两种呢,都是嗯比较呃明显的一个区别呢,其实第三种才是最重要的一个一个区别,就是它对这个C的参数的一个影响,因为我们之前在说这个特和黑和这个哈希root特的时候啊,那时候还没有说到这个,讲到这个ste参数对吧,所以那时候我们就没有说这点,但其实这一点才是ruler和哈希R最重要的区别,就是对state参数的一个影响啊,那这个啊R它是没有任何影响的。
03:02
啊,就是因为这个state它保存在这个history对象中啊,保存在这个H5的这个history啊,这个历史基础中,所以我们即使是刷新页面,我们的这个state参数它还是在的啊这个之前在我们讲这个TE的时候给大家演示过,对吧,我们刷新浏览器,哎,我们的这个传的这个参数还是在的,对吧?因为我们一直使用的是啊root对不对,但是这个哈希入场它刷新后会导致特参数的一个丢失。哎,这个啊,那这个嗯,给大家演示一下吧,哎,之前我已经把这个啊依赖给删了啊,所以演示的话呢,我先装一下依赖啊,这个很快。好,先让他装着啊,那我接着看一看啊,我们先把这个第四个也顺便给说了吧啊。哈希root特呢,他可能嗯,唯一比这个补到特root特能好那么一丢丢的,就是它可以解决一些路径相关的一些错的问题,比如我们之前有一节课在讲这个啊,就是这节在讲这个我们的样式丢失的一个问题,对吧,我们使用这个点抗相对路径引起的这个样式的一个丢失,但是我们使用哈希U就可以避免这个问题,那这也可能就是它比较好的一点啊,但实际上在工作中呢,我们真正的使用的还是这个补刀的是多一些啊,因为你去所有的这个线上的一些网站啊,打开照相机去找,很少有网站去使用这种。
04:18
哈哈,希入,因为带个井号太不美观了,对不对,好,那这个已经安装完了,依赖把它启动下,给大家演示一下。演示一下第三条啊,他们的,呃,对这个参数的一个影响,先检查一下我们13这个代码使用的是不是。是不是那种啊,Stay传参的一个形式啊,来找到。找到这个message。来看这里啊,看一下啊,那我们这里使用的是这个存参啊,接下来我们在这个details这里面呢,看一下啊,这里有输出这个purpose,我们就看一看这个。嗯。S的参数会不会丢失啊?现在我们使用的什么?找到这个app.gs。
05:03
来找到这个index ts,现在我们使的是browser route,对不对?好,这个时候先给大家看看效果啊,那我们先打开一个吧,来先点开一个这个关掉啊打开。接着来点击我是在这个呃里面去,就说在这个details这个组件里面。啊,这里面去输出了我们的这个purpose,看能不能接收到这个参数啊,这个肯定可以的,这个还是我们之前写好的这个代码啊,先把这个清掉,然后点这个消息一看一下这个。是不是可以接收到啊,这个C的参数,这是我们传的ID和title对吧啊。这个是我们使用的是这个啊普history,那这种方式呢,它会把我们传的这个state参数会存到了H5的这个history对象中,所以即使我们去刷新页面,虽然我们链接中没有带这个参数,那我们刷新页面它也不会丢失,因为他把这些参数。哦,存到了历史记录中,对吧,我们这个是有历史就存在的,是不是看我们刷新啊,你可以看这个消息是在的,那我们去看这个死值参数也是在的,是不是好,这时候我把它改成哈希塔,大家看一看啊。
06:09
在这个里面我来改一下啊哈西路。好,那这里包裹都要改一改啊,已经改过了。接着来,先打开一个。让他编完先打开一个啊。打开空谈。来点点到这里啊,先把它清掉,现在我来点这个跳转啊。可以看到啊,报错了啊,这是说明什么,说明我们使用这个哈希入场是拿不到这个传的这个参数啊,那么可以把这个错误屏幕下给大家看一看。来找到这个details这里。看看哪里报的错啊,是这里他拿不到对吧,那我给他写一个处理错误一个方案,哎,就是说你从这里面你获取不到的时候,我让你从这个空里面获取,这时候至少不会报错对吧?他顶多拿到是一个安底碳的是不是。好,那还有这里去拿这个的时候啊,因为这个ID都是按底方的,你这里肯定匹配不到它也是个空,那在下面我们使用的时候,这里也会报错,是不是好,那这里也加一个啊空这时候来保存。
07:10
来回浏览器中看一下。好,我报错了是吧,页面能呈现,而且你点的话啊,这里也能输出啊,顶多是没有内容嘛,因为这个state没有传递过来,来看一下啊。是不是斯state安迪凡达对吧,那这是为什么呢?虽然这个哈希ru他使用这种井号的形式,它会生成哎,会形成这个历史记录,但是他并没有去操作这个H5的这个。啊,并没有去操作这个H5的这个黑色数对象,所以这个state这个参数我们并没有传递过来。清楚了吧,啊,这也是我们说的第三点。这两种形式啊,对这个我们传的CD参数的一个影响。这也是它们之间最大的一个区别啊。哈希UR,它会导致S参数的一个丢失。最后再说一点啊,在我们真正的这个写项目开发中啊,我们正常的去使用这个browse rooter就可以了啊,这个大家作为了解,哈希作为了解就行了,那我们还是使用blooderer使用的多一些,他不管是从这个呃路径的表现形式上,还有他对这个state参数的一个支持,嗯,都要比这个海西数点更好的啊,那至于关于这个兼容性的问题,那现在这个I9以下的呃已经很少见了啊。
08:27
现在我们已经把react router相关的一些知识点都给大家做了一个呃讲解,那这是这章的最后一个章节。好,那这节课先说到这里。
我来说两句