00:00
我们继续同样的套路啊,Navy link高亮的那段代码呢,我给你放在这儿了,打开刚才写的APP做一个精简,首先呢,我不想自定义高亮的那个样式类名了,那就不需要这个计算了,我在这儿呢,就直接写了,也就是说还用谁那个active是这样啊,我们呢想用简单的代码把API和组件给大家过一遍,对吧,毕竟我们不是做项目,所以说一直带着之前的效果呢,有点烦,所以说直接还是用它默认的那个active。还有一个地方也要改,这块别写大写的了,写小写的,大小写问题我们已经探讨完了。这一小节给大家主要想讲的一个东西是路由表的使用。什么叫路由表呢?我们观察一下绿色的这一堆结构。觉不觉得形式是一致的,不一样的地方就是pass的值以及element的值,那我们接下来目标就是我只写粉色框里边这些不一样的东西。
01:02
然后你拿着粉色框里的东西交给一个hook,由这个hook给我生成绿色框的这一堆结构,包括谁最外侧的那个肉。那我所写的粉色的这些规则,不一样的规则就称之为路由表,好,那把这个人呢,先引进来,叫做use,它怎么用呢?来首先后肯定得有返回值吧,写个A等于这走。里边要求你得写一个数组,为啥是数组?因为root里边可能有多个RO,一个RO就对应数组里的一个元素。而且每一个元素的值呢,还得是一个对象,为什么呀?因为每一个肉里面还有两个属性,对吧?Pass和element,那写写呗,首先第一组规则pass斜杠about,那所对应的element直接写就是about这个组件,OK,第一组规则你写完了,那再来一组小逗号,别忘了这是什么呢?Home,那对应的也不说了,肯定是home组件呗,但您别忘了最后。
02:18
你是不是还有个重定向啊?那所以说回到这儿再补一个走小逗号路径是写杠,这儿注意了,不要写home了,要写navigate,然后写上这个to,然后说你去哪儿写杠about,好,注意了,同学们,绿色框里的东西我们就称之为路由表use root,可以拿着路由表生成下边这一堆粉色的结构,那也就意味着粉色这一堆我不用再自己写了,谁就是这一堆呢,这A,那所以说一般的时候我们不叫A,哎,我们叫啥呢?叫做element,但是你别把这个element和这个element搞混了。
03:06
这是里边的某一个对吧,最后这个是一堆,那就意味着这些东西你完全可以给它删掉了,取而代之的是element,哎,效果跟刚才是一样的,来我们看看啊,回到这边刷新一波走走走没问题吧,来重定向搞一波回车,OK的,哎,这就是路由表的使用,同学觉不觉得比react roer5要好很多,其实五那个时候吧,也不是说咱不能写路由表也能写啊,你可能得自己去封装组件,或者是借助一些第三方的这个插件库,但是在这儿就不用了,官方已经提供了这个user root,但是我这么写吧,也不是最优秀的,因为毕竟你把这些规则是不是都写到这儿了。一般来说,如果我们做项目,会在src里面出现这么一个文件夹,叫做roots,啥意思?就是所有的路由规则都在这写着呢。
04:04
啊,那我们就得把这些路由表的这个规则是不是移到这个里边去啊,啊,那移之前来各位没看这俩东西是灰色的吗?咋的引入了,但你没用,那就给它删了呗。好,那在这儿我就建立一个index.gs啊,GS就可以不用是GS叉,好,然后接下来你就得把这一堆规则给它拿走了,注意拿的只是里边的规则,哎,就这数组好放在这儿,那接下来你就得aport default,是不是得暴露这一堆呀,但是你别忘了呀,该引入的东西你好像还没引入呢吧,是不是这些标签标签都没引入呢?好了,开始走import,引入谁?一个是about,翻出去pages下的about,还有谁呢?就是这个home,当然还有一个重要的人啊,别忘了就是navigate,那我在这就引入着呗,走from rot navigate,好了,用的东西都引入了。
05:05
那接下来在这儿就得是引入了呗,不要自己再引入这个about home了,也不需要你自己在这儿再引入navigate,但是有俩东西你得引入navy link同学,那这没谁能帮得了你,你就得自己引,然后自己在这儿写,对吧?固定的结构人家能帮你生成,好,那这个use roots正常用着呗。那接下来就差一步了,Import引入roots from当前目录下的roots,由于叫做index,那是不是可以不写了?好,把这个roots交给它,OK,写好注释叫做根据路由表生成对应的路由规则,就是这个element直接在这儿写就可以了。其实这样写的好处就在于你可以把整个应用所有的路由,不管是什么层级的,都能在这儿得到一个统一的管理。好吧,来看一下最终的效果,刷新一波,走走走没问题,那重定向呢,再看一。
06:06
下A也是OK的,好,那这一小节呢,我们停一下。
我来说两句