00:00
好嘞,各位,在上一小节呢,我们讲了编程式路由导航,回到代码当中啊,有了编程式路由导航啊,就能让我在编写路由跳转的时候啊,能更加方便找到messages,找到这儿,那你看不一定非得借助link和NAV link对不对?我想什么时候跳就什么时候跳,写了这段代码呢,就可以跳了,而且有不同的跳转方式,有push,还有re replace,是吧,我还可以携带三种不同的参数啊,那我们把那个小需求啊实现一下,就在上一小节啊,我不是说要写这么一个效果吗?News组件挂载之后,等两秒钟或者三秒钟自动往message跳,那得怎么办呢?来到news组件对吧?找到这儿,只要组件一挂载,你是不是得在这个钩子里边写东西啊,Component did mount,然后是不是就开启一个定时器啊啊,然后等多久啊,是不是两秒钟啊,然后是不是就跳转啊来怎么跳啊news是不是路由组件,只要你是路由组件,那咱都好聊this。
01:00
点prop.history点你用pushpl,那就随你的便吧,往哪去呢?后面下的message he对吗?好,那我们看一下效果啊,刷新等两秒。是不是跳过来了?哎,你看路由的跳转变得更加灵活啊,那我把这呢注掉啊同学,要不你自己去练习的时候一看这哎哟这没点怎么还跳了呢是吧?哎,好了,折叠src复制一份,右键改个名叫20_src下划线叫做编程式路由导航好嘞,回到笔记里边给大家整理好了,先把这折叠起来啊,我们先看这我给你写的最新的一个编程式路由导航,其实就是借助this.pro.history这个对象身上的API呢对路由进行操作,跳转呢,前进呢,后退呀都可以的,常见的有这么几个对吧?Push查看,Repl查看,这儿呢回退前进,那这呢可以灵活的控制前进还是回退,以及前进几步回退几步对吗?好嘞,嗯,那么同学们,我们打开这个第四个之前,在给大家对比路由组件和一般组件的时候,你发没发现history身上的东西我们都用完了,哎。
02:14
用完的我都用红色的框给你标识search和state,我们也用完了对不对?接收参数的match点我们也用完了,对不对?接收PAR参数的,那么剩下的同学,这个pass name呀,还有这个pass,还有这个URL啊,这三个人都可以获取你当前所处的路由路径,你看about,这也告诉你about,这也是about,诶,你用哪个都可以好了,那你看路由组件身上的这些东西,我们是不是就都用了一下啊,好,折叠起来,那我们讲路由里边最后一个知识点同学叫做with ror的使用啊,还是先别琢磨这词儿啊,老师给你录视频的时候说我们要讲什么,只是说表达一下啊,慢慢引导大家同学回到页面中,同学请问呢,我这个回退和前进呢?我是放在哪个组件里的呀?我是放在message组件里的,对不对,就算不展示消息123的详情,这仨按钮是不是也有啊啊,那你要展示详情呢,那在中间诶插入一个详情,所以说我这三个按钮是放在哪儿的呀。
03:14
这里的啊,回到代码,你看一眼呗,S RC page home下的messageage找往下滑,往下滑走,说按钮是在这的,好同学,你听我说啊,现在呢,我有这么一个需求啊,就是说呢,我想把回退按钮和前进按钮啊,就这两个,把它放在头部这个组件里,同学,我不知道大家还记不记得了,我这个头部其实也是一个组件,我再给大家对比路由组件和非路由组件,或者你可以这么称呼叫路由组件与一般组件的时候,我刻意弄出来一个hier组件,就是为了给你说明啥叫一般组件对吗?同学们好,那么回到代码当中,不要再看pages里的东西了,看components是不是有hier啊,当然这里边还有个my link,对吗?我想让头部这块也有两个按钮。
04:04
也叫回退,也叫前进,哎,放在上边更便于人们操作,说那有什么难呢?那就写呗,我找到是吧?啊这两个按钮,那个go,其实写不写都行是吧?哎,复制啊,或者这也拿过来吧,复制放在哪呢?开点不是什么难事,老师直接往这放呗,啊那不就是多了个按钮的事儿吗?那这样在这儿呢,推车。回车放在这儿呗,三个按钮黑道也行来,那你回头看一下效果啊,说老师这三按钮来了呀,那能点吗?我们现在点回退前进,你点不了的,为什么呀?因为没有back,没有forward的,也没有go,对吧?好同学,那咱这样啊,咱先写一个,比如说回退,那你得定义这个back方法对不对?嗯,走back定义完了里边干嘛呀?哎呀,老师太简单了,不就是this.pro.history.go back吗?说老师那不就跟这写的是一模一样的吗?Page下的message里的这个来往上滑,老师那不就是这个back吗?我直接把这里的粘东西粘过来不就得了吗?那你试试啊,同学们,咱试试this点点history.go back是吧?哎,后退来看效果啊,点击后退down,它报错了,读不能够读取go back在and find身上,那就是意味着。
05:27
点go back的左侧是不是出问题了?回到代码去看,那也就意味着谁不行它不行,它是什么?Andde find,它为什么是and find?一句话,同学,只有路由组件,是不是才有什么history啊,Location match啊,我问你它是啥组件呀?老师,我也忘了它是什么组件了,来到APP里边你就明白了。兄弟,你那个hier怎么用的呀?你是亲自写了组件标签用的hier吧,所以说它是什么组件啊,一般组件,兄台一般组件哪有history啊,所以说你在这个hi组件里边,你conslo,诶不用consolo了,这之前有了,给它解开,同学你自己瞪大眼睛看啊,咱就来到这about这你刷新,你看看hier组件收到的pro是什么,它是个空对象,那空对象同学也不过分是吧,为啥?因为你确实就是个一般组件,那你你在APP里用的时候,你还什么都没传,那你要传一下A等于一,那可真是,那你传了,那你看这就能收到呗。啊说老师明白了,其实它没有history的原因就是因为它是一般组件,对呀,路由组件才有那些API啊,你说老师那这功能写不了。
06:46
哎,那以后工作的时候你就告诉人家实现不了,人说我就想把这东西放在这儿嘛,是吧?那同学咱得琢磨一个办法,如何让一般组件也能用上路由组件身上那些API呢?学过view的小伙伴呢,就知道view里边就没这事儿,什么一般组件路由组件对不对啊,那个view实例对象身上都有那些方法对不对,但是react不行啊,那怎么办呀,同学来注意看,我们就得把一个人请出来了,这个人叫做with RO,我先把它请来啊,Import在哪儿请啊,说老师你是不是想在hier里面用上路由组件的API,但是可惜hier是不是不是路由组件,所以说那就在这儿把那个人请来就能解决这个问题,哪出的问题就请了这个人去解决问题吗?啊,走,React RO DOM,他身上提供了一个函数叫做with RO。
07:38
注意首字母是小写的,它不是组件对吧?组件的首字母是不是得大写,它是小写的,所以说with RO是什么?是个函数,说老师,那这东西怎么用呢?同学瞧着我先把这back注掉啊,咱先不考虑这的事儿,咱就关注点就看这儿你到底怎么的能让他诶拥有这个history等等这些东西,OK,同学,我把这代码折叠。
08:04
你看我这么写啥意思啊,同学,这么写跟刚才是不是一个效果,只不过刚才连起来写了port defat,直接,哎,就写类,这回只不过就是说先写类定义好,再通过这个名字暴露是吧?那你看着这回我暴露的不是hier,那我暴露什么呢?注意观察,同学一定得给我说明白这件事,我暴露的是什么?老师你暴露的就是class这个类,这个组件,不对,我得这么说。我暴露的是with ror加工完之后hier的东西,或者说的再明白一点,我暴露的是with ror函数调用的返回值对不对?啊,说老师那位ror有什么作用呢?一句话,With ror能够接收一个一般组件,然后就把这个一般组件的身上加上了路由组件所特有的那三个东西。
09:01
那所以说人家叫with ror嘛,对吧,你不是路由组件,但是你就想用路由组件身上的那几个,哎,特殊的API,行啊,你交给VRO,他帮你加工一下你的一般组件,Hier经过了with rota的加工,摇身一变,它身上就也有了路由组件的那几个API。所以说你看你这么一写,回到页面里面,同学你刷新走起怎么样,Hier组件是不是也收到这些东西了,那所以说来到这个里边,你把这个一解开,同学,那这时候呢,你瞧一下效果,我给你新开一个啊,留下点痕迹看着走走走走走,这是不都是痕迹,你点回退二一是不是可以了,哎,所以说同学with RO就是专门用于解决你在一般组件里边使用路由组件API的这么一个问题,OK。啊,好,那你说如果都写到这儿了,那是不是需要你到page里边home下的message里边,把人那两个也粘过来呀,哪个呀,一个是forward,一个是go,复制来到这个里边,Head里边走都给它带过来,那这回瞧瞧看吧,前进前进,后退后退,然后go是不是也是可以的呀?啊所以说with RO这个用法,你要知道同学工作里边用的非常多,那我在这儿呢,给大家写一个注释啊,就是with RO可以加工一般组件,一般组件啊,然后呢,让一般组件啊,然后就是具备路由组件所特有的API,或者说特有的一些属性就可以了,那我问大家with roor的返回值是什么?再补一句吧,写在下方with ror的返回值这么说啊。
10:52
是一个新组件,诶组件同学,Hide是不是组件,是什么组件,一般组件位子roor是不是加工了?Hier对加工完之后的东西是什么?同学,你说红色框里的代码的返回值能是一吗?这要是一那还怎么渲染了对吧?所以说位root的返值一定是一个新组件,那么新组件和你传入的组件有什么区别呢?就是插身上所特有的路由组件的那些API是吧?哎,好了,那这一小节呢,我们停一下啊,那这样我先把这个准备型工作呢都做好,脚手架停掉,然后src呢,CTRLCCTRLV,然后呢,右键给它改个名,这是第21个下划线src下划线,这叫什么呀?With root的使用,With RO的使用,用的可挺多的,那一定要记住好了,这小节停。
我来说两句