00:00
好了各位,咱继续对前端路由呢有了一个大概的理解,对它的这个工作原理呢,有一个简单的认识之后啊,我们真正的开始琢磨,琢磨在react应用里边如何把路由这个技术给它用上呢?好,我把这个文件呢,关掉同学这个文件还有这个文件就是我写案例的这两个,测试的这两个呢,呃,就不给大家留下了,好吧,因为这个文件呢,已经放在咱们的这个资源里边了啊在哪呢?在这我把这个呢。复制一份啊,最小化,把课件呢也最小化在这呢,React的全家桶,其他在这里呢,对吧,我把这个呢粘过来,诶它不让粘是吧,那我这样弄一下,右键资源管理器中显示右键剪切,因为我这个里边写了一些注释,对吧,重新给大家放一份,那这个呢就不要了,然后右键选择粘贴,因为这个不属于我们正常的这个讲的范围之内啊,是给大家扩展一下,所以说我就放在其他里了,好吧,哎,给这个关掉,关掉,那这个呢,我也不留了,好吧,同学,哎,删除掉,好来吧,回到课件当中走,那我们就进入5.1.3了,同学叫做react ror的理解啊同学有一个库呢,叫做react roor是专门用于在react里边实现路由的,但是我一定要拦你一句,同学,你所安装的那个库并不是react roor。
01:27
说老师这是为什么呢?因为react ror这个库呢,有三种实现,分别给三种平台去用啊,那第一个呢,就是web,就是给我们用啊,就是网页开发人员,还有一个呢是native,是给写react native的人用的,就是用react做原生应用开发的时候用的,还有一个呢,就是anywhere,这个any啥意思呢?就是在哪都能用,说师,那我们学哪个呢?说老师不学这个吧,这挺好的,不是学完在哪都能用吗?那是这样的,虽然学完它呢,通用性更强一点,但是同学学起它来,这些API呢,并没有直接学这个来的方便,毕竟这个是专门为外B人员打造的,所以说同学我们所学的叫做react roor,再来一个杠,叫杠do,哎,我觉得呢,同学IJR呢,给它写上啊,同学我觉得呢,给大家加上这个吧,OK,这个课件。
02:27
那目前还没给大家呢,我的视频正在录制对吧?哎,我加个杠盗,防止大家觉得,哎呀,好像我学的是react roor似的,其实你学的是react roor,杠盗更有针对性的一个库,专门给我们外部开发人员设计的,对不对啊,那讲之前呢,说几个词儿,同学,我们总说路由,哎,我们总说路由,路由的英文名字是什么呀?是吧,还没跟大家正式的去说呢啊,叫做root root root,那么大家还知道有另外一个概念啊,叫做路由器是吧?哎,路由呢,我就不再写了,我直接写这个器是吧?哎,虽然这这个字啊丑一点啊,大家将就着看来走,叫做root。同学,我问一下生活中是不是也有路由和路由器?老师,生活中,哎,我问一下同学,你家里边手机得连WiFi吧,那你的WiFi信号是不是得靠你的这个路由器去发出信号啊,对吧?哎,那我问一下同学,路由器大家都知道,那你说生活中的路由是什么呢?其实啊。
03:27
同学,你可以把你家买的那个什么华为的呀,小米的呀,哎,就是一个小盒子,能插电,后边能插网线,诶你可以称之它为路由器,那你知道你可以称之什么为路由吗?就是你那个路由器呀,后边不有一些插口吗?对吧?能连接四台电脑对吧?那这四个口就分别叫做路由,哎,或者说你可以把路由器上那个无线的天线理解为路由,那所以说你说同学路由和路由器是什么关系呢?是吧?来给大家说一下这个概念,路由器是用于管理各个路由的,你就比如说同学你是不得买一个路由器,路由器里边哎才包含着各个插口,然后那么多的天线呀,哎,所以说可以这么理解,哎,把生活中的这个例子呢,对应到我们这些名词和概念上,便于你理解,OK,路由叫做root,路由器叫做RO啊,多个路由就得需要一个路由器来管理管理,对吧?同学呢,我问一下。
04:27
你存在这种情况吗?就是说你不买路由器,然后你有路由可用,哎就比如说举个例子,你这买了一手机是吧,想连这WiFi啊,然后呢,你不买某一个品牌的路由器,什么华为的小米的,哎,你就买后边那么一个口,你就买一根天线能行吗?不行,哎,所以说路由器和路由是这么一个关系,OK,呃,React roor,杠盗,那我就把所有的这些东西,同学我就都给你补上吧,好吗?哎,有一个库叫react roor,但是这个库呢,下属还分为三个仔细的划分,OK,我们学的是外B人员专属的同学,为什么叫杠盗?哎,我问一下同学,它咋不叫杠外B呢?人就没那么设计呗,那我想问一下同学,盗墓这种东西是不是我们外部人员所独有的,对吧?你Java去操作do墓吗?不,不道吧,哎,你Python语言你操作do吗?不对吧,哎,所以说DOM是前端所特有的一个东西是吧?哎,所以说DOM就代表前端,那就是代表外B了,那人家当时要。
05:27
问题这个词,那就web呗,对不对,这就别纠结了啊,哎,走,来同学读一读吧,这个react roor呀,是react的一个插件库。哎,同学,以后啊,你但凡遇到react杠叉叉叉,90%以上它都是react的插件库啊,90%以上这库呢,它基本上都是官方出的啊,当然也有一些民间的作品,不可否认是有的,但基本上这种命名react啥啥啥都是react的插件库,那能干嘛呢?专门在react里边实现一个SPA应用,同学你不就是想实现一个SPA应用吗?哎,就用它基本上用react项目啊,就是用react写的这个项目哈,那基本上都会用到词库。
06:18
啊说为啥呢?老师同学你想一下啊,回到我们的代码当中,你说就我们做的todo list这个案例,还有github搜索这案例,同学我就想问你啊,你说这两个案例是不是属于根本就没有第二个功能了,也没有什么所谓的导航区域,也没有什么所谓的这个展示区域是吧?同学就是一上来直接来搜对吧,直接一上来来todo是吧?那你同学你想一下,那一般来说现在开发的这个前台项目是不是相对来说功能都多一点啊,一般最常见的一个布局,我问大家一下,你说是不是这种的,就整个这是一个页面,然后一般左侧呢这儿呢,有一个导航区,完在顶部这块呢,哎,有一个头部这个区域对吧,这右上角写的什么用户啊,什么我的什么的,对吧?然后中间这儿呢,哎是一个什么呢?展示区,其实同学你看一下有一个网站叫斗鱼是吧,你看一下也是这种布局,你像我们学校那官网基本上大体也是这个布局,对不对?哎,所以说你这是有一个一个的切换选项卡的,OK,一个一个。
07:18
导航链接的点某一个链接,在这个区域就要展示不同的内容,对不对?哎,所以说现在的网页都很高级,所以说基本上你用react写项目肯定都会用到这个是吗?哎,同学停眼睛啊,别往下看,先别去学习这些API,先带着大家呢,简单的用一用,同学要换一种方式啊,不想一上来就让你把这些东西先记住,然后呢,一点代码也不写就让你记,同学他是干嘛的,能怎么的啊,不行,那到最后呢,约等于没听,所以说这样同学这些东西呢,我不在课件里边一个一个过,咱全在案例上见,明白不,你看一个效果啊。走哎,就就就这么一个效果啊啊,一会儿再仔细看一个效果,然后两个效果,然后三个效果,四个效果,我们就是一个一个效果去实现,明白不?这些效果都实现完了,这些内置的组件,这些该用到的API,该对比的东西全都完事了,好不?哎,那来吧,同学现在脱离课件,说老师那去哪呢?那这样啊,同学我打开浏览器,我先上去这个人的官网呢,看一眼啊来打开浏览器,那么给大家推荐一个网站啊,叫印记中文,可能有一些小伙伴知道,同学啊,我们在学习一些技术的时候,你比如说安啊,View,可能安现在咱不学了啊,你比如说react view啊,Note JS啊等等这些是不是你得学到很多的技术啊,那很多的技术都是源自于国外,所以说呀,它的文档都是英文的,哎,那么印记中文呢?哎,他做了一个非趁的整合,有的是他自己翻译的,哎,就把人家的英文文档翻译成中文了,同学你要知道有些技术是没有中文文档的,哎,对于英文不好。
08:58
好的同学呢,学习起来就压力比较大,那么印记中文呢,就是专门负责翻译这些文档,或者说他自己不翻译,有些可能是别人翻译完了他整合过来的,哎,所以说这印记中文比较好用,基本上前端用到的技术在这儿都能找到一套中文的文档,但是如果说官方没出文档啊,某些库官方压根就没出文档,就是在github主页上简单写了几个DEMO,那他这可能就也没有了是吧?哎,点开就它也不是万能的打开印记中文非常好的一网站啊,当然了,这里边有一点广告啊,无可厚非啊,你看三大核心框架都在这了,React view angle了,你看有一个人他摆在C位了是吧?哎,View是吧?来同学往下找啊,这些东西啊,我们也会学到的,你比如说MP view啊,在我们的这些啊课程里面也是都有的啊,什么UNAPP啊都有讲到OK,也希望大家关注一下我们的这个鼓励学院,可以看一下里边这些课啊,来往下走,往下走,同学,这就是我们要的东西,什么呢?React,你注意它底下。
09:58
说了一句话叫做官方维护的由库。
10:01
哎,同学,官方维护的什么意思呀?哎,就跟react啊,是一个公司缔造的啊,是由Facebook维护的,官方维护的吗?对吧?好,哎,叫做react roor同学,值得你注意的是啊,回到我们的代码里面,脚手架里边并没有帮你去下载react杠,Rotor gun do,它并没有帮你下载,因为他也不知道你是否需要什么,那个所谓的导航区和所谓的那个展示区,万一你写的就是一个单独功能的一个应用呢?所以说人家没有帮你下载啊,咱自己下载一下,就是他不能把事儿考虑的太全面,对吧?万一你不做这事儿呢?同学们,你想想我们在用脚手架的时候,目前来说有两个库,他就没有帮我们下载,第一个库是谁呢?同学,你还记得它吗?就是对传递的pros进行限制的那个库pro types说没帮咱下载,还有谁呢?React RO-do,哎,也没帮咱下载,没事儿咱自己下载啊。
11:02
哎,那这样回到印记中文,我们点击一下走,同学,现在你所看到的就是react roor的官方网站啊,那它有三个版本来瞧同学们,就像我刚才说的,这个呢,是给外B开发人员用的,这个呢是给react native开发人员用的,I呢,这个就是在哪都能用,通用性确实强,但是API用起来不是那么舒服,也不好记,所以说我们学一个更有针对性的,这个其实同学更主要的原因是如果你真在公司里面干web应用的开发,这个东西100%要用,哎,所以说我们才学它的,对不对?好了,点击这个web,你就来到了他的文档,可以这样说啊,文档里的东西呢,几乎我们都会讲到啊,但是可能极个别的比较冷门的,用的也不多的,贼偏的那种,可能我们就不去提及了,明白不?哎,所以说同学有些API值得说一说,但有些呢,也是真的没必要是吧,而且有的时候呢,它也是确实一种过时的API了,是吧?啊好了,那来吧,咱看一看,其实他这文档啊,同学说实在话啊,写的挺一般啊。
12:02
啊,对于初学者来说呢,有点让你一头雾水是吧?上来呢,先没给你讲组件,先说了一堆概念是吧?然后这有一个导航下边哎,才开始跟你说这些组件,那这样吧,我也不太去参考他官网的这些例子,好吧,咱得写点接地气的,大家一看就能懂的,OK,嗯,行,那来吧,同学,回到我们的代码当中,第一件事我们干嘛呀,是不是得安装那个库啊来走起样ad谁呢?React-RO同学千万要加上这个杠do,我知道对于来说人家那个路由库呢,直接就叫做view-roor,但是react不是,OK,别学混了啊,React杠,然后杠呢,好,那桥回车。
13:02
安装它,安装它的,那我说我的同学,我们要用react ror去实现哪个效果呢?同学就是这个效果在这儿呢,还记得它吗?目前我所写的同学们是不是一个怎么讲是一个多页面的吧,你看后面点atml,你点这呢是about,你不断点的时候,你观察地址栏,你观察页签选项卡没发现都在抖吗?所以说这是一个靠多页面一个最笨的方式实现的,哎,这么一个切换效果的应用,那一会儿呢,我们就把这个东西啊,哎,就按照路由呢去给它写好,回到课件当中,课件里边呢,也给大家截了一个动态的图,我们呢,一起去看一下啊,打开。首先呢,输入localo号3000,哎,你看上来你点了about about就变红了,就高亮了,哎然后这呢就变成了杠about,这展示的就是about组件的内容,然后你看呢,等你点击的时候,哎,让他重新再来一遍这图啊,你看诶一上来是about,点击home啊,你看哎没点的哎点走,你看这儿是不是home组件内容,那这儿呢,是不是变成了杠home,哎,就这么一个效果,而且你注意整个页面是不刷新的。嗯,好了,来给它关掉看一下啊,这个库下载好了没有?下载好了来吧同学,那接下来我要讲的东西可就挺重要的了啊,如果听视频的你有点困了,那赶紧精神精神OK,好嘞,同学们,准备性工作我都做好了,index.js一直没动过,都这么写,固定的结构,对吗?APP准备好了,空的是吧?哎,Components啊,Components是吧?哎,这文件夹空的,里边没写东西呢,OK,来吧,回到你的多页面啊这个应用。
14:48
当中同学说说使用路由的套路,哎同学,我希望大家呢,在初学的时候一定按照我这个套路走,等以后你熟了,那我不管你是吧?首先拿到这种东西之后,马上找到两个区域,一、导航区在哪儿?二、展示区在哪儿?同学不再赘述了,导航区域是不是这儿呢?哎,那我再问大家展示区在哪儿呢?是不是这儿呢?点击导航区里的不同的导航选项啊,我们管这个导航选项其实也叫什么呀,也叫路由链接啊,但现在我先不说过多啊太这个官方的名词就是导航区里的某一个导航项,如果你点了这就展示对应的内容,对吗?而且呢,你还知道了前端路由的原理,其实就是点击导航区里的导航引起,诶,这个历史记录里边,这个路径的变化被前端路由器所监测的到,咱之前没有仔细说被谁检测的到啊,咱就简单说啊,就一。
15:48
个人监测到了没有,说到底被谁监测到,那我现在就告诉大家,被前端路由器所监测到,发现诶你的路径是杠home,就把home组件给你展示了,其实要精简点说同学不就两步吗,一点击导航链接引起路径变化,二路径的变化被路由器监测的到,进行匹配组件从而展示对吗?好了,来,那我们呢,就开始写着同学,红色的什么区导航区,蓝色的什么区,展示区,那同学我们一直在强调我们所写的叫什么应用,是不是叫SPA应用,SPA应用同学们简称是不是单页面应用啊,啥叫单页面,页面只有一个,我昨天也说了是吧?哎,单页面页面是单的,但是组件是咋的多的,所以说一句话,单页面多组件,好来同学,那你说是不是我得把变化的内容现在展示的是什么内容,是不是home组件的内容?
16:48
那我想问大家的是,一会儿在同样的位置,哎,就跟它同样的位置还会再展示一个组件,那个组件叫什么呢?叫about,那同学你说吧,是不是得把不同的展示区抽成不同的组件呀,或者说把不同的展示区里的结构抽出去啊,定义成一个一个的组件对吗?好,所以说同学们,现在我需要几个组件呢?你告诉我是不是两个来新建,第一个叫做home啊,那第二个呢,叫做about OK,里边写什么我还不知道,但是我可以先把那个固定的结构写好,index.js,叉rcc。
17:26
走,名字叫什么about,好,这一堆复制来到home里边,index.gs叉粘贴名字改叫做home,对吗?里边写什么?那等一会再说来关掉折叠起来啊,那回到APP里边走,那接下来呢,我们就这样了,你得分析一下这个home.html和这个about.htm,它里边写的内容到底是什么样的,对吧?那样你得找到这些东西是吧?啊好了,同学,那我想问你的是,无论是about.html还是后面点HTML里边是不是都包含这个东西?
18:05
是吧,是不是都有左侧这个导航,只不过你点home的时候后量,你点about的时候about量对不对?哎,那所以说你发没发现有一些结构是固定的,这些东西确实是我得看你点啥了我再展示,但是我问一下同学,就像粉色框里的就这还有就这我问一下同学是不是你点不点是不是都得出现效果呀,哎,你点的时候我再决定蓝色的框子里边展示什么,但是你不点的时候,粉色的整个标题这个区域,还有粉色导航这个区域,那都得是存在的,顶多是你点的时候,我动态的决定谁高亮,我动态的决定展示谁对吗?好了,那同学咱这么做啊,我给这个呢关掉啊,我先关掉,然后呢最小化。啊,然后最小化回到我给大家的这个文件夹里边啊,找到这儿呢,同学,静态页面这有一个root page1,诶root page1右键我选择呢用Vs code呢去打开啊打开。
19:02
同学注意区分啊,我如果让你看的是这个VS扣的,那就证明这你看01234567,这都是咱们正常在讲react脚手架对吧,那这呢,哎,就是我临时带着你看点东西是吧?诶怎么又出现这个debug点捞过来,真烦,来给它删掉,估计又不让删了是吧?那我给它关掉啊,然后呢,静态页面我重新打开,来到这第八个点log给它删掉啊,哎呦,还不让哈,那应该是这个浏览器开着呢,把浏览器再关掉,来再往下删,OK,让删了是吧?来右键选择Vs code打开。来,我不让你同时看两个BS扣的,一个一个来,同学,非常简单,一个about页面,一个什么页面呢?后面页面好了,同学,About打开后,打开目录,关掉左右分屏啊同学,那你瞪大你的眼睛看啊,你觉得这俩页面?有哪不同呢?哎呀,同学们好像这么看也不是很清晰是吧?那我这么给你看吧,来走,现在展示的是不是about,然后我再点home,是不是变成一个切换呢?但是Vs code的这个切换嘛,它比较抖,你发现吗?它老闪屏,那这样来来来来来关掉啊,我就有一个目的,想让大家看起来更加舒服,我用这个,我有一个文本编辑器,我用它去打开这行吧,同学来打开这么看啊,这么看这是什么的内容,是不是about内容,这是什么内容,Home内容,哎同学,这个东西切换它比较快,你看我来回来回切换about home同学,你就能发现页面哪不一样,对不对?哎,好了,慢慢来啊,我把这东西呢稍微缩小一点,我让你看到整个网页的全貌啊,我觉得这样的话,录屏录起来,大家看起来应该也还好,不至于太小是吧?来同学你注意啊,现在呢,你是能看到整个网页的全帽的,这两个网页你全能看见啊,同学,我一会about,一会儿home,我来回切换,请你帮我找出页面不同的位置啊,我多。
20:52
切换一会,Home about home about,走走走,同学,你不要看我鼠标点的位置,你看代码,你看哪不一样啊好。
21:02
再看两秒钟啊。好了,我估计大家也清楚了,同学,是不是这块一会儿有active,一会儿没active,那谁有active呢?点谁谁有active对不对?好了,同学,那你告诉我,你说about在这儿呢,后面在这呢?所以说你告诉我同学们粉色的盒子是什么区,是不是导航区?哎,好了,再往下看,同学,那你刚才发没发现有一个div,它的class叫做panel body,这里边的东西一会一遍,一会一遍,所以说你告诉我同学它是什么区啊,嗯,它是什么区,它是不是展示区,那我们需要做的是怎么的,把不同的展示区是不是变成不同的组件,那所以说就得有一个组件,里边的结构非常简单,就写这么一句话,H3我是about内容,还得有一个组件叫做home,里边展示的H3我是home的内容,对吗?好了,那同学我们就把这句话呢,给它粘过来对吧,不同的展示区是不同的组件吗?说老师那这个p body不带的呀,这个不带的呀,这个不带的呀,同学你就观察页面哪变了。
22:06
你只找变化的地方,OK,你像这些东西你带着也不是不可以,但是那么麻烦干嘛呀啊后带一套about,再到一再带一套,没必要嘛,对吧,就写一套这个,然后把不同的内容再变成不同的组件,OK,好了,来复制这个啊,这是什么about内容,回到代码当中找到about是不是在这儿呢?我不管你之前写啥结构了啊,我就是把这粘过来对吧?回到哎,咱们这个文本编辑器再找home,是把home这句话来直接复制给它带走,来到home组件里边是吧?走同学啊,我说一下咱这个案例呢,真的是尽可能的把结构给大家往少了写了,同学你看就刚才一个就多页面切换的效果,就这点代码就写完了,已经尽可能的少写了,OK,哎,好说老师这就写完了,对啊,然后怎么办,你是不是还得找到导航区啊,哎,但是你别急,同学这样我问你啊,等一会儿你的脚手架启动的时候啊,是不是APP里。
23:06
有什么页面就会出现什么呀,但是目前你的APP里边有东西吗?没有对吗?那所以说呀,接下来你应该这样做,同学你这样,你把整个这个home里边这些内容全得带过去,为什么?同学我问一下头部不展示了呀,导航区不展示了呀,是我知道你可以把变化的这些内容抽成组件,那请问这些内容呢,还抽成组件啊,暂且没这个必要,咱就直接粘过来,那所以说呢,同学这root我就不带了啊,我从这个div开始带到这整个复制过来,哎,整个复制。放到哪儿呢?放到APP里边,同学是我知道你得点击,然后你点击导航区,展示区才能展示不同的东西,我知道,但是最起码同学展示区得先展示出来吧啊,头部的欢迎词得展示出来吧,然后你才有机会去点吧,哎,所以说把它粘过来啊,缩进呢,我们调一调走,然后呢,你得做点固定的事,同学没忘吧啊,Class全得改成class name对不?哎,好这呢全部替换OK啊来同学那我问一下,你觉得这写我是后面的内容合适吗?不合适,那这到底展示什么呢?同学,咱得这么说这儿啊,我写一堆问号,为啥问号呢?我得看你点啥我才决定展示啥呀,所以说同学们还记不记得咱之前说前端路由的原理,来咱再看一下,同学,也就是说你得点击导航区,首先,第一步你必须得能影响路径的变化,如。
24:40
如果你的导航区不能够影响路径的变化,那路由器也监测不到了,也就不能看看你点的是哪个东西了,也就不能给你进行组件的匹配了,对不对?所以说同学无非就是两条线,第一条点击链接影响路径,第二条路径变化监测就到了是吧,监测到了好了,所以说咱先完成第一条线行吧,同学咱就先完成第一个效果,就你敢点about这路径,它就帮你变成了什么什么什么杠about行不好了,来关掉走,那找到它的导航区,导航区是不是在这儿呢?同学啊,你看他原来用什么写的,是不是用A标签写的,完了你点我就跳转到这页面,你点我就跳转到这页面对吧?好,同学,那接下来呢,这样我不破坏这结构,我把这一堆东西呢,我都注掉走,哎,说老师你按哪个快捷键了,这么方便一下子就都注掉了,同学,只要你在脚手架里边,只要你把你想注掉的东西,你给它选中,按下ctrl shift杠,直接就形成这种注。
25:40
置了啊,他知道,哎,你是正在注释GS叉,他就帮你直接加上花括号杠,然后星号了,OK啊好了,在这呢,我再敲个回车,然后呢,我写一句注释,我这么写啊同学,原生HTML中呢,靠啊靠什么呢?靠这个东西A啊,跳转不同的页面对吧?啊你看很精简说的原生atml中靠A标签跳转到不同的页面,但是现在我们不是说不同的页面了,页面只有一个哪儿呢?这index.html哎,但是我的组件是多的对吗?好了同学,那接下来呢,就隆重的给大家推出第一个路由里的内置组件来开始引入,首先你得引入啊同学,刚才我下载哪个库了呀?嗯,是不是react roor-do呀,同学,你这千万别写这个,写这个你可就输了,不是react do,是react roor do啊,是这个。
26:40
这个同学你发现我可自然了呢,我就用这种形式去引入,你说为啥呢?为什么呢?因为这个库啊,它不可能就暴露一个东西,它暴露的是很多东西,它有很多的内置组件,也有很多的内置API是吧?所以说人家没有用默认暴露,人家用的是分别暴露,说的再直白点,您用哪个呀,您取哪个好了,同学原声中靠A标签跳转不同的页面,那我想问一下,那在中呢?哎在react中靠诶这个东西叫做路由链接实现啊,那实现什么呀?啊切换组件呀,对吧?A标签跳页面,路由链接切组件对吧?哎,好,嗯,还有点顺口溜的感觉哈,来走,那说老师路由链接呢,路由链接我怎么写呀。
27:32
老师,是不是我得写个A标签啊,不是不是不是,这呢,同学们就不能写A标签了,你不能写HTML里的内置那些,因为路由链接吗?同学,对不对?路有链接你必须得,哎找这个库去要去有一个人他叫做link,注意啊,首字母是大写的,啥意思?它是组件I link link那咋写呢?把link拿过来啊,你A标签咋写link就咋写,我问一下A标签有没有class name有,那你也粘过来,你要不粘过来一会儿你那样式不丢了吗?对吧?A标签有没有HRA,有HRA啥意思呀?点完这A往哪跳,跳到哪个页面对吗?诶,您注意了这link呀,不写HRA写什么呢?写two,我觉得这个API的设计超级好理解,你觉得呢?同学,To啥意思?Link本身就有链接的意思,所以说它叫做路由链接,你点完了是不是得说你去哪啊,那就用to你看。
28:33
多简洁啊,首先写第一个about,同学点完about你想去哪啊?告诉about,哎,就直接写下。同学注意这里边有几个注意点啊,一尽量别写成大写啊,因为呢,它不识别大小写啊,一般我们就写小写的,对,就你写大写的A,小写的A,其实是一样的啊,但是这个吧,也看你具体路由的那个版本,所以说同学原则就是别写大写字母,OK,还有就是有些同学一激动,咔,来个点,嘎,同学,你见过谁家的网站出现这种情况呢?你就比如说来同学举个例子,有一个网站就是拿react写的,咱之前跟大家聊过谁呀,是不是美团是吧,同学你看一下啊,我打开美团走。
29:13
诶打开,然后选择诶北京好,这不是有个美食吗?你点击,同学你看B勾啥意思?北京点美团点杠美食同学,你见到谁家那路由这能带来一个点啊是吧,没有啊所以说这块呢,同学你千万别写错的,我知道同学们之前写代码写习惯了,总喜欢加这个点,别加啊别加,哎杠about小写带杠不写点OK好了,走起,那这再来一个这是谁呀,Home呗,走,那这往哪去啊home呗啊那这些东西呢,也带着呗,是吧?好了,同学你这么一写完不要紧,哎,你的页面呢,现在就能出现这两个链接了,好,那写到这儿呢,我们大概看一下效果,行吧,同学,哎,来咱试试看看页面目前变成什么样了,这路由链接到底长什么样子,对吧?好了,来启动一下这个应用吧,啊,打开输入n PM start走看看效果啊。
30:12
稍等,等着打开浏览器啊。其实有些时候呀,我们也没有必要,就是说一遍一遍的起这个应用,起一次就行,是吧,哎,来吧,同学好像事与愿违呀,你看他说什么呢?我们读一下这错误啊,同学慢慢来,他说什么呢?说呀,你不应该使用link这个标签,哎,这个组件outside a rotor什么意思?捋顺捋顺这句话的意思说你不应该在RO标签的外侧使用link。哎,也就意味着同学不是说你随随便便你就能写一个路由链接的,咱说呀,路由链接也好,路由也好,都得受到谁的管理呢?路由器,哎,它的意思就是希望你在link标签的外侧包一个谁呀roer对吧?根据它的提示我们能理解到这儿,那就回到我们的代码当中,然后往上走,往上走,同学那就去re react的roor-do这个库的身上呢,我再引入一个人叫做roor,好,那根据他的要求,Rotor要包在link的外侧,对吗?那我们包一下呗,是吧,走,回到页面看效果,刷新一下A呦,V同学,你注意看,他说不能够读取location在and find身上,而且你注意啊,兄弟,他报的是ro.gs的第。
31:50
20行是一个内置库的错误,说老师完了写不下去了,这怎么办呀,那同学我说一下啊,就刚刚你所看到的这个呀,你所看到的这个错误呀,就这个他有点报的不是特别精细,他应该再精细一点儿,因为路由器是分为两种的。
32:13
哎,一个叫做什么呢?Bor,哎,一个叫啥呢?哈希roor,那么听到这个名字,想必大家也能联想到上一小节我给大家讲的东西了,Browse roer就对应你去创建history对象的时候,你那个create ber roer啊,这个哈y ror呢,就有点类似于之前咱讲的那个create哈希history,其实回到这儿我们可以看一下,没什么的,我们看一下来,同学最小化回到这儿,然后呢,打开这个,其他是不是在这啊,右键打开你瞧一下嘛,同学这是不是有两种,一个叫做create browse history,一个叫做哈y history,其实呢,同学你路由里边也有两个,哎,就像我说的,一个叫做browser啊ror,一个叫做哈希ror,所以说同学你不要说我要用路由。
33:13
器,你告诉人家你要用哪一种路由器,如果你选择的是browser ror,我就拿一个B代替,那么你的路径里边就不会出现那个井号的,就直接是杠什么杠什么,OK,如果您选择的是哈西roer,那么路径里边就会出现井号,明白不?哎,有点像锚点那个意思,哎,那所以说呢,同学回到我们代码灯,你别说我在外边,我就要包roer,不行,你得说明白了,你到底是哪一种roer,咱们先选择第一种看起来最舒服的那一种。叫做browse ror,对吗?好了,复制,然后呢,在这粘过来对吧?哎,外边包着谁呢?B the ror说老师这回就好了,是的是的,来走同学页面没报错吧,说老师这为什么是问号呢?我写死的问号吧,同学,咱就测试一下我点击about到底能不能引起路径的改变,行吧,来走变了没?
34:11
变了吧,我点击home变了吧。而且同学他能留下痕迹,你看你后退是不是回到about了,诶同学,那我问你啊,你觉不觉得第一条线我们就完成了呀,对吧,点击这叫啥路由链接,然后呢,改变浏览器的,诶历史记录,或者说改变这个路径对吗?那你就差下一步了,就是你这个路径的变化得让别人监测得到,你说对吗?啊说老师那你点击about它咋不亮呢?同学,那都是后续的问题了,现在咱们就先实现一个简单的,就点谁路径你看就能变就挺好的,OK啊再考虑这儿是不是啊,那这里怎么办呢?同学呢,说一下呀,你已经拆成了两个组件,一个叫做home,诶home,一个呢叫做about,那接下来你需要做的就是告诉这个里边如果我的路径出现的是干about,那你就把about组建给我看,如果你的路径是g home。
35:15
那你就把home组件给我看,OK,哎,来吧,那怎么写呢,在这儿。先把它最小化啊,现在还写着问号呢,对吧?哎,这空行可以删掉了,来同学,不管怎么写,你在这个里边是不是一会儿展示home,一会儿展示about,那所以说呢,引入这两个人的是必须得要的啊,引入components下的谁呢?Home啊,来再引入,引入谁呢?About,哎,From当前路径下的components下的。Components下的谁呢?这个about好,如果你在这要这么写呀,同学,那来你就看一下效果吧,Home哈,嗯,再来一个about,诶,About girl走,你要这么写,那效果就是也不用点了,直接就出来,我是home,我是about,对吧?哎,你这么写,这不属于直接就渲染这个组件了吗?那我怎么能说你先别渲染,我看人这点的是什么,你这个渲染什么?那得怎么办呢?得根据路径去匹配组件呢,对不对?哎,那这呢,咱得这么写了,来听我说,同学就得引入另外一个标签了,哎,叫做root,注意不叫RORO是路由器,RO是路由,我们引入的是root啊,那么在这儿有一个好听的词儿叫做注册路由,什么叫注册路由啊,同学啊,其实这。
36:48
也有一个官方一点的词儿,叫做编写路由链接,这儿呢叫注册路由,路由链接能引起路径的变化,如果你说了这个路径对应这个组件,那么这种映射关系呢,你就是在注册路由啊,我们一般不说定义路由,说注册路由好了,写起roote,那么这个组件就写好了,说老师这个组件怎么自结束了呢?因为它不需要组建这个标签体内容,你比如说这个about,为什么我需要要写呢?因为我页面要展示嘛,对吧,我页面要展示啊,那你这没有什么东西可展示的同学,这里边有两个属性,我就直接跟大家说了,第一个叫做pass,啥意思?你的路径如果变成了杠about。
37:37
对吧,你看pass啥意思,路径嘛,如果你的路径是干aboutt,那同学你猜呀,我让你猜一下你觉得接下来那个属性叫什么名。根据我刚才对你的引导,如果路径是这样的,我就把这个组件给你看,那所以说它就叫做component,值得你注意的是,有些同学的编译器呢,你一打com,你看它给你提示这个大写的component,别写这个C是小写的啊,写大写的就不对了,人就不认识了,哎,我给你看哪个组件写about。
38:07
哎,注意啊,写的可不是这个about啊,然后这么写不对不对,可不是这么写的啊,直接就写about走啊,那about得保证你引入是吧?好了,那再来一个呗,如果你的路径是杠home,我就把home组件给你看,OK,不好嘞,保存回到页面看效果,哎呀,同学,你看同样的错误又出现了什么?你必须得在root标签的外侧包裹一个roer,哎,路由器,那所以说同样的套路回来是吧?哎,这逼着你没办法了,同学,所以说呢,B the roer继续就位,好好,然后呢,把这些东西放在里边好缩进调一调,回到页面刷新看一下效果。同学,没报错对吗?但是不意味着你就成了,慢慢来啊,我尽可能的把坑都给大家演示出来了啊,来,点击about。
39:07
我问一下路径变没变,变了这咋还是home内容呢?嗯,这咋还是home呢?你点击home还是home,你点击about,这咋不变呢?同学们我说一下啊,是这么回事,你这外边是不是包了一个BR。你这是不是又包了一个b ror,那同学你听我说一下啊,你整个应用都得用一个路由器去管理。整个应用得用一个路由器去管理,你现在这种做法就是这包一个,这是路由器A,你这又包一个,那这一组就是路由器B,你点击这个东西确实引起了路径的变化,也确实被这个路由器呢所监测到了,但是这个路由器根本就没有把信息告诉这个路由器。对吧?哎,你的变化其实通知这个路由器了,那这个路由器呢?哎,他俩之间没有进行数据的沟通,所以说同学一句话,你这么写是不对的,你不应该这包一个,这包一个,但是对于初学者来说,你要是参考官方文档,同学你的写的逻辑绝对是这样的啊,Link能实现路由的链接跳转啊,那我就写link完,他说得报这个,那很自然的,我一写这个,他说也得报,那我当然就包一个了,但是你要知道他是他这个是这个,他俩没啥关系,那怎么办?那也就意味着整个应用都得用一个路由器去包裹,那也就是意味着这个b ror不应该在这写,对吧,这个也不应该在这写,你这么一写他俩就分家了吗?说老师那怎么写呢?同学,那我问一下,你说你再往外扩一点行不行呢?你就比如说啊,同学,呃,我看一下啊,这是导航区的内容,这是展示区的内容,我把这个class name为road,我给它包起来,行吧,走browse the ror b。
40:57
RO啊,我直接粘过来得了啊,Blow the RO好,我把这一堆我都给它包进去,你说这行不行呢?来张国来,那同学我想问你的是,那你说这个是不是也归这个路由器管,那这个注册路由这是不也归这路由器管,我是不是实现了他俩都归一个路由器去管呀,那也就说咱整个应用,你整个这个网页应用其实都应该用一个路由器去管,不能是两个啊,那回头说老师,那这回行吗?试试呗,About home I同学,能不能切换,能切换吗?我问一下页面刷新了吗?没有,哎,那恭喜你实现了这个路由的切换,但是同学们你这么写还不行,我就想问一下,下边我再有结构呢,我下边再有结构怎么办?老师,那就再把它往外扩一扩,同学,你麻不麻烦呀,一直扩扩扩,有一个一劳永逸的办法,你注意。
41:49
我不在这包,我这儿呢,也不在这儿包,对吧?哎,这些缩进呢,我调一下,为什么非得要在这儿纠结呢,非得在这儿包呢,啊瞧一下啊,这整个从这到这我得缩进调一下,要不它不对啊,走应该差不多哈,是一样的,好,那就这样啊同学说老师那在哪包呢?来同学。
42:11
一个最狠的办法,来到index里边,同学,你明白我啥意思了,我把整个APP都包上,同学,你写的所有的组件是不是都是APP的子组件,那么我如果把APP包上了,你就回答我吧,同学啊,那是不是就把APP以及它所有你写的那些组件都交给一个路由器去管理了?哎,那所以说来到APP,同学,我们在这儿不引入browse ror,那我们在哪引入呢?在index里边好走写好了,那么咱说了第三方的库往上靠对不对?好了,先写好注释,一会再给它补上port画括号,From哪呢?哎,走叫做react roer,杠盗里边引入谁呀,Bur the ror,然后呢,为了一劳永逸的解决问题,所以说呢,我要把APP包起来,那要包APP的话呀,同学,我就得把这个代码呢啥的缩进缩进啊,来走。
43:06
哎,调整,那么在这RRO回车把谁包里边去啊,把APP走这儿呢调整一下,这呢来一个逗号,这的逗号就不要了,当然这里是英文的对吧?好了同学你这一包来吧,以后就随便写了路由链接,该写写注册路由,该注册就注册,回到页面刷新看效果,走about走home看都是能切换的,而且注意同学他不发网络请求,我给你放大一点来,来到这个network选项卡,你注意观察,当我切换的时候,同学我问发请求吗?一点不发,OK,这就是路由一个最基本的使用,同学,当然了我们这些这个代码还有文件结构呢,还有一些小小不合理的地方,但是至少现在哎样子让大家看到了,对吗?希望大家在学习路由的时候,跟着我的视频一个一个来,你不要说我看两三个,我再练,最好是看一个,你练一个,OK,同学,好了,这小节呢,我们停一下。
我来说两句