00:00
好了各位,那刚刚呢,我们讲了readre的使用,给大家形成笔记了,简单看一下,一般啊,我们把readre呢写在所有这个路由注册的最下方,当所有的路由都无法匹配时,跳转到redirect所指定的路由啊,具体编码在这了,好,那固定的套路停掉,关掉。复制改名,这第几个呢?14个src下的,嗯,这叫做redirect的使用啊,大家自己去练习路由的时候呢,也希望大家从这个八开始啊,也是自己一个一个来是吧,你开着Vs code的敲你的,你旁边呢,你可以哎打一个我的代码去练习一下,好的来,那接下来我们讲什么呢?我们就要讲二级路由啦,一级路由的东西我们讲的差不多了,回到课件里。我们之前一直做的效果呢,就是这个页面上呢,有一个about和home,点击about就是about,点击home就是home啊相对来说呢,我们能比课件里做的可能再好看一点点是吧,哎,他这没背景,我们有个背景是吧?诶好,那同学接下来呢,我们就要做二级路由了,来关掉二级路由呢,我们又称嵌套路由。
01:19
因为啊,你要说二级路由,那就得有三级路由,也得有四级路由,那就得五级路由是吧,就说这意思就上不封顶了,所以说我们管这种呢,一般叫做多级路由,或者叫做嵌套路由,路由里边还有路由,这就是嵌套路由,好了,我们要实现这么一个效果,哎,走朱老师不还是这个吗?这about home,哎你等等同学,About还是当年那个about,但是home它不再是当年那个home了,来关掉这个啊,我们整体哎看一下吧,哎,News是吧,哎这呢,Message同学呢,我问你啊,点一下message我问你一下。这个是不是属于导航区,这是不是属于展示区?那么在home的展示区里边,你觉不觉得又出现了导航区,然后这儿呢,是不是又出现了一个展示区啊同学,那你觉不觉得,你看蓝色的盒子里边再次出现导航区,然后再次的出现什么呢?这个展示区,那你觉得这是不是就是二级路由了呀?展示区里边还有展示区是吧?那这就是二级路由来吧,那怎么办呀?啊来,首先观察一下,你得把你的home组件改造一下,目前我的home组件只展示这句话,而并没有下边的这个对不对?好同学,先不写代码,我们冷静的思考一下问题啊,你说对于这个页面来说啊,这是导航区,这是展示区,那这儿呢就是导航区啊,那这儿呢就是展示区。同学,你说接下来我应该做什么呢?
02:55
你这个最外侧的展示区,你已经抽成了两个组件,因为这个展示区里呢,一会儿展示about,一会儿展示home,对吗?所以说接下来您需要把里边的这个展示区也得给它改一改,一个叫做news新闻页面,一个是message啊消息组件,所以说写一个news组件,再写一个message组件,这个news组件和这个message组件是不是都属于home组件里边的下一级的路由啊啊,所以说叫二级路由吗?哎,来吧,那这样同学不用你自己写啊,静态页面呢,已经给大家写好了,咱毕竟也不是链静态呢,对不对,这个呢,咱就不要了啊,之前分析这个样式丢失这个问题好了,回到呢,我给大家准备好的文件啊,来到这个里边找到哪的静态页面root page2,哎,打开它吧,这个里边写的就是二级路由相关的东西。
03:55
了,用我的文本编辑器打开,那么给大家调整一下配色啊,让你看起来能舒服一点啊选哪个呢?选这个稍微深一点就行啊,就这个吧,这有点太深了啊,那这个吧,走好了,那同学你注意看啊,你看我这个文件命名home下的message home下的news啊舒老师,这用浏览器怎么看呢?那你打开一下,其实啊,现在在浏览器里边你也可以点,只不过呀,这都是用A标签实现的,只不过呀,这都是不同的页面,你点一下你看走走走,诶对吧,News messages对不对,哎,你看来来回回的,但是你这么点可不行,对吧?哎,首先你这也不是路由的跳转呢,所以说同学们怎么办呢?首先这样啊,先把呀那个导航区啊,咱给它拿回来,同学,导航区是不管你点哪个,你只要诶这不能点啊,这不能点,为啥呢,因为这儿呢,我没在写这个about,因为目前研究的就是home里边的事儿,我这不是一个静态页面嘛,对吧,啊静态。
04:55
面写那么完善干嘛呀,是吧,来走你看啊,点击后面的时候,同学我不管你点击了news还是message,这个导航是不是必须在的对吧?哎,然后我根据看看你点了news还是message,我决定这会展示啥对不对,哎,好来吧,走同学我说那怎么办呀,别急别急,同学啊,缩小一下代码。
05:16
这是news,这是message对吧?好,那这样啊,里边的东西呢,肯定是多了一点,我再缩小一点呢,大家看起来可能就费劲了啊,那这样吧,我稍微大一点啊,稍微大一点啊,这儿也是这个大小,好了,来同学,我左右来回切换,你告诉我页面不同的位置是在哪儿来。再给你看两秒啊,来走。首先你会观察这不一样对吗?同学啊,一会儿news啊,换个颜色的画笔,一会儿news,一会儿message,那所以说这是不是导航区啊,哎,同学,我问一下home组件之前长什么样啊?好,Home组件之前是不是没有这些东西,来我给它删掉,Home组件原来就长这样对吗?T body里边直接就写了一个AHR,我是home组件,但是这回不行了,你这home组件下方又出现了这么一个div div里边包含着一个ul,是导航区,又包含着这块,那这是啥呀?你告诉我这是啥呀?这是不是就是里边内嵌的那个展示区啊,现在展示的什么news,所以说这个页面叫做home news嘛,是吧?来同学,那这样往上滚动,我滚动到哪呢?我滚动到这,让它开头的这个位置啊,都让它停在这个叫做panel body。
06:30
往上一点都停在这儿,哎,Panel body,这然后我让这边呢也停在这个piel body这因为同学我问一下上边这些东西,还有上边的这些东西,那你看吧,它都是一样的,之前我们就写好了对不对,上边的这一块切换about切换home已经是路由切换了,对吧?好了,我们往下滚动一下,我就刚好给你卡在卡在哪呢?卡在这吧啊Co叉S6哎,卡在这儿好了,那我这儿呢也卡在这,Col叉S6好了同学接下来呢,我做切换,走走走走,你注意观察页面哪有不一样的地方,走走走走走走走好了哪同学,首先这导航区这一会它有active,一会儿它有active对吗?这会儿到简单我们用na link是不是就能做,哎,那这呢,观察下方哪不一样啊,同学,你觉没觉得事情是从这块开始划分的界限?
07:27
对吧,这块是news的展示区啊,展示到哎位置了,然后这呢是message的展示区,把这些东西哎放到展示区了,所以说同学们你告诉我吧,是不是得把这一堆带走啊,啊,这一堆带走,然后呢,回到代码当中来到pages来告诉我是不是还得建立一个路由组件,对吗?同学们,哎,来吧,但是呢,你可以写的再好一点,由于。你现在所写的news组件啊,来换个颜色的画笔,你的这个news组件,还有你这个message组件,我问一下是不是都属于home的子组件,所以说你可以把news呀,Message呀,直接就定义在这个home里边,哎,也就是说那个muse你是可以这样定义的桥吗?
08:19
Home组件里边的news组件,哎这么定义可以,如果说你不喜欢,哎让文件嵌套,你也可以这样写,新建文件夹home下的news,哎,这样写也行是吧,哎也可以没问题,放在里边也行,放在外边,外边也行,都没问题啊说老师那咱怎么写呢?那我这样吧,我这样写,我不让他往里边放,我怕大家晕,行吧,哎,我这么写home下划线,哎完了news或者你写在里边也行,说老师工作怎么写,其实怎么写的都有是吧,同学啊,其实这么写吧,就相对来说这名吧,就有点长,同学,那你说news以后如果再有再有东西呢,那就是home news下的再来一个谁谁谁,这命名就太长了,所以说同学这样我慢点写行吧,哎,你保证前边这些听懂了,然后你再听这,我慢点写,Home组件在这儿呢,那接下来我要写的是home组件里的news组件,那再来一个home组件里的message组件行吗?
09:19
I右键新建一个index.gs叉啊这呢右键新建一个index.js叉,同学,路由这块的知识也是啊,禁止你一直听不练习啊,还是得敲一敲的啊来到这儿呢,写好了啊CC走,你名字得改一改,叫啥呀?Message诶好,那这呢也得改一改RC。走,这叫做news新闻页面,好了,关掉关掉,我们说刚刚干嘛来着啊,News这啊,然后怎么的来到这儿,把这一堆带走,因为这不是news里的列表吗?来吧。
10:00
粘贴缩进调一调,OK,不好嘞,同学,News组件准备完毕,接下来来回走走,走走不同展示区,同学,Home是不是整个j div呀,所以说从这到这儿带走,这是谁呢?Message home下的messageage,所以说放在这个里边对吧?粘过来缩进调一调,让它对齐了啊同学啊,我不知道你现在有没有这么一个感觉啊,咱聊聊咱聊聊啊,虽然说大家的反馈呢,可能这个我也听不到啊,但大家呢,可能这个视频等以后上线了,大家可以发一下这个弹幕,对吧?同学,咱聊一下你觉没觉得啊,如果是老项目往react上改,这一堆东西都是人家写完的,你自己往出拎结构,你自己往出拎样式,同学,你觉不觉得这是世界上最闹心的一件事?同学,你说如果要是最爽的一个体验,是不是我们压根就没有说写这些东西的环节,我们一上来就是组件化开发,比如说举个例子,琢磨来琢磨去,后面里边应该需要一个message组件,我就新建message文件夹,Index JS叉直接这里边是不是自己开始写结构,这样的话是不是就清晰了?哎,确实是这样的,同学,老项目往re react上改,你拆结构其实挺麻烦的是吧?啊,我们这儿呢,是为了节约时间,就直接写好这个静态了。好吧,同学,如果你真的是有足够的时间去练习,那我建议大家自己一点一点写一写是不是?嗯,好,来,那走着,Message是不是写好了啊,各位。
11:26
News,咱是不是也准备好了呀?那接下来呢,你把那导航区那些东西拿过来呗,同学,原来home组件里边写的是我是home组件的内容,那你回到这儿,现在你得变成啥了?嗯,得变成什么了呢?左右来还是啊,划到这儿,我再给你切换切换,走走走走,同学是不是有这个东西的同时还得把导航带着吧,所以说别客气了,你把导航拿走,导航在哪儿呢?往这找,哎,这就是对吧,嗯,来吧,那走着把这导航给它带走啊,带走说老师那这个div,这个div包的什么意思呢?你这不是有了一个这个嘛,哎,就标题嘛,那你这边是整个的那一个区域啊,也就是说其实如果你想完全还原它的结构也行,你在HR下方在这儿再来个div是吧,然后把导航区也放在里边,把内容区域也放在里边,那咱就这样吧,同学,来把home组件内容那几个文字下方这个大的div咱全都带走行吧,回到代码当中往哪放,往这儿放对吧,它下方的吗?但是为什么飘红了呢?嗯,是这么回事,同学,你的标签是不是有了两个跟标签啊,哎,那所以说我先调一下缩进啊走哎这样对吧,同学,你这是可以折叠一下的,那你就需要把这些东西都给它剪切走,然后在这儿怎么的,你得包个div跟标签必须只有一个呀,你看这回不就没问题了吗?那缩进又不对了,我们再调。
12:51
调一调啊,别急,走走好,这是最外侧那个div,这是H3是吧?哎,这是里边那个,那我问你同学这是不是不能写死了,你这能直接写这ul吗?你不能啊,对吧,你这不是message吗?啊,那其实正常来说呢,应该是把那个div是吧,整个这一块,整个这一块其实都算作是message组件,因为你看一下message组件最外侧是不是有那div的啊,那所以说呢,同学从这儿到这儿咱就都不要了,那这儿可能以后展示两种组件,一个是一个是news对吗?那我就得引入这个news from啊,当前路径下的不行了吧。
13:31
啊同学,呃,是这样啊,当前路径下的,由于我已经放在里边了,所以是可以的,对不对啊,不要引入news嘛,啊就在这儿的啊,如果你要放在外边就不行了,你就得点点杠了,你就得翻出去了,但是目前是对的是吧?哎,走news引入,那再来一个谁message,嗯,复制放在这儿,那也就是说这块呢,一会儿可能展示news组件或者展示什么呢?啊message组件好,但是你要就这么写可不对,首先第一个事儿,这class不改一下吗?是吧,改一下走class都得改成class name。
14:10
好,全都替换走起,替换完了是吧?嗯,好了啊同学,冷静的观察这块,好像我也不用缩进是吧?哎,往前一下,这应该是对齐的。好了,来启动一下案例n PM start开启浏览器啊,路由的知识就得一点一点练啊,千万不要听太多,然后一起练容易乱啊,路由的知识不过关,同学们,咱们做项目的时候你就会有点痛苦啊来点击home走起,同学,是那意思是吧?有点那感觉是吧?同学我问一下导航区是不是来了呀?是不是来了啊,OK,那这是about内容,这是a home内容。但是这能点吗?这都不能点了,而且我问你同学,那MESSAGE1上来就亮啊,那这都不对,所以说怎么办?Active赶紧给它干掉对不对,还有这儿不能直接写这news和message对不对?那同学你告诉我在这儿我得干嘛呢?是不是得注册路由对吧?啊各位是不是什么意思,是不是得注册路由?哎,好,那你说这些A标签首先来在这儿,你得把这些A标签都得改成什么标签呢?是不是叫做link标签啊?
15:20
啊,你改成link也不行,因为人这东西呢,是有高亮效果的,对不对,所以说同学我想让他拥有跟这个一样的高亮效果,那怎么办呀,是不是得用上我封装那个组件了,是不是叫做my navy link呀?好了,来吧,开始啊,在这儿呢,引入import引入引入哪个呢?当前路径下这是不行了,点点杠翻出去啊点点杠再翻出去找到components下的谁my na link,那由于我是默认暴露的,那我也不需要这个画括号了,是不是my na?好了,同学来吧,接下来开始写不写A标签的写my navy link,由于这个里边你看它也有list group item这个样式的名,那你看我所封装的my navy link里边返回的那个是不是也带着这个的呀,是吧,而且还指定好了高亮时候的样式的类名,对不对,哎,好嘞,同学,那接下来设计吧。
16:21
这不得说说,诶,它不能自闭合是吧?里边得写文字嘛,就是说这标签点完了往往哪去啊?News是不是得写在这儿?OK,那这行是不是就不能要了呀?啊,那我不能写HRA,但是我可以写一个东西,是不是to啊,你点完我去哪?同学,那我觉得大家都能猜得到,老师,News点完了,那就去news新闻页面嘛,嗯,也是是吧,哎,这么看来也没啥问题是吧?你看about就杠about home就杠home,那news就杠news呗,好了,来删掉啊,那这一块呢,把它复制是不是也得写在这儿啊?A标签肯定是不能用了,是不是?这是message,那往哪去呢?Message,注意M小写这行不要好同学,我问你路由链接我是不是准备好了呀?哎,那这个时候呢,回到案例里边,我们看一下,点击news的时候,同学,咱看看到底能不能把地址栏呢,变成news是吧,哎,点击找。
17:20
出事了,出事了,同学来注意看啊,我刚才是不是点了news呀,你点这个news的时候,你没发现同学他直接往about跳吗?嘿,这是怎么回事呢?嗯,这啥情况呢?我说一下同学,这是一个最重要的点,各位来,我把东西关了,东西我都折叠,我想问各位一个问题啊,同学,就是说我是不是得有机会点home,我有机会看到这两个人,我是不是才能点击这两个人,那我想问的是,如果你都点击了home,你都看到这两个人了,那我想问你的是APP这个组件里的代码是不是已经完成路由匹配了?
18:06
那也就是说他都已经发现了,你输入的是杠home,我都给你展示home组件了,Home组件得来到你的面前,你才有机会点home里边的那个路由链接对不对,那也就意味着这些路由是不是已经注册完了,然后呢?哎,你点了页面里的这两个里的某一个对不对?好同学,那我问你这些路由是不是先注册的对吧。是吧?这些代码已经走完了吗?同学,那我问你,如果你点的是about,那我想问一下home里的代码是不是还没来得及走的呀,但是为什么你点了about就能展示about内容呢?那肯定是因为这些代码已经走完了,对不对?所以说同学们这是第一批注册的路由,这是先注册的路由,OK,好,然后你就点了home是吧?点了home之后呢,你注意观察啊,各位注意观察,点了home之后呀,你诶,你看现在你是不是能看到home,那还想啥呀,关掉来打开home。
19:05
在这完了,你点谁了,你是不是点了news,那就把路径切成谁了呢?杠news说老师,那就得进行匹配呀,但是没有杠news呀,同学,匹配这里边有一个细节上的问题。APP里边这俩路由是不是先注册的。React中路由的注册是有顺序的,这两个路由是先注册的,每当你点击一个路由链接要改地址的时候,他都从最开始注册的那个路由进行逐层匹配,也就是说你这1.news不要紧。路径确实改成news,但是紧随其后就会触发路由的匹配。路由从哪开始匹配呢?按照当时注册的顺序,所以说兄弟,人家来到APP开始匹配,然后问你输入的是不是gun news啊?人家要的是不是about,不算匹配,你输的是news,人家要的是home,也不算匹配。
20:09
那么跟谁都没匹配上,他说,来,我给你指条明路,你去about吧,所以说你这一点你就去了about。哎啊,说老师我想想,哎,你就本着一个原则,路由的匹配都是从最开始注册到最后注册这个流程走下去的,APP里的路由一定是最先注册的,说老师那怎么办呀,没事,我们有解决办法,来,我先写着同学,我问你news也好,Message也好,你就看你文件夹的结构都是谁的子组件,是不是home这个路由组件的子组件呀,所以说前边带着他父亲的名字,对,你没听错,带着home的名字,写号杠home好。
21:00
说老师这就行,是的,看一下效果。当你点击news来咋样,是不是正常了?哎,说老师好像是呢,那这是怎么回事呢?来你输入的是什么呀,就当你点击news的时候,你的输入是不是杠后杠news。每一次路由的匹配都得是从最开始注册的路由,一直到最后注册的路由,全整体走一遍,所以说来到这儿了,跟他匹配吗?不匹配。你一定要注意,我问一下跟他匹不匹配,匹配人家要的是杠home,你输入的是杠home,杠news同学,由于模糊匹配,所以说在这是不是匹配成功了,匹配成功了是不是给你展示home组件对吧?好。说老师,那所以说路径里边还残留着一个news,对呀。但是啊,这块是不是也得展示东西啊,好继续写,来到这个里边注册路由,注册路由用谁呀?是不是得用root啊root想用root是不就得引入route,那所以说引入react RO do。
22:17
里边的a direct wrote,好,来吧,Pass你的路径。如果是杠home下的news,我就给你看news这个组件,同理,如果你是home下的message,我就给你看message组件。是不是多个很自然的Switch SW啊,别别这个,这是Switch那个快捷键啊,Switch这么写,诶走好站过来走。先看效果啊,我们再分析回到页面当中,S Switch没引入是吧?赶紧引入一下,好来到页面看效果,已经出效果了,来看home啊,About就是about home就是home,那你不点,嗯,那就不展示点,News就是news.message就是message啊,当然这些东西它目前是A标签,你也不用去点是吧?哎,News message,哎,看是吧?哎,都能点,说说咋回事呢?来同学,咱就从这儿开始分析,你点击home之后啊,是不是谁都没亮,为什么呢?因为你没有去点,对吗?来,咱就分析一个,当你点了news之后发生了什么?走起你刚才点了news,于是乎呢,你输入的路径就变成了杠home,杠news,路由的匹配哈,都是按照注册顺序来的,所以说最开始注册的路由在这儿呢,就拿着你所输入的杠home,杠news来到这儿进行匹配,你输入的是杠home,杠news。
23:56
对吗?然后就匹配跟他肯定是不行了,直接pass,但是跟这个我问一下行还是不行,行还是不行,行,所以同学们home组件它才没丢,也就是说同学你点了news之后,我问一下这为啥还在,我问你这为啥还在,对吧,为什么没丢,都是因为这次匹配来再分析啊,你刚才是不是点了news输的,是不是杠home-news,好了再来啊,再来杠home-news,我问一下跟它匹配吗?不匹配,跟它匹配不匹配,所以说同学跟它匹配了,人家是不是才给你展示home组件,所以说你页面才看到了home组件,所以说home组件才没丢,好同学人家要给你展示home组件,我问你home组件是不是得挂载上去。
24:46
那home组件一挂载home组件,这是home组件吧,里边的东西是不是执行了,那我问一下你这一执行是不是就又注册路由了,那你说是不是继续进行路由的匹配呀?那你刚才输入的杠home,杠news就得继续匹配,那么来到这儿来吧,杠home,杠news,你输入的杠home,杠news完美匹配上去了,对不对?所以说来走起news组件给你展示了,那么message的分析也是同理的。
25:14
明白了吧,所以说同学现在咱就明白了,你注册的哪怕是三级路由,那么前两级路由的名字你也得给规规矩矩的写在前方,对不对?哎,这些都得带着后好,那么这就能解释一个问题,同学,倘若你给他,你给他开启了严格模式,我问你后果是什么,你给home开启严格模式,请问后果是什么?你自己看,点击home,点击news不行,点击message不行,同学你想想啊,你在这是不是开启严格匹配了?来吧,分析,你点了news,请问你输入的地址是什么,对吗?杠home,杠news来。从最开始注册那个开始匹配,我问你,你刚才说的是张红张就跟他匹配吗?不匹配,最主要的问题来了,同学跟他匹配吗?也不匹配,因为你输入的是杠home,杠news,人家要的是杠home,所以说不算匹配,不算匹配,这也废了,那怎么办呀,都废了,来吧,我给你指条名路,你去about吧。所以说同学你这么一写不要紧,你只要是敢给home开启严格匹配,那是不是就意味着home下边的所有子路由全都废了,对吗?你看你点。
26:30
你点谁都费啊,你点message也废,纵使的后边有再多的选项卡都不能点了,对不对?所以说同学们是不是印证了刚才我给大家总结的东西,就是怎么办不要随便开启,有些时候呢,你开启了会导致无法继续匹配二级路由对不对?好了,那讲到这儿呢,诶我们就说完了这个二级路由是吧?那那咱得改一改啊,咱不能开启这个严格匹配,那这会儿是不是得删掉啊,哎,严格匹配需要的时候你再开啊,还有就是同学这有点不太完善,你看你这页面一上来都知道得把about选中,那么HOME1挂载为什么不把news选中呢?是吧?那怎么写呀?来就看你之前的东西听没听懂了,Redi是不是redirect,嗯,来,那这怎么办呀,写一个redirect走,那这会给他一个to啊叫什么呢。
27:21
走home下的news,分析一下这过程啊,分析一下这过程来,首先呢,我点击home了,为啥一下子就能选中news呢?那是因为你刚才所输入的地址啊,你点击home的时候,你刚才是不是点击它了,哎,对,那地址得变成什么呢?是不是杠home,所以说home组件是不是就挂载了呀?Home组件挂载了,那我问你这个路由是不是就开始工作了呀?由于你输入的是杠home,人家要的是啥?杠,Home go news算匹配吗?你的东西都少,匹配什么呀,所以说不能匹配对吧?各位啊,这呢也不能,所以说他给你指条明路,说哥们儿你去home下载news吧,OK,二级路由咱就说完了,希望大家呢多加练习,其实同学东西没那么难,就是啊,导航区展示区,只不过这个展示区里边出现了新的导航区以及新的展示区,对吗?各位,哎,好嘞,那我们这小节呢,停一下。
我来说两句