00:00
接下来呢,我们说一下路由的传参要做这么一个效果,就是当我点击某一个消息之后啊,在这个位置呈现这个消息的详细信息,那所以说这个又是一个路由组件,而且是几级路由了呢,应该是三级了,大家想想home本身就是一个路由组件,一级的里边有messages messages里边再有一个详情,对吧?那首先呢,我想做的真实一点,就是不想让这三个消息啊是写死的结构,来打开看一下我们的代码,目前是写死的三个Li。我想配置点数据,让他根据数据去生成这多个Li,诶,那所以说我留下一个就够了,然后你得引入这个人,就是use state,因为我要配置数据了嘛,走着一堆消息,那我就叫做MESSAGE4,然后等于use state里边传入多个消息,每一个消息呢,是一个消息对象,好都有自己的ID,比方说第一个叫001消息呢,还得有自己的标题,叫消息一吧,好消息呢,还得有自己的内容,哎,我叫content,比方说来一个锄禾日当午,哎,然后四个消息就够了啊,走着走着走着,这个编号是二,这是三,这是四,二这是三,这是四,说爱写一首诗,锄禾日当午的下一句是哎,汉滴禾下土,然后再来一个啊,谁知啊。
01:36
盘中餐对吧,然后再来一个粒粒皆辛苦是吧?诶不是这个丽丽啊,不是这个丽丽来换一下啊走丽历接辛苦,哎,是这个粒历好各位那配置完了这会儿是不是就得动态的去变力量好剪切走变历MESSAGE4走着那传入一个回调。
02:01
那每一个呢,行参我就用M吧,然后在这呢,你得写返回值Li,然后呢缩进调一下好里边这块咋写M点是不是title啊,来注意我展示的啊,是消息的这个标题,你点击了之后再展示它的其他信息,什么ID啊,Content呀这些。那一遍利肯定得写一个人呢,就是KM.id就OK了,好里边你先别考虑啊,说老师我得改成路由链接,先看一下效果啊,后边这些呢,你可以给它删掉,好回来已刷新四个消息出来了,那接下来得怎么做?这些东西得重新变为路由链接,然后这里呈现一个消息详情组件,那么接下来就是你得定义这个组件,你得去配置规则,你得把这一堆改成路由链接,对吧?慢慢来吧,先写着这个组件detail啊,就是详情嘛,嗯,之前咱们做那个案例也叫这名啊,RFC里边呢,其实就是展示一个消息的详情呗,我就写一个Li吧,啊,有ID,有标题,有内容,OK,好,准备完了,接下来呢。
03:15
哎,配置规则找到这儿,找到index,由于啊,它是message的子路由,所以说我得在这儿来个逗号,还得写谁?Children这儿不再解释了啊,上小节已经提了,那里边再来一个规则,Pass,直接写他的那个名字,不要加斜杠,哎,叫做detail tell,详情走着还得写谁呢?Element里边你得引入这个组件了,Page私下的detail引入好往下走,这块得写detail组件标签规则OK了。好,关掉,回到message里边,接下来你得把这A呀都得给它改成路由链接,那也就是说你得引入这个东西了,React RO do link还是navy link,由于不需要高量效果,我用link就足以了,复制。
04:10
往这一替换link一旦出现不能写HF,得写to,由于是子集路由,可以简单点,这块不要再写斜杠了,直接就可以了啊,那不出意外的话,现在我点击这消息1234应该咋的路径会变,来看一下效果啊,刷新一波啊,走走走走是不是变呢?那这为什么没有呈现呢?不说了,Outlet你是不是没写呀,在这再来一个outlet,把它放在放在你想展示的位置就可以了,是吧,做个HR分格在这写一个它就OK了,那这写好了一个注释,叫做指定路由组件的展示位置啊,那这生成的每一个呢,咱也可以给它来一个注式是吧,这块写一下,比如说叫做路由连接。
05:01
好,来瞧瞧啊,点击news,点击MESSAGE1234 OK的吧,那接下来就剩下一件事了,我点击这消息1234的时候,我得把一些参数是不是带过来呀?那大家回想一下,在react roor do5那个版本的时候,路由之间传参有几种参数呢?应该是三种吧,一种叫做PAR参数,另外一种叫做search参数,然后还有一个就是location.state参数,对吧?那这三种呢,在RO6里边都能用,但是写法有点不一样了。首先呢,咱说携带参数,携带参数啊,跟之前还是一样的,就是这块咋的多写点东西,别直接写detail,那你就得拼串了,写一个模板字符串detail啊,我还得写,但是后边我要跟上,到了符画括号谁呢m.ID对吧,编号带过去嘛,那把这个复制。
06:06
后边就是m.title m.content来呗,复制写在这,复制写在这,OK,你带了这带的是什么参数啊?这种写法叫帕参数。帕参数最大的特点跟之前是一样的,你需要在定规则的时候咋地是不是得占位啊,但是我的规则不是直接写在这儿的,我的规则是在这里,那接下来就跟之前是一样的啊,斜杠冒号ID,哎,占个位,然后再来冒号title,再来一个冒号content OK了。好,那这回就能对上了啊,来看一下效果啊,点击一下,哎,说老师这不对,这怎么报错了呢,有警告了呢,哎说一下同学们看一下你的路径。Home下的message下的detail,那再看看你的规则呀,你的规则是home下的message下的detail确实有,但是你是不是得带参数啊,那目前你的路径是不没带参数啊,那就有这警告了呗,是吧?哎,你给他刷新一下,从头来就可以了,走着看home,看news,看message,重点来了,点击消息一走,你。
07:18
这回就对了吧,哎,刚才是他在原地一刷新嘛,这脚手架原地一刷新,那你得跳后边,你不传东西,那可不就出来警告了吗?对吧,好了,来走走走走,刷新一波消息一,那来吧,接下来怎么办?琢磨琢磨。哎,你看规则定的时候,你占位了呀。那回到这儿呢,你也携带了呀,那接下来就剩一件事喽,去那个对应的detail路由组件里边去接收这三个参数,对不好,回到data这个组件里,那大家回想一下,如果是RO5的时候,我们怎么去接收参数?没记错的话,五这个路由组件身上,它的props里面是有三个东西的,路由组件独有的。
08:08
一个叫做history,一个叫做location,一个叫做match,对吧,那这些东西是不是都得从路由组件的实例对象出发点props,然后在点是不是能拿到这三个东西啊。但是现在的问题是。函数式组件。它不存在这个this,这个里边你不能写,那怎么办?说老师我硬写,哎,那你就看一下对吧,Conslo输出这个this啊,你自己瞧呗,对吧,它行不通的,那这个时候来咱就得借助一个H了。啊,这是不一样的地方啊,各位得借助一个hook去接收参数,名字其实也挺简单的,一写大家就懂,来,先把这个引入。叫做use PAR,哎,你就听这名各位use PAR使用参数吗?好,复之,拿我来随便写个A去接收,接下来做一件事,输出这个A,你就自然而然知道怎么做了,回到这边一刷新,同学咋整?
09:18
哎,这个参数是一个对象,你传递了几组,人家就接收几组,剩下就一件事了,拿出来做展示是不是就可以了呀,来放大一点,由于它是一个对象,那所以说回到这边我就可以直接解构了呀,ID有谁title还有谁content,那接下来就是这儿这儿还有这儿走着ID换呗,Title还有谁content OK,好,回来看效果,嗯,AA没有定义,那是这儿我得给它删掉,好刷新一波,走走走走是吧?哎,你可以说的再详细一点,比方说前边加点说明,嗯,这叫消息的啥呢?编号,那这个呢,叫做消息的标题,那这块叫做消息的内容,好走走走走,OK,传递参数实现了。
10:15
那刚才呢,我提到了啊,我说呢,正常来讲啊,这个路由组件的实例对象身上是吧,会有这个history啊,Match啊,Location呢,那说老师难道就是这个函数式组件就彻底不能用了吗?其实也不是啊,各位也不是,这里边呢,还有一个H,咱了解一下就行啊,叫做use much use match。大家想想之前我们的那个P参数是不是得从这个match里边去取出来,也就是之前是这么写的this.pro.match点是不是啊,那在函数式组件里边,你也可以去用这个东西,那你得借助use match给你弄出来啊,那我们来看一下啊,Cost X等于use match,然后输出一下谁这个X,那咱看看呗,回到这边一刷新,哎呦喂,报错了。
11:13
看第一行的报错,他说我无法读取你的路径,Pass,为什么呀?诶,这会有点要求同学,麻烦一点啊,Use match不是你直接写就可以的,你必须得把一个路径交给他啊,你得这么写就对了,说home下的,Message下的。然后你把那个完整的路径,你站位的ID呀,你站位的title啊,还有你站位的content呀,你都给他写好了,哎,他就能拿着这个路径去分析这个match,然后最终发现这个match啊,刷新一波长这模样,哎,同学熟悉的东西出现了。match.per你发现这些东西是不是也在呀,而且路径什么的也有,哎,但是这个呢用的不多啊,咱们一般来说读取参数一定是use PAR更直接更方便,但是这个呢,你也得知道,哎,那这两行呢,我先给大家注掉,好,那这就是use PAR这个H的使用啊,先做案例,一会整体总结好,这一小节呢,我们停。
我来说两句