00:00
好了各位啊,那在上一小节呢,我们讲了嵌套路由里边需要有两个注意点跟大家说一下,一、注册子路由的时候要写上父路由的pass值对不对?你比如说你写的是news,但是你的路径不能直接写杠news得带着之前的那个东西走,你就比如说是杠home下的news,对吧?哎,第二个注意点就是路由的匹配是按照注册路由的顺序进行的,也就是说呢,你点的东西是杠home杠啊news不是说直接就在这个home里面匹配,而是按照你注册的顺序,你是先注册APP里的这两个路由是不是?哎,从这开始匹配的。好了,这是需要注意的点,脚手架停掉,这块呢,关掉,我们复制一下src,起个名,这叫15_src下划线,这叫什么呀?嵌套路由的使用好了,那我们进行下一步,按照课件上的顺序,我们接着往下走,呃,嵌套路由呢?
01:00
那我们就写完了,接下来写5.5,同学叫向路由组件呢传递参数数据,而老师这什么意思呢?看一下啊,打开这个动态图,你注意观察同学是不是home下的message啊,哎,Home下的message,哎是这选项卡对吧?那那你注意观察,就是这些东西它也能点,同学这MESSAGE001 003006什么意思,就是消息几消息几对不对?哎,这些东西也是能点的,那我们整体看一下啊,来关掉这图重新打开啊,打开message了,点击一个message点一,哎,你注意观察同学我点的是消息一对吗?MESSAGE001,那不就消息一吗?然后就在这个地方,诶出现了消息一的详情,消息一的编号是001,那你看这就显示ID是一啊说老师那这001它怎么是一呢?它。
02:00
这显示的是001,其实它的编号是一呢,所以说I di1,那消息的标题呢,是MESSAGE001,那消息的内容呢,Content这个单词有内容的意思啊,内容叫什么呀?我爱你中国是吧?刚才点的是MESSAGE1,然后这边呢,哎,点的MESSAGE1,哎重新画,哎在这儿,这是不是点的MESSAGE1啊,OK,那这展示的什么呀?是不是MESSAGE1的详情,那你说一会儿我要点三呢,就展示三的详情呗,那你看一下现在点的是谁六,那也就是说你点的是这个六,然后在展示的这个位置展示的就是六的详情,对不对?同学,哎,那我想问一下啊同学,不管我点击的是哪个消息,我点击一也好,三也好,六也好,同学。我点击这个消息的时候,下边展示的东西你觉不觉得结构都是一样的,我点击一也是ID啊,叫1TITLE,叫什么什么I j content,什么I内容,对吗?觉不觉得结构是一样的,那同学你觉不觉得目前页面上又多出来了一个导航区和展示区,那你看啊,首先这就是一个导航区,这是一个展示区,这是我们讲的一级路由是不是?哎,然后看这儿呢,这又是一个导航区,你觉得呢?然后整个这一块都算作是展示区,对不对,展示区的这个位置又是能点的,这又是一个导航区,那在这儿你觉不觉得它又是一个展示区啊,那所以说现在就是message这个选项卡里边的这个导航区啊,不是导航区,这是展示区是吧?
03:49
在展示区里边又出现了一个导航区,又出现了一个展示区,如果按照层级来划分,同学,那你说这俩叫一级路由,那这个和这个算是二级路由,那你觉不觉得我再写下去就是三级路由了呀?OK,哎,那而且你注意一个问题,就是我点击哪个消息,它这结构都是一样的,所以说呢,是这样的啊,这个组件呢,它是一个通用的组件,你点击消息1234567,不管你点哪个消息,其实展示的都是这个组件,只不过这个组件里边的内容它是不一样的,对吗?你点击一,这就是ID1,你点击三,ID就是三,你说对不对?
04:34
哎,OK,所以说这块呢,你一定要知道,那给这个组件起一个名字吧,毕竟展示的是消息的详情信息,所以说我叫这个名字,Detail详情。谁的详情啊,Message的详情,OK,点击001也展示这组件,点击零三也展示这组组件,点击零六呢也展示这组件,来吧,开始写,这又得变成导航啊,Link或者是NAV link,那这呢,又得是一个展示区,对吗?同学们,好了,回到代码当中,开始写,打开src,同学,我得找哪去?
05:12
你一定要冷静的思考问题,Home下的,Message下的这个换颜色,这个它又是一个导航区,来找吧,找哪儿代码当中。Pages home下的message找到这对吧,你看123,我们这没写136,我们这写的123对吧?哎,那同学咱做点高级的事儿呗,别自己写死这些东西,我想让这个news这个新闻页面呀,确实是写死的,但是我想让这个messages这个列表是动态生成的。那所以说回到代码当中,我们怎么写啊,State等于是吧,得写一个对象,然后呢,Message AR是吧,一个消息的数组走,哎,那这里边写什么呢?一个一个的消息,你比如说第一个消息给他个ID,那就是零一,消息得有标题对吧,写个title啊,我就写汉字了,消息一,那同理,你说各位消息二消息三对吗?写三个差不多够用就得了啊那这呢是零二,这呢零三,那所以说同学我不用写这么多,你觉得呢,这块循环一下是不是就可以了,走this点啊,State点,然后message a,那我提前取好吧,Cost结构赋值等于this.state取出谁呢?Message AR,好嘞,那这就直接变利了啊message ar.map遍历拿到的每一个呢,都是一个。
06:46
消息的对象,所以说我简称Ms go BG啊,消息对象这写好了,Return返回的是一个多级的结构啊,那把刚才那一堆粘过来,但是呢,我不小心刚才摁了一下CTRLC是吧,把那个东西给破坏掉了,那所以说来到这儿啊,我来到这儿重新再粘一下啊,把它给顶掉了嘛,反正就是这么一个结构,Li的这个是吧,15折叠起来,回到咱们的这个messageage里边,那走返回的是这一堆结构,嗯,啊,那么说老师那这往哪去,这先不知道往哪去,先写死吗?啊但是这个我是知道的,消息是不是得有名字呀,走那怎么写呢?MSGBG点是不是title,别觉得你成了,这还得写一个key对不对啊,那由于我们是有ID的,那所以说有ID为啥不用ID呀,是不是点ID,嗯,好嘞,保存。
07:35
啊,那这么写呢,就能动态的便利这个列表了是不是?嗯,好了,那我们试一下啊,启动n PM start走,慢慢来啊同学,我知道这文件夹呀和文件呢,些许的这这多了一点是吧?嗯,慢慢来,慢慢敲也是没问题的啊他说return啊是这么回事,我这写错了啊是rern好了保存回头瞧效果home message诶走消息123是吧,控制台开好,防止它有警告来到这儿,目前没啥警告哈,已刷新,挺好的,那来吧,同学,这重新变成了什么区啊,导航区这变成什么区啊,展示区,那么展示区这个组件你是不是还没定义呢?这组件叫什么来着?详情组件叫做detail,谁的详情啊消息的,所以说回到代码当中,你去定义detail组件的时候,你觉不觉得应该放在message里边呀?啊,新建文件夹,Detail详情都在message下的detail,你说的是。
08:35
是吗?那当然是message的详情了呀,右键新建一个index,点给S叉RC。走,改个名detail啊,那这个详情组件里边要展示什么呢?我们看一下这个图,展示三个信息,ID title,还有content,嗯,那我们回到代码当中写呗,这就没有给大家准备结构,这咱就自己写了,自由发挥了,就是一个ul Li的列表啊,第一个展示的是ID是多少呢?不知道,再来一个,嗯,这叫什么呢?开,嗯,开什么呢?也不知道,那还有这是content。
09:12
Content什么意思呢?消息内容OK,这个组件呢,准备好了,关掉,请问什么时候渲染这个detail组件,什么时候展示它呀?你点击任何一个消息名的时候,是不是在下方都要展示它呀?啊,那所以说呢,同学一定要冷静思考问题,整个这些是不是都是message的展示区,在message的展示区里边又出现了导航区,又出现了新的展示区,对不对?好,那么导航区呢,你是动态的便利生成的,那接下来是不是就差这了呀?哎,那首先第一步你得引入detail,在合适的时候再渲染它小写的啊,Import detail from哪的当前路径下的detail OK复制把detail写在哪?
10:01
写在这,咱试试detail,打开页面看效果,Home messageage,哎,同学这么写好像不太对,因为人家这边吧还有一条线呢,是吧?哎,有条线呢啊,那我们也写一下这条线啊呃,在哪写呢?回到代码当中,在这儿吧,我给他来一个HR这条线好了,回到页面看效果,诶,OK,有这条线了,同学这么写就不对了,我还没点消息123呢,你怎么能展示这个呢?那所以说赶紧的把消息123改成什么路由链接,那我问一下到底是用link还是用navy link呢?那看这东西有没有高亮的效果,这叫有高亮效果,这叫有高亮效果,这没高亮效果吧,所以说不用navy link,我们用link就可以回到代码当中,那就得把你这个A标签都得改成什么呢?Link那种路由链接,那就得引入link走起,From react,哎,From,诶,写成了form是吧?哎,From from哪呢?
11:01
嗯,React,诶,又写成form了呵,来,慢着点from来走,然后是react-do,嗯,有的时候呢,Form表单写多了就容易写成form是吧?来走着引入谁啊link呃,好了,复制,然后呢,把这A是不是得改一改A标签不要写了,写link,那这呢,Link结尾这是几个空行啊,咱就留在这,嗯,或者给它删了也行啊,现在反正也没什么用啊那同学link里边可不能写HRA得写to对不对?那去哪啊?能直接写detail吗?同学你现在再写就是这算几级路由了,是不是算三级路由了?所以说你必须拖家带口的是吧?在开玩笑的说,拖家带口的都得带着后下的message下的谁。detail前边千万不能写错,前边如果写错了的话,同学你的一级名和二级名如果写错了的话,路由就匹配不上了啊detail,好,那同学这怎么办呀?是不是得注册路由啊,注册路由用什么来着,是不是得用root呀啊。
12:01
各位,如果你听我这讲解有点跳跃性,那就证明之前的东西你没有练好哦,同学,我写这儿的速度其实不快,你如果直接听这个视频,可能觉得诶老师有点快,但如果把之前的东西练好了,这其实是特别慢的啊,没讲那么快,Wrote走,同学,如果你的路径是home下的,Message下的。哎,那我就把这个组件给你看,Component找谁呢?好,来吧,瞧瞧效果,老师得包Switch不用,因为只有一个对吗?啊,来我们看一下效果啊,我没点消息一吧,你没点这就不出东西,你点A就出对吧?控制台开好啊,防止它有警告刷新对吧?你点击二也是这组件,你点击三也是这组件,对吧?现在同学你觉不觉得我就面临一个问题,我要把消息一的一些信息传给detail组件。因为你看这儿这个蓝色的框子,这个是哪个组件呀,这是detail对吧,兄弟们,这是detail组件,我得点击消息一的时候,不仅要展示这个组件,我要往这个路由组件里边带点东西。
13:11
哦,你之前写的东西简单就是你看啊点击about展示about,点击home呢,那展示home,那点击message呢,展示message,现在就是点击消息一呢啊展示详情组件,并且要往里传东西对吗?哎,接下来才是我真正要讲的就是路由组件,哎传递参数到底有几种方式,同学这是得太好对吗?是不是路由组件是怎么给路由组件传参呢?是吧?哎呀同学这怎么传呀?啊慢慢来,同学,反正呢,你观察这个位置,这已经是一个路由链接了,已经实现了,你点诶这就匹配完了就展示,但是东西带不过去,来同学给大家讲第一种携带参数的方式,我们先讲最简单的,然后逐渐增加难度,好吧,第一种呢是携带PAR参数,哎,就这个啊PAR啊参数同学我说到这呢,应。
14:12
它有一个反馈,咱们在学习adjust这个技术的时候,同学你说有几种携带参数的方式啊,第一种我们叫做qqu啊。对吧,叫做query参数,还有一种叫什么来着,是不是就是Thomas参数,还有一种呢,叫body,咱说请求体参数对不对,那么请求体参数其实还有两种编码形式对不对,一个叫做URL encoed啊,一个叫做Jason编码,对吧?这些东西你应该有一个反馈啊,那么我们路由组件传参呢,其中有一种参数就叫做P参数,Para参数,最大的特点是直接就在这个路径里边写啊,你就比如说同学你想传什么过去呢?你是不是想把ID传过去,是不是还想把title传过去,因为你观察最终的效果是人家点击MESSAGE1的时候,你注意同学ID是不是传过去了,对,Title是不是传过去了,对,说老师那content的这个内容你别急啊,内容啊,我是这么设计的啊,在这儿这个详情组件里。
15:24
点呢,我在上方吧,我不在组件里面定义,我就cost定义好一堆数据,这数据呢是一个数组,数组里面包含了什么呢?消息的ID,你比如消息是零一,那么你所对应的content内容就是你好中国是吧?呃,来再来几个,走走你好,这是什么呢?哎,上归谷上归谷好了,那这儿再来一个,那就你好什么呢?嗯,你好这个这个未来的自己是吧,随便写几个,那这是什么呢?二这是什么呢?三也就是说同学这消息啊是在哪个组件里呢?Message里面,然后我就便利message数组形成了一个一个的消息,对不对?点击消息的时候,你注意是不是得来到消息详情组件呀,那么情组件里面呢,我定义好了一个变量,专门存储消息的详情,我知道同学们正常来说得是这个组件一挂载就去找服务器要。
16:24
说服务器呀,你好,我想问一下ID为零一的那个啊消息它里边的具体内容那个content是什么呀?然后服务器再告诉你,对吧,我们现在先写一个简单的,就是在这我直接定义好一个死数据啊,Data,或者叫做这个叫做detail data,详情信息都在这里存着呢,行吧,你只要把你的ID带过来,那我这边呢,就能给你匹配上你对应的content,哎,咱是这么一个设计,所以说同学来接下来怎么做呢?想办法让它跳转的同时能把东西带过来,那刚才我说了,咱们要传递的是是不是PAR啊BA,那要传这个参数,那怎么传呢?看着啊这么传,同学你说你便利的时候是不是拿到了每一个消息对象啊,那么我想往里边传东西,那你看着P这么传,直接杠把ID写在这,每一个消息是不是有ID啊,那这么写点ID,但这么写不对。
17:24
了同学,因为这是引号对吗?这是引号,你这么写算是字符串对不对啊说老师那明白了,得模板字符串,那我就写成这个吧,我这也写成这个,同学,那我问一下呗,为啥写成这个,现在飘红的地方有这么多呢,这啥情况呀?那同学我问一下模板字符串这个写法是不是GS世界里的东西啊,你在这写着标签呢吧,你上来就写JS里的表达式啊,不对,那所以说应该怎么办呀,这些东西剪切走花括号走这。能不能理解?哎,然后这块你不能直接写,按照之前的套路,模板字符串里边想混入一些GS的东西,是不是花括号前面加个倒符,这这么写对吗。
18:09
好,我们先看一下效果啊,你这样写完的效果就是点击消息一就是home下的message detail带着消息一的ID,点击消息二就是home message下的detail带着消息二的ID,对不对?好,来,我们先看一下效果,回到页面点击消息一看010203同学,你觉不觉得这个形式真的是像极了我们在学习架的时候所携带的purpose参数啊,对吧?像极了对不?啊,好了,那同学你这么写呀,我只能说你把东西带过去了,但是呢,他根本就没有收到,为什么呢?因为你如果这么写的话,就相当于你在detail后边多传了一些东西,到这匹配的时候,人家直接忽略了,人家说啊,后下的message下的detail,好了,和我这对上了,你后边还有东西呢,算了,我不看了。
19:04
这就属于模糊匹配了,人家认为啊,你传的多,我要的少,行了,剩边的啊,剩下的我不看了,对吧,那怎么能声明一下呢,我后边还有东西呢,你得接呀,是吧?同学你这么传是不是属于直接传了零一,直接传了零二,那接参数都得是KY6这种组合,那所以说你注意看同学你这种方式就是来写好注释。啊,叫做携带PAR参数啊,或者说的仔细一点叫做像路由组件传递,咱不说携带了,像路由组件传递PAR参数就直接在后边拼啊,至于说我这为什么还写花括号,还写这个,那不是我为了想把东西写成动态的吗?对不对?好,这是像路由组件传,那你注册路由的时候,这就得声明接收声明接收purpose参数好,咋声明呢?看着写法呢,如果你之前学过express,你对接下来的写法会特别熟悉,杠冒号ID啥意思?也就是说前边这些呀,都算是路由的pass值,那后边这呢,其实就是你所携带的参数了,对吧?同学,我们不光想把ID带过去,我还想带啥呢?是不是这个title我也想带过去啊?
20:29
OK,那怎么办呀,直接写Dollar,花括号MSGBJ点谁呀title好,那你这就得再声明一下,你还要接收谁呢?抬头,哎,你只有这样写才可以啊,说老师,那我是不是,我要是想传递pars,我就得这么传,而且不能光这么传,我这还得是注册路由的时候就声明好这个detail组件以后会接到一个ID,会接到一个title,对,就这意思,不能说这边直接就传,这还得声明接收。
21:01
啊说老师,那就意味着这个detail是能收到我传的ID和title呗,对了,他能收到。老师,那我想看看啊,先别着急看,看看页面有没有什么影响啊,被影响123是不是都没问题啊,那你这看是不是带了零三,那你看是不是消息三呀,ID和title头都带着了吧?行了,回到代码当中,我们打开detail组件,Detail组件是不是在这呢?来同学在render里呢,我做一个输出lo this.props那你想吗?同学,你这么携带过去了,这边也声明接收了。同学那你说想给组件传点东西,咱都不考虑它是什么组件,我就想给组件传点东西过去,同学那你说那想都不用想,肯定是不是得借助pros呀,哎,好,你这么一传,你这么一声明接收,那么恭喜你,Detail这个组件就能收到你所传递的参数了。说老师呢,收集到哪了呢?我把this.props给你输出,也就是detail到底接到什么东西了,我给你输出行吧,好了,回头来看,我把这清掉。
22:09
重新来到3000,我重新1.1点点啊来走这啊说老师这个detail data呢定义了,但没有使用,确实是啊,你找到detail我定义了吧,我是不是没使用呢?啊,那我就把它注掉也行,一会用的时候再解开来回到这儿刷新走起点击home同学为啥没输出这东西呢?你没有点那个消息几消息几人家详情这个组件,哥们儿,这个detail压根没有挂载到页面上。那展示什么render里的东西啊,对不对,点击message,接下来注意看,同学,我点击消息一。好,先别关注这儿,我们还没有拿东西往页面上放呢,对不对?我们就看看这个detail组件到底接到了什么样的pros呢?打开,然后去哪找你带过来的参数呢?说老师我看到了,我看到了location,完了我截取一下零一消息一不用那么麻烦啊,那在哪呢?看着这里是不是有一个match选项啊,打开match里边有一个PA,你发现你所传递的ID和title,人家都帮你整理好了一个对象,对吗?ID01是不是你带的ID?
23:21
Title消息一,是不是你带的title,那我想问一下,凭啥这叫ID,这叫title,谁告诉他的?那是因为嗯,回到代码当中,你之前写这个detail路由的时候,你在这声明的对不对?你这如果要叫做DETAIL2,那你这个时候注意观察啊,我回到开头的地方,重新给你点home下的message下的来点消息二,走起打开this.pro.match.promise嗯,是不是叫TITLE2,那同学你都拿到这些东西了,那你想那还愁什么呢?回到我们的detail组件当中,我把这个解开,接下来我要进行查找了,那所以说在这来别着急,Cost结构赋值,告诉我怎么写this.pro.match.par对吧?然后PA是一个对象,对象里面就包含着ID,还有title,那当然我得把这边的这个二呢给它删掉,对吧?
24:22
哎,好了,那叫title,那所以说同学这个问号也就能展示了是不是ID,那这个问号也就能展示了谁呢?是不是title呀,好,那这个count呢?那同学你觉不觉得,你得查一下,拿着这个ID到这里边去查找,我问一下谁的ID跟我一样啊,他说我的ID跟你一样,好把你的内容展示出来,是吧?你得找到这一个消息项,那怎么办呀?那查呗,Cost走,查找就有查找的结果,Find result,对吧,等于来找谁去detail。啊,Date点是不是find呀,查找走传一回调查找的条件是什么呢?先写一下你这拿到的每一个都是一个obj,对吧?什么OBBJ啊,Detail OB BJ,那写好了detail o,大写OBBJ,好,这删掉来吧,Return返回的条件就是如果detail OB这点跟我所传过来的这个ID是一样的,OK,那我就找到东西了,找到东西了那我这就好好写了,同学找到的是一个消息详情对象,你要它的content。
25:36
好了,来,走起,回到页面看效果,点击消息一来稍微给它扩大点地方,消息101消息一,你好中国消息二消息二,你好上硅谷消息三,你好未来的自己对吗?OK,你只要点他就能传同学,这就是属于向路由组件传递什么PAR参数。防止有些同学乱,我给你捋顺一下,同学我问一下啊,首先你必须得对这些文件结构得清晰。
26:09
不知道你清不清晰,第一个问题,结构是否清晰?不清晰赶紧捋顺结构去是吧?好,那么第二个问题,同学,导航区在哪呢?Data组件是你点了某一个消息在展示,所以说导航区在message里的,那导航区咋出来的呀,我遍历出来的啊,那导航区在实现这个更改路径的时候,是不是带着ID又带着title了呀,你光带不行,你这得声明接收。哎,你这要不声明同学,那这事儿就不好玩了,他就根本收不到了,人就认为你传了一堆没用的东西,人压根不看了,对不对?也就是说,如果你想向路由组件传递PAR参数,那么对你的要求就是,首先这得这么传,你得真传呢,然后怎么办,你得声明接收。
27:00
啊,你得声明一下,我要接受这个,接受这个,那接受到哪儿去了呢?那就在这儿呢。得这么拿,所以说第十行的注释我也给大家写好了,第十行在干嘛呢?叫做接收参数好。三步啊,来来来,传得这么传,声明得这么声明,最后接得这么接,在哪儿?最后看一眼你输出的是谁?this.pro去哪拿this.pro.match.promise点哎,你的对象在这儿呢是不?嗯,那我现在写的应该是title头是吧?所以说刷新一下来走消息一消息二消息三啊,那个输出呢,被我注掉了是吧?现在你也看不到了啊,那这输出呢,给大家留着吧,行吧,啊,我一直在最上方呢,给你输出一个人就是this.pro嗯,来,回头看效果刷新走点击消息一,那你瞧吗?
28:01
是吧,在这儿了,OK,这是传递para参数,同学东西呢会越来越多的,一会儿还有两种传递参数的方式,我们慢慢来啊,一会儿呢,我给大家形成笔记好不?嗯,那么视频呢,听一下。
我来说两句