00:00
来,下面我们要引入的一个东西是什么呢?陆游。前面我们嗯,简单的去分析过,我们整个应用的一级路由,其实主要有两个界面。哪两个了啊,一个是这个登录的。能看到吧,还有一个是什么呢?就是那个后台的那个界面,那个管理界面。这整个是又是另外一个路由界面,也就是说我们现在是要去把路由给它搭建好是吧?来,那首先还是第一步先干嘛去是不是下载相应的包啊,诶这一次我们不用运行命令,但是我们得去看一下那个包有没有是不是啊看一下。来打开。首先看一下声明有没有啊。找一下啊,我们的这个声明。是react啊干什么懂没问题吧,没问题好,如果啊再啊谨慎一点就可以在这个里面也给他什么,是不是找一下。
01:11
这里面怎么找某一个包直接输啊,React root动有没有。是有啊有好,这里有的是灰色,有的是这种黄色,这区别在哪?啊,这个地方得说一说,我们在去我们这里面是不是只生明了这么一些包啊,但实际上下载的时候,是不是下载的比这个包多了很多呀。那也就是说我再去下载,根据生命音下载包的时候,它只是下载这个包本身吗?它会下载什么?哎,比如说我们,我生命呢,A和B包,对吧?但是你要知道一个包可能还依赖于其他包,假设我的A依赖于C,依赖于D对吧?我的B呢依赖于E,那实际上我最终会下几个包,五个包。
02:08
对不,那也就是说我们下载依赖的时候会下载啊,我们把它依赖分为两种依赖,一种叫直接依赖,一种叫间接依赖。那什么依赖?是直接依赖?生命的依赖就是直接依赖,而这个工具,它就会把你的那个颜色变成一个灰色。能看得到吧,啊是工具做的事啊,那当然啊,其他的这些就是一个什么间接依赖是吧。分了吧,啊,间接依赖是不是被我的直接包依赖的一些包。甚至可能是间接的间接是吧,都有可能,也就是说我下载包的时候会下载所有的直接依赖,以及所有相关的间接依赖吧,嗯,这个要搞清楚啊,搞清楚好行,刚才我们是不是已经看到我们那个路由的那个包是不是已经下载好了,没有任何问题,是OK的对不对,OK的好。
03:09
那下载海报以后呢,我们需要去搭建我们的整个啊路由的结构,我们前面一级路由刚才分出了只有两个,一个是登录,一个什么主界面,以及是管理界面啊,我们一个称为no啊,大家看名字啊,一个称为什么呢?Me,这可以吧。可以,没什么任何问题,好,我们把这个两个组件创建一下,那组件有两个文件夹,我应该用哪一个呢?这两个呀,我应该用什么PAGE18。能听懂不能听懂,那也就是说我们需要去创建,诶这里说一下,我每一个都创建成一个文件夹就可以了,可以好,那这个文件夹的名字呢,可以用大写,也可以用小写。嗯,组件名字要大写,并不代表文件名要大写了,对这两个东西是不是这要清楚,比如说我这里面就我们就写成小腿了啊,一个是IE。
04:14
啊,Login里面,哎,是不是应该有那个组件的文件了,至少应该有组件的文件,那组件的文件有两种写法啊,一种写index,连接S。或者SX对吧?啊还有一种,呃,写index的好处是什么呢?就是别人引你的时候,只要引到文件夹就可以听到,不,但是也有一个坏处。如果我按这个风格编码,那我所有的组件都是连接S或者JSS,那一打开多个文件的时候。就有一个问题了,满屏看了,上面看的都是index,我得仔细看才知道是哪个index。能听到不啊,我不,我很难观察出到底是哪个组件,是登录了还是in还是谁,对不对啊,就是各有各的好处,如果用单子引的时候,哎,就少了一层是吧?那还有一种写法,就是我再写个log,点击SX,诶这个时候我不用练单子吧,那这个好处就是看起来打开多个模块,打开多个组件的时候,能很清晰的知道我这是哪个组件是吧?不好的地方在哪?
05:28
在别人引的时候得这么多引一层引到文件夹够吗?不够。啊,我选择的是多引一层当啊,我们后面可以两种做法都用啊,两种用法都用,我们先用暂时用这种。这样啊,我是这么设计的,我准备这么设计,这个里面呢,就用这种方式,我们不还有components吗?Components就有代的方式。可以吧,就是两种模式都用一用,我们来体验一下,到底哪种模式更好,你你觉得更舒服一点啊,其实不同人可能有不同的体验。
06:03
啊。那这个组件里面啊,这个这是这个登录的组件啊,登录组件要写的代码,其实组件的代码基本上是有一个模式代码的,我看一下我的模式代码在不在,已经不在了是吗?我我见过我的模板代码的,走你。啊,登录就来了,你说这这写的好像没什么太大意思,是不是这能看到吧,来啊,你说老师我要没有了,那你就好好一点点瞧呗,是不是好。能看到吧,能看懂啊,这个说一下,当然最好写个注释,说是什么,是不是登录的路由组件,这能听到不好,这是个一级路由吧,啊好,下面除了它还有什么。还有那个管理界面是吧,我叫他什么呢?命可以吧,啊可以没问题,好接着把那个组件文件名给它改一下。
07:11
嗯,好,接着里面的这个名字给它改一下。这一个是什么呢?管理的路由界面对吧?啊后台啊后台管理的路由组件好没问题啊。来,那现在呢,我们定义好了两个路由组件,那最后是不是要将它映射成路由吧。啊,这个得写点东西啊,写点东西我们来可以看一下啊,大家注意观察啊,这个时候我们需要去做一个事情,叫映射成路由,这个在哪去映射呢?我们是不是在主界面APP里面去显示他们了,现在我的主界面是不是写的这个玩意,其实最后要他们嘛,不要前面我只是去测试,看我的按D有没有用,是不是好,来下面。
08:06
这个时候我们就要去映射路由,映射路由外层是是有路由器。要不要录一下,要了吧,好来这里面得引入一点东西,这个从哪个包里面引入了react。Root干什么?懂引入一些什么啊,大家看着这里面,大家还记不记得它有两种route,一个叫一个叫什么?最明显的区别在哪里?就是路径有没有什么井号对吧?但背后还有一些区别,后面我们会讲一讲啊,先大概知道这个事情好吧,我们就用那个没有型号的,没有型号的是不是看着舒服一点好,除了这一个啊,光有路由器不够,你是不是还有路由的组件,那个路由的组件这里面最新版本我觉得他做的有点不太好,他这个以前引入的时候都是有提示的。
09:11
现在他没有提出来,也就是你只能强行。能听到不啊,这个原因就在于他把那个把这些东西吧,都单独提出去了啊,但写成了很多不同的文件,你看是不这个以前是写在一个文件里面,统一一起暴露的,那用起来就。就比较舒服舒服的了,就是有提示。这也没提示,而且一个波浪线就是总让人感觉是什么写错了,实际让你写错没有了没有,其实说实话有的时候你也不知道写错没,你只有做运行才知道,哦,没错,我错了。能听到吧,有的时候我也不知道他怎么想的,你不要考虑一下那个咱程序员太不容易是不是啊,生活不易是吧,他。
10:00
来,把这些的都干掉。那我们现在啊,现在我们要的是一个什么呢?大家注意啊,现在我要有嵌套的结构,一旦要写嵌套的标签,最好用一个什么小括号,是不是给它括起来里面才好写嵌套的标签吧。听到吧,啊好,那我最外层是一个什么结构,是不是就路由器啊。这个怎么弄啊,是路由器,而路由器里面是不去配置路由啊,啊,每一个路由就是一个标签。人们看到,而路由里面要配置什么东西?这就说一个路由是一个什么东西?一个前台路由是个什么路由是一个映射关系,对一个K和value k是什么东西?Pass对不对?Value是什么主件,那就两个属性,Pass以及什么component component,我们前面是已经定了,只需要去引入进了。
11:18
这能懂吗?我们要要引入那个登录的是吧?来啊这个时候注意啊,注意那个,因为我们是不是引入的是自定义的模块去对不对,所以一定要有一个相对路径的关系嘛,好在这个page下面对不对,有一个什么挪in的文件夹够了吗?不够,我还有一个log.gs文件,对不对,诶我为什么要写成GX。这有什么好处吗?这一看就知道是个主页。能听到不,那写成GSGS一定是主件,一定是组件吗?不一定可以是组件这边比如说我这个APP,它明显是个组件,但我用的名字是什么后缀什么减S。
12:08
啊,反正我的习惯啊,尽量是除了GS,除了APP,我其他的所有的组件我都命名成后缀GSX。这样是不是能够去看到名字就知道是不是好,没问题。啊,没问题,来继续啊,继续下面是不是还有一个。另外一个是谁来着?是不是me?Me,对吧,这个得说一下啊,我能去写这一个吗?那么不行,因为你这引入的是一个的主件,主件你的这个名字必须什么大写,虽然我的文件名是大写的,但是我里面指定名字可是大写的,对不对,我名字是小写的,但是我这个文件名小写,但这个是大写对吧?啊这个要注意啊,一定要注意这个事情。
13:01
好,接着比如说我们去配置它,那路径是不是要设计一个呀,来,那我们设计一个啊叫什么呢。银子可以吧,可以好啦,内饰。他呗,按正常来写,是不是写这个。对吧,但是啊,这里说啊,我们最终的效果可不是这样子的,我听了太多了,把它关掉一下。哎,不用去看它不是不是home home是它显示了它的子路由界面了,实际上那它的子路由是home的话,你说它是什么。因为它这个整个界面是me。这个当前已经访问到了这个ain的指路由。的一个路径,子路由路径,它的子路对应的是斜杠后,你说它本身是什么前后。
14:07
那很,那我把这个也写上去啊,这是基础问题,就是斜杠。代表项目跟路径。能听到不有人说老师一定要这样吗?不一定,不是说一定要这样,如果我这么写着,那我所有后面的这个路径都要在中间加上什么斜杠,他的命就多了一层,我想给他什么?省掉一层听懂不啊,因为后面它有路由有嵌套,是是不是这个路由会越来越深呢?我可以把它省略一层可以吧,可以没有问题啊,是可以省略一层。这能听懂不答你,你说老师我就想这么写行不行?可以没有任何问题,但是最容易出错误的地方是有两种情况,一种有人不写斜杠。不行对吧,这是一种另外一种,有人加前面加点就加习惯了,我看到。
15:05
能行吗?不行,只有引入模块的时候才是有点的,我这是定义那个路径pass懂了。没有点,这个一定要注意,反正我每次说了吧,还是有部分同学会加点,他情不自禁知道吧,好,这是这个,但是这个做的不到位。啊,这个把它去掉啊,这有个什么问题呢?我们在某一个时间点是不是只是显示其中某一个路由,需要在外面再加一个标签,组件标签叫什么呢?Switch Switch就代表一个什么意思,我在某一个时间点只去匹配其中的什么某一个,如果我匹配到某一个了,那其他的我还去看吗?不看了。
16:04
能听懂吧,啊这个啊,这个是子体内。其中一个。那就是一旦匹配到某一个,那另外一个,另外其他所有的都不看了。OK吧,OKOK,好,那现在呢。我是不是就把这个给配好了吧。那现在我们要做的事情是不是要去干嘛,测试一下,是不是需要去测试一下好。来啊,注意我把这个拉到最左边。这里面最麻烦的地方是他们俩看起来名字差不多是不是?那我稍微的。稍微的改一下啊,这个有,那我这个,呃,这个比如说啊,举个例子,我这个就写个的命这个名字完全不一样了,就能看出来,大家注意观察一下。
17:01
是不是就能区别开来了?他的命是我们自己的,对不对?好,现在看到谁了。In了,看到in说明已经访问到哪个路由了,是不是in路由组件了?怎么观察通过这里面来看呢,它里面层次很深呢,这里面它配了很多相关的一些组件标签,这不我们那个是为什么啊,现在我匹配到的是谁呀。是亚,这个中间都不是我去的,是他内部是整的,他内部好的我们都不用管好,我现在怎么样访问界面呢,斜杠什么挪走你。有没有了,有了是不是好,那我自己一层一层展开去找,是不是特别费劲呢?那怎么办呢?搜索搜索哪个组件。能懂不?我搜索到一个组件以后,看什么就看几个东西,看它的pro是不是它接收的属性,以及它后面是不可能还有state。
18:07
组件不应该有状态的吗?可能对不,也就说白了,能看到组件相关的数据,听懂了不?嗯,只是我们现在还没有状态啊。那也就是说到此为止,我们路由的环境就什么是不是搭好了,这已经验证出来了吧,可以啊,在你真正去写啊这里面东西之前,一定要先验证你当前已经做好了,再继续往下写。啊。好,这里面基本的顺序就是我们先把我们的两个路由组件先定义出来了,这个小case是吧,好,接着在我的APP里面是不是注册路由,但是由于我们是第一层的路由,所以我们先要去在外层先写个什么。路由器是不是只是我们当前是不是用的是这种browse,也就是没有号了吧。那我们如果用哈希。
19:04
也可以用,用是可以也可以用。是不是给它改一下就行啊,区别就在于啊,有没有什么井号的问题,当前啊,至少大家现在应该知道是有没有井,也就是我后面再写,那我是不是也要带上这个井号啊。看到吧,啊没有问题,就是这一个啊,当然我这里面就用那个对吧。好了吧,好了,那我们的这一步啊,这一步引入啊,路由的这一步啊,我们就基本上做好了啊。
我来说两句