00:00
那接下来呢,我们用这个react ro6配合上我们这个函数式组件,把咱们之前做的那个路由切换案例啊给它重新写一遍,我已经提前打开好这个静态页面了,我们来回顾一下它的功能啊,先做一个简单的就是一级路由切换,就是about和home之间的这么一个切换效果,当然现在我这个切换是假的,因为我是靠不同的页面切换来实现效果的,我们最终的目标啊,是依托着路由来实现不同组件的切换来达到效果的。那第一件事儿呢,就是我们得创建一个脚手架,我就直接创建在这个桌面上了啊,那个命令大家还记得吧?C create react APP名字呢,就随便起一个,我在这儿呢,就叫做hello。那接下来剩下的就是等待了,如果你等的过程特别的长,那请你检查一下你是不是没有配置淘宝镜像呀。
01:00
哎,我们稍微等一下。OK,那这个脚手架呢,已经创建好了,直接Vs code打开,首先我们对它进行一些精简,比如说public里面我们不需要这么多的文件,留下一个就可以了,index.atl,但页面应用的那个页面对吧?而且里边呢也不用写的那么复杂,精简一点啊,你得留下一个div啊,给它一个ID,这会儿随便我就叫做root,名字呢也改一下啊,叫做路由测试,这个单页面的页面就搞定了,接下来src里边从这到这这些都给它删掉,建立两个必须得有的文件,index.gs入口文件对吧,还有一个app.gs叉,所有组件的外壳组件,那由于这次呢都是用函数式去定义的,我就可以用这个代码片段了,叫做RFC,如果你。
02:09
安装过我之前推荐你安装的那个插件,哎,你就可以RFC了,哎,当然你看同学发现没,它有点慢对吧?啊首先一个一个说啊,有些同学可能忘了那个插件叫什么名字了,那个插件的名字来我给你看一下,找到已启用的搜索react就是这个,哎,是这个作者的啊,然后大家呢,可以去安装一下,当然啊,你也可以有别的选择啊,但是我用的呢,是这个,然后再说,如果你那会儿比较慢怎么办?说老师我敲了RFC啊,半天没反应,这插件我也安装了呀,那你需要这样做来把这些所有的东西啊都给它关掉,重新再开一个GS叉,然后在这儿再来RFC,诶,你会发现速度能比刚才再快一点是吧,然后你写多了,自然而然它就快了,好,那我就点一下就生成了一段固定的结构,对吧,非常精简的一个函数式组件里边这块呢,我改一下啊,Div太小了,我直接写一个he好了,搞定。
03:09
接下来就是入口文件了,第一件事你要引入谁呢?用谁呀,React嘛,所以说你要引入react,其次呢,你还得引入react DOM,要不谁给你渲染APP呀,对吧?来是他,当然别忘了这人了,APP吗?当前目录下的APP,然后就一句话了,react.render渲染渲染谁呢?APP组件放到哪里去呢?刚才你的容器写的是root,那这会儿就是root,好,那接下来啊,别那么自信,我们启动一下这个脚手架,看看能否正常启动,保证它OK,没问题,我们再接着往下写。好了,启动了右键检查看一下控制台上有没有什么报错,诶,也没有啊,那把之前开的这个呢给它关掉好,那接下来呢,我们就开始去编写一级路由切换了,第一件事儿呢,跟我们之前做的是一样的,首先你随便找一个,因为about也好,后面也好,都属于一级路由,所以说我随便找一个把它所有的结构呢都拿过来,当然这个结构我就不要了,这个root,因为我的单页面的那个页面里面是有这个root的,所以说我就可以把这个结构给它丢掉了,我就直接把这个div,也就是从这儿到这儿复制过来,拿到我的APP里面来,把这些就都替换掉了,然后右键选择格式化一下这个文档,没完啊,各位别忘了,Class是不是都得变为class name呀,还有就是style,其实你也得改,但是我这里没有style啊,我就不再改了,然后还有这个案例,我们是用boat stra了样式。
04:54
那所以说呢,我们在这儿呢,就得还得建立一个boop,那我不建立也行,就是直接呢,从我给大家的这个文件里边把它拿过来,找到这个找到CSSOK,就是它来摁住。
05:08
回到这儿松手,当然你得引入对吧?好写一个link,然后引入的是当前目录下的bootrap,那之前咱也提过,防止二级路由的时候样式丢失,这儿呢,我们不要写第二直接写斜杠,咱们提过这事儿哈,这会儿不再赘述了,给它关掉啊,那这块呢,也给它关掉,那接下来看一下啊,APP是不是变成了咱们所期待的样子,那也OK,就是这样了,但是你不能点啊,现在还不能点呢。那接下来干嘛?大家还记得不?不同的展示区是不是要变成不同的组件啊?我们不是管这个区域叫导航区,然后管这个区域叫做展示区嘛,那其实就是两个组件,一个是about,一个是home,那在这儿呢,我就简单一点啊,我就不再去一个组件是一个文件夹了,我让它一个组件就是一个点JS叉,因为我不需要自己去写什么样式,我也不需要一些图片啊,那在这儿建立一个文件夹,同学们路由组件都放在哪个文件夹里来着,Pages对吧?里边第一个谁about.js叉,还有右键谁home.gs叉,那当然这会就非常快了,RFC,咔这一堆,那这会儿呢,RFC,走,这是about OK,关掉,接下来就是它们两个里边的内容了,那回到这儿,这个拿走。
06:33
我是about的内容,你得放在哪呢?放在这位置那同理,Home这块也给它来一个复制粘贴,把名字拿过来一替换就可以了,两个路由组件我就准备好了,接下来呢,哎,就得安装react root了,好打开我们的终端,新开一个NP mi react-RO对吗?不对,你少了杠do,不用加任何的版本号了,直接安装最新版本六就可以了,回车。
07:09
稍微等一会,哎,其实呢,同学是这样啊,你不要考虑六的语法,五的时候咱们怎么学的,你现在就怎么写,哎,那接下来第一件事就是去index里边,你是不是得引入那个路由器包裹着整个APP呀,哎,那所以说在这引入一下呗,走from哪呢?React RO DOM,这里边有两个路由器,大家还记得吧,一个是谁bar RO,他还有一弟弟,那弟弟叫啥来着?哈希roer对吧?那我们说哪个更好啊,很明显是BA roer对吧?啊,关于他俩的区别在这儿不再赘述了,之前的课程里面我们有详细的说过,好,那第一件事就是来吧,走bara roor包着谁APP,好了,把它复制过来走,那逗号呢,给它调上来,好,那第一步呢,你完成了,接下来呢,是不是编写路由链接和注册路由啊,那找一下路由链接在哪啊,这两个A。
08:09
B不就是路由链接吗?那所以说在这儿写好了链接,路由链接不可能用A去写,大家想想,有两个都能写路由链接来RODOM俩人一个叫link啊,还有一个叫做navy link,如果你需要高亮效果,你用谁navyli,哎,跟之前都是一样的,A改成nayli,这会儿改成nay OK,那既然你用了nayli,你就绝对不可以去写HRA了,是吧?那当然这会儿呢,也得给它删掉,这是干嘛的呀?哎,加在谁身上谁就亮,不需要你去写对吧?一会儿它会自动给你加上的,好,那这会儿呢,不能写HF,写谁呢?写to,那这会儿呢也得写to,跟之前都是一样的,那这会得写斜杠,About,那这会呢就得写斜杠后,OK,路由链接啊,就编写完了,接下来你需要在呈现。
09:09
跟路由组件的位置那里干嘛,是不是注册路由,哎注册路由这都是咱们之前讲过的啊,路由好,注册路由同学外边得包着谁来着,咱们之前学舞的时候,是不是得引入一个组件叫做Switch,哎,这块就不一样了。五的时候有的这个Switch,现在在六里边儿给它删掉了,取而代之的是另外一个组件,名字叫做肉吃。哎,肉没有Switch了,然后你正常注册路由的话,是不是还得需要一个root,哎,这块你可别乱啊,Root相当于原来的Switch,那这个root呢,还是原来的root,那接下来你要做一个事情就是在这儿,诶用root包裹着谁一个一个的路由规则在这儿写好了,里边需要两个固定的属性,第一个pass,你是什么路径斜杠about,那接下来写的那个是什么来着?五里边叫做component,对吧?哎,得是这个六里边改了不叫component了啊,咱回顾一下五里边怎么写,首先这个里边你得引入谁about,引入呗下about,当然了,你还得引入home呀,那这是home。
10:32
五的时候咱是这么写的,Component,直接写谁呢?About,你是这个路径,我就给你看这个组件,但是现在六里边换写法了,不叫component了,那叫什么呢?叫element也好理解元素嘛,但是这会儿你就得变一变了,需要你呢亲自的把这个组件标签呢给它写出来。说老师那为什么还写这花括号呢?那不写这花括号,你看一下它不符合GS叉的语法要求啊,你怎么能给一个标签属性的值直接就互为一个标签呢?啊,那在这儿还是得写着这个划括号的,诶这会是改变的地方,大家先听着咱们一点点往下写啊,你等这一小节讲完了呢,给大家来一个整体的回顾,好,那这个规则定完了,那当然还有一个规则就是谁呢?Home,那我就给你看哪个组件呢?看home,诶走这就OK了,你看这是路由链接,诶,这是注册路由,说白了就是定规则呗,那接下来不出意外的话,我点击这about路径是不是就得变,然后在这儿呢,就匹配上了,是不是给我呈现这个组件呀?来,咱们大概的呢去试一下。
11:43
首先同学说,诶老师不对,这上来就是各种报错呀,还有警告呀,莫慌,你先刷新一下。哎,他就一个了,说老师这警告是怎么回事呢?一会儿咱再仔细聊啊,他是因为你缺少一个重定性,咱现在先别管这警告,下一小节咱们就讲它啊,那这一小节咱们先关注about和home之间的切换,点击about路径是不是变了,组件是不是呈现了,那点击home,诶,是不是也OK的呀,这就是实现了一个最基本的一个切换的效果。来回来各位,我们回顾一下变了的地方有哪些?第一个Switch没了,是谁如此?再其次,在这个里面不要再写component属性了,取而代之的是谁element OK。
12:31
然后这里边儿呢,有一个细节上的问题,同学们问一下之前我们为什么要在这儿包裹那个Switch。不包裹会怎样?这涉及到一个匹配效率的问题,对吧?各位,如果你不包裹Switch,它匹配上了之后,是不是还得继续向下匹配呀?这不是我们当年写Switch的这个原因吗?那现在既然不写Switch了,写这个roots,那是不是就意味着root和Switch是一样的呢?
13:01
不是注意看啊同学,当年我不写Switch是可以的,也就说白了路由规则的外边可以不包Switch,但是现在不行了,如果你把root删掉,那这个时候你会发现你整个项目起不来了,而且它有一个报错,说应该用这个roots这个元素去给它包裹一下啊,那所以说必须打的得包,之前是包不包都可以,现在是必须得包,那么再回想Switch,当时包了之后呢,是第27行,这个如果匹配上了,往下就不再匹配了,那现在呢,会不会继续再匹配呢?那我们来测试一下啊,在这改一个DEMO组件。啊说老师那没有啊,没关系嘛,创建一个demo.gs叉RFC好固定的生成了吧,给它改成一明显一点,好,这个组件我准备好了,那接下来就是引一下呗,DEMO那这块呢,引一下呗,如果它会继续往下匹配,那就意味着一会儿about这个路径会对应几个组件,两个组件。
14:09
如果继续往下匹配的话,势必会导致about和DEMO都会出现在页面上,那么事实呢,你自己看一下,刷新一波,点击about,发现只有谁about,哎,那所以说同学跟之前Switch的规则呢是一样的,就是一个匹配上了,不会再往下匹配了,但是不同的地方就在于现在是必须得用roots包裹着一堆一堆的啥root OK,那这一小节呢,我们先到这儿,那这个DEMO组件呢,我也给大家删掉,我只是为了做一个临时的说明,好,那这一小节呢,咱们停。
我来说两句