00:00
那在这一小节呢,我们给大家说一下编程式路由导航,大家回想一下,在RO5当中,你想实现路由的跳转得依赖着哪两个内置的组件呀?一个叫做link,一个叫做NAV link,那么在六当中呢,也有这个link吧?也有谁呢navig link,并且六里边还多了一个人,是不是navigate?哎,这些我们是不是都用过呀?首先我们说说这个link和navy link他们呢,最终都要转成A标签,你得点它是不是才能进行路由的跳转啊,我们再说这个navigate,这个东西得有机会被渲染到页面上,才会引起视图的切换。咱们之前讲的时候说navigate只要被渲染到页面上,就会引起视图的切换,所以说前提是咋的,它得被渲染在页面上,它得被渲染。说老师那我感觉这些东西跳路由就够了呀,哎,那我给你说一个场景,你看看你得怎么办,说鼠标划过一个图片的时候要跳转。
01:08
你不点,所以说你不可能用link和NAV link,因为我没点。而且是鼠标划过,你用navigate也不合适。Navigate,就是你鼠标划不划过我就直接,只要我被渲染上,我就引起视图的切换,那这也不对是吧?哎,所以说同学光依赖着这些内置的组件是不够用的,那么RO5当中,同学们,我们为了完成编程式路由导航,我们必须得依托着一个人。就是路由组件实例对象身上的pros里边有一个东西叫做history,对吧?嗯,你跑不了他的帮助,那么RO6当中没有this了,那得怎么玩呢?来咱写写啊。呃,提出一个需求吧,就是在每一个消息的后面有一个按钮叫点我查看详情。然后给个回调,然后往这跳,现在你是靠link对吧,你能看1234,你不是写link了吗?现在让你写的是按钮,来吧,写写,找到这个message,在每一个路由链接的后边写个按钮,叫做查看详情,那你就得给他一个点击事件,然后这里边就得来一个,比如说叫做show detail展示详情嘛,那就得给一个这回调,问题是里边做什么呢?哎,当然这得写上方式,里边做什么呢?哎说老师我写一个link好像就行吧。
02:40
来咱试试哈,你写一个link,你写一个to,嗯,然后你写一个斜杠about,咱先不去详情,先去about,看看能不能行啊,真写,你看你这么写就很诡异,你看你在一个回调里面直接就写了一个标签。会怎么样呢?看效果吧,来刷新走走走走是不是不跳啊,为啥不跳,说老师回调没执行,诶,那我告诉你回调啊,他肯定执行了,来在这写一个这个啊,来刷新一波走走走走回调执行没?诶执行了为啥不跳?
03:16
因为同学你要知道link和navy link得渲染到页面上形成A标签,你得点这A标签是不是才跳,那你这肯定不能跳,所以说你也不用尝试着navili肯定也不行,那这时候就有同学说了,哎,老师我有一办法啊,我写一个navigate这玩意儿不需要点呀,这玩意儿直接写就行啊。啊,那你试试吧,刷新一波啊,走走走走,回调,再执行视图不切换,为什么呀?咱说这个东西你得跑到页面上,你得渲染到这个绿色的结构当中,人家解析了并渲染了,才能引起视图的切换。所以说在这儿同学link navili navigate都是不可以的,那得怎么办?哎,借助一个钩子,这钩子呢,有意思啊,看它的名字极其容易跟另外一个人搞混,叫use navigate。
04:10
哎呀,说老师navigate是啥?Navigate是一个内置的组件,渲染到结构当中,视图就切换,哎,所以说你看它那个首字母navigate,那N是大写的这个use nagate是一个H,哎,说白了一函数你得掉啊,所以说在这来。随便写个A吧,然后在这一定要好,那接下来啊,你就不能瞧不起这A了,我就告诉你同学,原来你通过this点点history可以完成的功能,什么跳转指定路由啊,前进后退啊,A都可以完成,所以说一般呢,我们不管它叫A,那叫什么呢?就叫navigate,但是是小写的哟,Navigate好,那我把它放在最上边啊,放在最上面,其实放哪无所谓啊,然后这里边儿怎么用?
05:00
Navigate是一个函数,你就直接掉它就得了,比方说先做一简单的啊,不去详情,我去about,哎,这就OK了,来我们试试啊,回到这边刷一波,点击按钮走,你是不是就跳了,你看编程是路由导航。OK,那我去的不是about呀,去的是哪儿detail,那有的同学就这么写了,那你说是不是就错了呀,为什么呀,你带了斜杠,那就意味着这些东西都不要了,直接怼成斜杠,然后是不对的,所以说不应该带着斜杠,因为它是子路由。那你这样的话只能实现单纯的跳到detail detail是不是还需要state参数呢呀,大家记不记得我们讲最后一个是不是state参数,哎,那所以说navigate可以传两个参数,第一个参数很简单,就是你到底要去哪里写个路径,那后边传的是一个配置对象。配置对象里边都能写什么呢?能写这么几个东西啊,首先第一个就是replace,这个想必大家都熟悉,你不写那它也是false,那你要是写上为帧,那意思就替换呗,对吧?说白了就是跳转模式,你编程式路由导航跳转,那不也属于跳转嘛,是吧?那我在这呢,就写一个false,我在这写这个没别的目的就是告诉你这里边可以写PL这个属性还能写啥呢?还能写state,哎,你就正常带着你那些参数就得了,比方说我有ID,那从哪拿的呢?m.ID哎,但你别着急,你有M吗?没有,那这就得收一个。
06:39
那这收是收了,那你这是不是得传一个呀,那我就得加个小括号在这走M,那你外边就得包一层呗,好,那这就收到了M,那就m.ID那走着title content补一下呗,抬这儿呢写上抬,那这呢content,那这会儿呢来一个content就可以了。
07:07
好,我们来看一下效果啊,能不能跳转呢?回到这边走走走,先正常点消息啊,1234OK的,那反着点按钮,我们再点一下321是不是也可以呀,OK,诶这就是编程式路由导航。然后同学这个navigate呀,它不像说原来有那么多的API,大家想想那个history身上是不是有很多的那个API,比如说前进的啊,什么forward go back,它不是,它是完全就是一个就叫navigate函数,说老师那我想实现后退前进,那我得咋办呢?其实用的还是它。啊,那我们玩一下吧,就是在这个里边,嗯,我给他写一个后退,再给他写一个前进啊,那简单来一下吧,同学,找到APP里边,我把这一部分区域想给它变成一个一般组件。
08:02
你这些不都属于路由组件吗?那一般组件得放在哪儿啊?是不是components对吧?大家还记得吗?路由组件一般组件吗?那在这里边直接写一个head high着点JS叉RFC走着把这一堆结构给它带走,往这儿一粘贴好,右键格式化一下。回到这里边,引入这个组件ER from当前目录下的components下的ER,那在这我就可以直接写了,不知道各位还记不记得在REACT5的那个时候。只有路由组件身上才有那三个独有的属性都啥来着?History match location,然后你可以实现各种跳转啊,路由相关的API的调用对吧?那如果不是路由组件,是一般组件,我也想用这个,路由身上那些API得怎么办来着?你记不记得这个东西了,叫做VRO,有没有点印象?
09:12
把一般组件用V字RO加工一下,你就发现一般组件身上也有了路由组件所独有的那些属性,对不?那RO6里边没这玩意儿了,没有这位置RORO6的做法就是我不管你是任何的组件,你只要想实现编程式路由导航,你就use navigate,那个hook你一用就可以了。所以说回到里边我们要做一件事,走react RO那东西叫做use。Navigate,然后在这儿收到一个navigate,它调用,那当然这个名字得改,然后你想实现前进和后退,就靠这个navigate来写写啊在这个HR的下方,在哪呢?我看一下啊,写的好看一点,在这个位置吧,But,来一个后退,再来一个前进,那后退写的像一点,来一个左箭头对吧,左箭头就是这个代表后退,那这个呢,前进就是右箭头呗,走就是它好,那这个和这个是不是都给一个点击事件呢?On click,走,那这个后退back呗。啊,那前进呢,Forward对吧?好,有这个,有这个复制,往这一走你得写呀方式,那第一个呢,叫做它,然后走着,那当然这个也得写呀,方式拿过来。
10:46
里边简单了,如果你想后退navigate直接传负一往后走一位,如果你想传一,如果啊一位,如果你想前进navigate调用传个一,就往前走一位就可以了,来看一下效果啊,回到这边咱们从头开始点走着,那么about,然后是home news message啊,那这个时候你可以选择后退来走走,你可以前进走走对吧?诶,但是写在这好像有点丑哟,哎,那我调一下啊,那把这个东西呢,就得给它拿过来,放在这个H2的下方,放在这儿,哎,就相对来说能好看一点,对吧,前进后退,这就是编程式路由导航。
11:29
那这里呢,还有一个细节上的问题回来,以目前react RO do6的这个6.2.1版本来说呢,你不可以去用navigate跳转的时候在这写其他的东西,你只能写state,说老师我想携带一个search参数,我是不是可以写一个search啊,不可以说老师呢,PAR参数呢,我写个PAR也不行。如果是search参数和per参数,请你直接拼在路径里边,能在这儿写的也只有这个state,那其实这些东西呢,我们可以通过官网去查询到是吧?那来咱看一下同学react RO dom6啊,它也是有自己的这个官网的,打开好,我们点击这个啊,阅读它的文档,然后找到这个API参考,然后发现这块,诶就有一些选项,那我们可以去找一下啊,比方说呢,找到刚才我们讲的这个use navigate,你点击一下,然后在这个位置它会有一个说明,你点开之后它会告诉你to,你就正常写你去哪儿,那么第二个参数是配置项,配置项里边目前只支持replace,还有谁state,就是刚才我们写的那个,OK,好,那这一小节呢,我们停。
我来说两句