00:00
那在这一小节呢,我们给大家讲一下重定向的写法,在真正讲之前呢,把这个src给它备份一下,我要把我代码的痕迹给大家留下啊,第一个讲的,所以说编号是零一_src走,那名字呢,就叫做一级路由,那大家回想一下,我们上一小节做的不就是一个一级路由切换的效果吗?好,回到案例里边解决这么一个问题啊,就是当我什么都不输入的时候,它是有一个警告的,上一小节大家也看见了,这个警告翻译过来的意思呢,就是这个路径没有对应任何的组件。那大家想想,如果你的路径是斜杠about,那最终你所对应的路由组件不就是about吗?这不就是一组路由规则吗?然后他发现说,诶,这个路径没有规则,那咋的就报了个警告呗,大家也知道,如果这我什么都不输入,那就相当于你是有一个斜杠的。好想想react router5我们当年怎么解决,我们得回到APP里边,然后当年呢,我们是在这引入了一个内置的东西,叫做re REC readre,对吧,用于重定向的,然后需要你在这个规则的最后是不是写一个readre组件呀,现在有所变化了,注意各位不写ready RA这儿呢,引入的也不是他了,因为RO6把它删了,换了一个新的人,叫做navigate。
01:28
那下边的规则也得变一变了,你正常写你的root。在这别写斜杠,Home,写斜杠还写element,接下来重点来了,你不要以为说老师我在这写个about不就得了吗?那你这样的话,你用那个navigate了吗?没有用,所以说是这样的啊,正常写element代表这个路径,我要渲染接下来的这些元素,那到底是哪个呢?删掉是nagate navigate有要求,里边必须要写一个to属性,就是你要去哪,那我要去哪呢?About,诶。
02:10
Navigate这个内置的组件挺有意思的,只要navigate被渲染,势必会引起视图的切换。来,我们先看一下效果啊,回到这儿什么也不输入,走默认about,那点home就home呗,你点这个再再回来呗。哎,大家体会体会,挺特殊的哈,一渲染视图就切换。为了能让大家理解的更好啊,咱们再多做一个小练习,就是接下来呢,我在这个home组件里边,在这儿加一句话,哎,叫做当前的萨姆值为多少?下边再来一个按钮,写上点我把萨姆变为二,好先实现这么一个效果去啊,那就回到home组件里边。然后呢,首先你得引入use state,这会儿大家应该还记得吧,你没有use state,你在函数式组件里边,你怎么玩状态呀,就是在这我就直接写了啊,Constant走use state里边是不是传入初始值啊,我就写一个一吧,那在这能收到这个值本身,以及更新这个值的方法对吧?好,那在这呢,也得改一下,写个div,正常写这些,下边来一个H4,叫做当前萨姆的值是走读出来呗,下边呢,还得有一个按钮button,叫做点,我将sum变为二,那你得给他一个on click,走调谁呢?Set some。
03:41
直接这么写行吗?不行啊,告诉人家变成多少啊,老师,那我写了二可以吗?不可以,这是一个基本功的问题,在这儿呢,不就不再说了,你是不是得外边包一个函数啊,这不就OK了吗?来看一下效果啊,回到后面这如果一点是不就变为二了?提出一个新的需求。
04:01
如果萨姆的值变为二了,直接跳到about。那如果不是二呢?那就该怎么呈现就怎么呈现,我还是在后面这,我还是呈现这些内容,一旦你变为二了,瞬间我就得过来。那这个时候你就也得用那个navigate组件,好回来我们简单写一下啊,Import走,引入reactor DOM那个东西叫做navigate,这名字你得记住啊,然后在这其实就是第九行动点手脚,别直接写这H4,写个三元表达式,问一下萨姆的值是二吗?如果是二,您注意了,你就得写navigate,诶,然后to说一下你要去哪儿斜杠好不好,然后呢,如果不是二的冒号,正常把之前的H4写在这儿呗,来感受一下啊各位回到我的home里边。
05:05
由于是一原封不动,那如果你把它改成2321走,是不是就切过来了呀?所以说你再次体会体会这句话,就是navigate这个组件只要渲染就会引起视图的切换,那有的同学就可能比较鸡贼,诶说老师你看着啊,我不给他写to,我看你往哪去呢?那你猜他会怎样呢?来看一下效果啊,走321走着他报错了,而且你看一下他说的是什么呀,说哥们儿,我发现不对呀,你没有路径的名字呀,就是因为你没有写那个to呀,是吧?啊,那这儿呢,其实还有一个属性,再跟大家说一下啊,就是navigate里边不仅仅可以写这个to,还可以写这么一个属性,我一写大家应该能猜得到PL啥意思,就是跳转的模式,默认呢,它的模式是push,或者说默认replace的值是false,那你说同学PL。
06:05
False,那意思就是push为真呗,大家都知道路由跳转有两种模式,一个是re replace,一个是谁push,哎,默认呢,就是这样,也就是说你不写它默认就是push模式,那如果我写上这块是true呢,哎,这样我们啊先不写这个,然后呢,浏览器给它关掉,重新开一下,我们看看啊是不是push模式,我们验证一下啊3000走。Push试模式会留下痕迹,点后退呢,会退回去是吧?走走,那这个时候我点后退肯定会回到后呗,那如果加上了这个来走着,那你得关掉浏览器啊,重开一下,为啥重开一下,要不你说不明白它留下很多历史记录了吗?好3000走这个时候走着。注意了,切换了吗?好,你点后退的时候走你回不去了,因为已经被替换掉了是吧?这就是哪个组件呢?Navigate用于干嘛的呀?重定向,只要这哥们渲染就会引起视图的切换。好,回到笔记里边,我们整体过一遍,同学,截止到目前我们用了哪些内置的组件啊?
07:16
Browse ror是不是用过了啊,说老师这个人没用过哈西ror,这么说吧,同学,如果react roor到五你学了,那么BRO,哈希RO和五是一样的,对吧?关于他俩之间的区别呀与联系呀,我们之前都有详细的讲解过,在这就不再赘述了,然后还用了哪个,朱老师用了这俩,嗯,一会再说这俩啊,刚才用的是哪个,是不是navigate来读一读,它的作用是只要这个组件被渲染,哎,就修改路径,切换视图啊,那默认呢,是push,你可以通过replace处去指定一下replace模式,对吧?哎,那这会也是刚才我写的那个例子,然后这里边呢,还有一个东西我没有去提,就是roots与root啊,点一下同学,这里边东西挺多的啊,我们先关注前五条,这个第六条啊,我们得单独用一小节呢去给大家讲解,就是react RO盗六啊,很高级了,它支持路由表了,回头我们再仔细说啊,现在不。
08:16
提这个六,先把12345都过一遍,V6版本中移除了先前的Switch,引入了新的替代者,就是肉肉必须配合root一起使用,而且必须用roots包裹着root root其实就相当于一个一副语句,如果路径匹配,那就呈现对应的组件。好来再看这个同学,第四个我们没有验证过啊,你读一读,他说这里边还可以加这么一个东西啊,说用于干嘛呢?匹配时是否区分大小写,用的不多啊,我们来验证一下,就这个啊,什么kcent这个东西来我不加啊,你注意同学回到这边。改一下代码,我把这个about呀给他故意呀,给它编成大写的,我这个规则我写的是大写的,但是我跳转的时候我写的是啥小写的这块,注意啊,这块是管跳转的,这块是规则,现在明显跳的时候是小写的,规则是大写的,那能不能行呢?来看一下效果啊,走走是不是可以的,但是如果你加上这个啊kcentive把它拿过来放在我们的这个里边,好,你注意了它就区分大小写了,你点击home的时候没问题,但是about咋的,路径小的规则大的没对上,对吧?这个用的不多,大家了解一下就可以了,好,那目前我们学过的这么多,还有这个五没读是吧?那读一下吧,当URL发生变化的时候,肉S会查看其所有的root元素,然后一层一层的进行匹配,当然现在啊,我们还没有写啥,没有写二级路由呢,这一小节就讲了两个东西,第一个。
09:56
啊,Navigate这个内置组件的使用,还有就是root标签里边可以加一个K3 OK,那这一小节我们停。
我来说两句