00:00
好行,我们来看下一个,下一个叫引入路由啊,前面我们已经讲过,我们当前的应用呢,是一个单页应用。而且我们简单的说了一下,我们当前这个项目呢,一共会有三个一级路由啊,这里面有概念叫一级路由。啊,前面已经跟大家说过了,那这里面包含注册登录以及主界面啊。好,那我们现在呢,来去写一下。啊,要去处理路由啊,首先我们得去下载我们的路由的包啊,大家把这个命令给它复制下来,在我们当前的客户端应用里面。给他执行一下。好,那他现在去下载啊,等他下载啊,我们来去做我们该做的事情,那我们去写路由该写什么呢?首先我们要去写下我们的定义出来,三个路由组件来我们来做一下啊,这些操作相对来说比较简单。
01:05
来,那我们的路由组件是写在哪个文件夹下面呢?这里有两个文件夹啊,这里要说一下,我们一般情况下,路由组件绝大部分应该说都会跟redu进行交互,所以说呢,我们会在这个里面。Containers里面去注册啊定义路由啊定义路由组件来看一下。啊,我们来去创建啊,先创建个文件夹啊,因为每一个啊每一个。组件都是一个文件夹来啊第一个注册。啊,先创建个文件夹叫ist啊,接着呢,在这个文件夹里面去创建我们的Ist.JSX组件文件,对吧。好。啊,里面的内容呢,也比较简单来啊,我简单的定义一个,写上我们的名字叫大写的啊。
02:09
没问题是吧,好,那在这里面呢,简单的说明一下,当前是一个注册的组件,好可以在这里面呢,写一个简单的注释。啊,说什么呢,说是注册路由组件好没问题。那除了这个呢,还有另外两个,那我们就稍微复制粘贴一下啊。下一个呢是登陆。来把这个文件名改一改。好把里面内容呢,稍微改一些,当前是不是注册的是是吧,登录的对吧?好,那这个叫log啊,这个也叫login。好,还需要一个CTRLCCTRLV啊下一个呢叫me主路由主接好。
03:05
来,把我们的名字改一改。May接着是我们这个里面啊,把这个改改,这叫主界面路由啊,主键好,它的名字呢叫may。好,定义好路由组件以后呢,下一步我们要去将它映射成路由,那在哪里映射呢?因为我们是一级路由啊,在这里面映射就可以,我们的路口里面就可以进行映射。来,那也就是说我们现在呢,就不需要去渲染这个层了,我们得啊渲染另外的结构,什么结构呢。好在这里面呢,我去引入我们路由器里面的一些API,大家来看一下。啊,首先呢,我要注意啊,我把这个from写上啊,叫react root,大家知道我们最外层有一个路由器的概念,那路由器呢有两种,一种叫B入场啊,另外一种呢叫哈希入场,那展时呢,我们就用哈希入场。
04:13
好有路由器,路由器里面呢,会有路由对吧,来个root。好,我们先暂时引入这么多,等会需要了我们再引入,那也就是说我们现在啊,渲染这外层的是一个哈希root也这个路由器,而路由器里面去渲染路由组件对吧?那而root里面呢。需要去指定两个属性,我们前面说过一个路由就是一个pass跟一个什么component,那就来一个pass,好,这个里面呢,我们先来去啊,把这个也写一写。结构先摆好,好,那这个里面我们去注册什么路由组件的路由了,好,现在我们有三个路由组件需要去引入,一个是register啊,写写来,当前我是在index下面,而需要引入的是它,那这一个层次结构三个路径就会写啊,Contain诶,Containers。
05:26
下面的啊,Reist,下面的ist好在这里面呢,基本上就写好了,来再来两个,把这个名字呢改一改啊。Login,呃,我这里大写的login,好,下一个是me是吧,Me me,我这里大写的命没问题。那下面呢,我们要将这三个啊,将这三个路由组件映射成路由,其实也比较简单,比如说。
06:02
它所对应的路径是多少,其实我们在我们的前端路由这里面就有指定啊,好,那我们就对应的去写,写成小写的register。那再来三个,下面呢是login啊,小写的login,好,下一个me,这里面要说一下我的命,是啊,注意啊,我的命并没有指定路径。那没有主动令,什么时候会去请求我的命呢?其实非常简单。只有我当我们请求的路径是这两个的时候,才会去请求这两个组件,其他的所有的都会经过我的命,那也就是说啊,如果我想去显示老板的主界面,或者说想显示消息列表,个人中心,其实先要去请求我的。
07:02
渐变,也就是面点GSX,由它来再去加载它的下一级路由组件。这一个要理解到位啊行。来,那这一部分写好以后呢,其实我们的这一部分呢,就写的差不多了,好,那下面呢,我们把将我们的项目呢,给它运行起来啊n PM start。运行起来以后呢,我们就要去看啊,分别去访问这两个路径,以及访问默认的跟路径,看看会是一个什么情况啊,因为已经有一个启动了。好,这里面要说一个事来啊,这里面。这里面有一个小问题,什么问题呢?
08:01
我们现在在路由器里面配置了三个路由,但是我们知道在某一个时刻,我们只能去。显示某一个路由对不对?那也就是说我要在三个中只能选择其中一个,或者说我们应该在三个中进行什么呢切换,那此时就需要有另外一个啊组件叫什么呢?Switch,好,那也就是说我们在这里面啊,这个其实前面我们有讲过是吧。来。把它写上。塞进去,那也就是说最终我们只能是去显示其中的某一个,而不是显示其中的三个都显示啊。来,我们来看一下,那也就是说现在当我去请求跟路径的时候,那最终显示的是me,那当我去请求reist的时候,那它显示的是ist这样一个组件界面。
09:09
当我们去请求挪in的时候,来写一下啊,挪走理。对吧。哎,那也就是说到此为止啊,我们的基本的。结构就写好了啊。有人可能说老师我要去请求一个好,比如说我要去请求一个叉叉,它会显示什么呢?也是显示的me,这个要注意啊,前面说过这个me相当应于是什么呢?默认组件,那么只要跟前面的没有一个匹配,那必然会去找may来去显示。这个地方要注意一下。好行,这一部分呢。就讲到这里,大家把它念一下啊。
我来说两句