30_尚硅谷_react-router基本使用.avi原创

好，下面呢，我们就要真正开始用啊，真还是用啊，简单的来我们来看一下它啊。首先呢，大家可以去找到那个root的官网。啊，这个呢，在这里啊。大家也可以百度啊。啊，不过呢，我现在给大家定位的是最终我们想要的它的原则，最外面的首页是这个。我说老师我看不懂，赶紧给我中文的，不好意思，没有啊，有翻译的，是老版本的。啊，这是新版啊，因为新版的确实好弄一些，新版的也是一七年上半年出来的，其实也有一定时间了啊好，这个地方一上来啊，我们来看啊，大家不要慌，这英文有什么呢？对吧？其能看懂部分单词就行啊，这个看下这个再一个呢，实际上它有三个版本。

啊，它有三个版本，一个是针对于浏览器端使用的。一对针对于做做那种原生应用的啊，就react一个配合react使用，再一个就是用于服务器端的。那我们肯定选择哪个Y吧，啊，那就点它。啊，这就相当于它的整个文档说明的一些页面啊OK。啊，你不过你要一点点看他还是挺费劲的，不过这里面有些很多API的一些使用，其实就是很多标签。啊，因为大家知道啊，我们现在组件化开发就是用标签对吧，用组件标签。OK。当然也可能会包含一些小的函数或者对象啊，后面再说。好来这里面呢，会有这么多组件，大家看看，一上来就有两个路由器组件，一个叫B，一个叫诶怎么有两个呀。

还记得不，刚才我们是有两种模式啊，一种是带井号的，一种什么不带井号的啊，不带啊，其实这个哈希它相当于不带井号的，带井号的其实是呃，H5之前的语法实现，而不带井号的其实是H5出来以后的实现啊，OK，还有下面有什么。Root root什么干嘛呢，路由嘛。是吧，Redirect大家知道什么意思吗？啊，从定向。啊，定向啊，比如说自动的请求回取。啊，自动的请求了每个路径啊，后面会用啊link路由链接。Never never，知什么导航路由链接啊，所以他们的区别到时候一看你就懂了。不所。啊，交换切换对吧？啊，它里面可以包含多个root啊，到时候再说啊，这个东西大概知道，先看懂单词再说。

啊，后面呢，我们还会涉及到几个对象，History。这个对象非常关键，因为它里面有push方法，有replace方法，这不就是我们想要的方法吗？对吧？好，这个match和到时候再说啊，这个现在大家不懂，最终我们就要来去用啊，用了就要做一些效果呀，对吧。啊，这效果呢，来，我把最终的。这个应用给它跑起来。CD。MPM10。也就是我们通过做一个小的DEMO来去把它的语法了数量语法都讲一讲。哎。大家看一下我这里面其实。

这在干嘛？大家看到我点链接的时候，页面有刷新吗？没有，就是我现在啊，就这一部分是物态变化的部分，这就是我路由组件部分。能不能啊，也就是说我点报链接最终显示的是哪个组件啊，应该知道报的组件呗，是吧，我点home链接了，那就home组件呗。很清楚的一件事情，对吧，啊，这是一个基本的啊。一个路由的一个实现，我们现在呢，就要准备去做它啊，就实现它。来吧，那这里面呢，我们这样啊。22了，这这好好尴尬呀。特别尴尬的一个位置啊，呃，我们找到我们的当前的工程。

RA。好，这里面呢，我刚刚考过来了一个。React-blank空项目，不过可以改一下。想什么呢？那我要打开的是它这里面什么都没有啊，就是我们的一个空项。给他什么？是不是切换一下。那你想啊，我们现在要去做，首先得干嘛呀。那说。我要去做它，那我现在是不是要用去实现效果啊线上吗。那还那那这个事情还做不了，先要做一个准备工作啊，拆完组件司机要拆啊，要做个准备工作，你的库啊，你不得下载呀，对吧，你得下载啊，先得把它下载下来。来n PM in store，杠杠c react react-root，好，这里说一说它会好几个版本吗？那咱就不能这么写，那肯定不能在里面写一个，它不是它外国的版本，是杠do。

啊，就是它固定的，这不我们不有好几个版本吗？有外国的，有服务器端的，有native的是不是三种那不同的，那肯定名称不一样啊。嗯，OK，如果用web的版本，那你是干动啊，当然你可以在文档里面找。啊，OK，好。那里面这些东西都可以给他是吧，删掉。但是需要写一个什么。是不是需要写个index啊，需要写个index写一下啊。好，说一下。一旦有了路由，我们就有两种类型的组件，路由组件和非路由组件。

不一样，有的，也就是说大家想想看啊，什么叫路由组件呢？是不是对于一个路由链，路由地址的一个组件呗，但是所有的组件都是路由组件嘛，那不一定可能我这个路由组件呢，特别复杂是吧，那我是不是可以在这里面拆分组件出来，那他们还是路由组件吗？不是。所以我们一般情况下在写应用的时候，会将路由组件和非路由组件分开写。也说白了，创建不同的文件夹。我们以前组件一般用什么文件夹components，但是现在我是不是多了一种概念叫路由组件呢？那我一般组件放在这个里面，那路由组件我放在一个什么文件夹里面呢？取个名字啊，啊一般不会啊，一般是叫两种名字比较居多。一个叫pages啊，一个叫views啊，这两个名字呢，比较居多一些，OK，那我们就用这个随便找一个啊，这都没关系。

好，那下它啊，下载完了吧。啊，应该下载完了，看一下已经有了，是不是好，现在我们不说了吧，又用了四个版本。对吧，啊没问题。那它里面啊，我们该去做什么呢？啊，我们可以看一下，首先呢去下载好它，下载它以后，我们后面呢，就要去按照要求把这个实现。而这一个呢，看的样式，它用到了哪个库呢，用到了boot。不的CSS。你就这里面我其实没有写多少样式啊，之所以没写多少样式，是因为boot的样式功能很强大，就这个看起来效果还可以对吧？啊OK，所以我们要去在我们的项目里面去引入什么啊，引入过了，上一次我们不引入过吗？

来把这个打开啊，稍微引入一下啊，引入一下我们的这一个应用里面是不是有啊。这个这个。这不是CSS00吗？看下C。考入到我们的项目里面来。你弄了吗？好了吗？好啦，没有吧，你是不是得写宁呀？OK，另一接着斜杠啊CSS啊，把这个复制过来吧。能看到吧，好，后面呢，就准备好了啊，准备工作做好以后，下面。下面我们再去啊，写的时候我们要去分析一下我们当前界面的结构。啊，这个怎么分析，首先你要想整个是什么。APP呗，对吧，啊，APP里面包含了头部这个也不用抽取数据对吧，固定的包含了左侧的这个导航是吧。

那也就是说它们俩是两个路由链接吧。不，它们俩是两个路由连接，而右边的呢？右边的是不是路由组件显示位置显示区域，路由组件显示区域能不懂，也就说我点about它显示about，点击home它显示home，那我现在一共有几个路由路由组件两个APP又不是对吧，哪有三个。我不用两个链接吗。对吧，其实现在一共有三个组件，外围是APP嘛，对吧，里面我点about的时候显示about。对吧，点击home的显示什么home，那也就是说我一共要去设计三个组件，两个路由组件启动报告，对吧，嗯，写完。

解，About应该定义在哪个文件夹里面？这里面。刚才说过了，报的是路由组件吗？不是，它也不对应什么地路由地址，所以定义在这里啊，我们也不见文件夹了啊，直接在这里面写。就叫什么ap.gxx。对吧，而这个里面呢。第两个。啊，一个是呃，About home对吧，随便写哪个都行啊，点JSX。对吧，再来一个啊，后点GSX。OK吧，OK。来啊，下面啊，我们来去把这个外面的先写一写啊，外面的先写一写，来import谁react from，这都是套路啊，React from啊，写成form了，对吧。

Port react from react，放动好，这一次我换，我不用这个。行吗？干嘛呢？又蒙圈了，可不可以，可以你引入对象对象你们不有这个方法吗？当然可以了。也就是说后面我直接用什么render。这种结构复制不让你的代码很简洁吗？是吧？啊，说白了，你这个语法要懂啊，你要不懂那不就有问题吗？好render啊，还要引入APP是吧？啊引入APP啊，From点斜杠component下面的APP，那我们以前是怎么渲染的？

就写APP写杠did应该是root吧，这个记得没错，应该root我就不看了啊好，但是啊，我们现在啊需要用到root了，所以这个已经不正确了，那应该怎么写呢？我们来看一下是怎么写的，看大家都懂。找到那个路口。也就是说，一旦用上以后，你不能直接去渲染这个APP。而应该用一个东西把它包起来。弄谁了？Root，当然你也可以选择另外一个哈，Root，用一个路由器对组件给它什么包起来。不然的话，你这个路由的效果实现不了，说白了就是用它来管理整个应用。

能懂吧，不然的话你的路由效果实现不了，你不要借助它来实现吗？而它是哪个里面的，是不是root里面的啊，我我就以后就不说了，数起太费劲了啊，就是root。它里面有很多的组件，那你想必然是用大括号写法。这什么问题好？来我们先用这一个啊，那所以我们在这里啊分开啊写在上面。Input from react刚。那也就是说我这里不能这么写。是吧，既然有嵌套结构，一般我会这么做。懂不懂啊，如果做的更好一点啊，应该这么。OK。把这个。这。

看懂吗？啊，但是最外围是写的什么这个root。对吧，但不是直接自己结束，里面包含着我们的什么APP。看没有，这样看起来就啊舒服一点。啊，当然你也可以写成一行啊，没说不能啊，也是可以的。这个意义作用大概应该能懂，就是说白了用root来管理整个什么应用是吧，管理怎么应用好。那下一步写谁去APP？对吧，啊，写完了这个AP组件，来先把那个组件先给他什么。创建出来啊，APP创建出来好，我的里面是什么结构呢？啊，这个因为标题比较多，我们参照它来去啊审查一下。来啊，找一下它的整个结构。

再一个是头部，其实整个就是这个div吧，啊切换到后啊，因为这个上面简单一点，我把整个结构呢，都给它复制过来。就是就整个结构能不能看懂啊，这标签业务标签我就不再一个一个写啊。把它拿过来啊，很多给它格式化一下。来，我们来看一下，其实整个分为上下结构。看完了上面这个是固定的。就在头部嘛。他动吗？它总是不动。懂不懂下面这个结构，哎，又分为左边和什么右边。能懂吧，好，左边呢大家看啊，左边实际上包含两个路由链接吧，左边包含两个路由链接啊，我把这两个路由链接呢给大家，让大家看的清楚一点。

刚好两个A标签，但是我们写的时候不能写A标线。啊，这两个链接是个是两个导航链接吧，对吧，这两个导航链接啊，这两个导航链接得用到啊，啊root里面的。嗯，大家一想应该知道啊，来，先写出这个里面，把右边的写好，先写右边的，这样有好处。导航链接吧，但最终这个组件，这个组件标签最终还是生成A标签的。肯定你最终最终肯定要转换成标签，具体的标签对不对，能不懂。好，来，这个我们先写了。把数完放在下面啊，等会再算来记什么？Never a link。你这个level有一个事情啊，首先啊，大家想想看，我这个是不是要指定。

那个链接最终是不是一个什么样的地址啊，说白了转换成hi，要转换什么值对不对，那它用什么属性呢？这个肯这个肯定是要有的。那不懂，你要指定一个地址吧，说白了指定一个pass好吗？那他用的是什么呢。他用的是to，你说我写什么，其实非常简单，我们当前不要显示的是about吗？就这么写，写出来大家就懂了，其实刚才说也没意思，看到吗？啊，OK，最终是不是两个。懂不懂啊，再另外一个是什么home home看懂吧。OK，但这里面稍微有点样式，大家看啊，这两个是不是都有一个共同的。那能看到吧，好把它来看到，写一个什么class，不能写class，必须写什么class。

那说明前面的是不是都要改呀。来，这个也要写上。能不能看到好这一个啊，这一个其他的啊，这个你看有的这个有有一个有有一个没有。知道这个是一个什么作用，大家应该能看到，他选中的时候是不是有一个颜色，这个后面再说啊，后面再说啊，我们先写个基本的。能看到吧，好，把这些所有的class。给他什么改成？没有没了吗？自己写吧。Class，等于这吧，啊，OK，来对说。可以了吧，好可以了，那下面啊，下面要说一下下面的。这一个部分是变化的，这整个外面是是右边的一个一个整个一个装饰一个套啊里面这一部分才是路由组件显示的部分。

那也就是说我们这个地方啊，是不是有可能有这两个对应的路由组件要显示，但我一次只能显示几个一个，这个该怎么做呢？也就是说我直接写两个root写在这里好吗？不好，因为我要说明一下，我只能显示其中一个。那这个时候应该怎么做呢？来看到有一个。有一个标签，有个组件叫。什么意思？切换可切换的路由组件，来个root。看不懂，说白了就是我们先要在外面写一个什么。写一个SW代表我们这个这里面这个路由啊，你只有匹配你才能跟我显示。

看这个。看到吗？好，此时因为没有标签体，所以我直接这么做，这里面有几个属性还记得吗？我定义路由这个应该是要懂的，什么pass等于什么，对不对等于个什么。就是斜杠号包的呗，那它对应的组件是哪个。啊，应该写个什么属性，Component等于一个什么好，这个组件我是不是引入才行啊。能不能懂，说白了我要在这里面干嘛，引入两个路由组件，一个是about啊，点点斜杠啊，Views下面的about，还有一个什么home，那这一个得到的是什么？那现在你应该知道怎么做了，其实非常简单。哪一个他。

再啦。来一个home。这个这能随便瞎写吗，现在。不能他们聊了什么对应。看懂吧，啊，其实重要的啊，我们现在这里写的重要两个点，一个写link，一个是写这个root，但是这个里面要用什么Switch包起来，什么时候需要用Switch包起来，是因为我们只能选的是什么其中一个。好，那也就是说现在我们的这个基本的操作写的差不多了，就剩他们俩，他们俩简单的实现一下就行。啊，My component非常简单，哪一个。那你说我这个写什么，就写简单的root component可以吧，好，下面啊，这一个也是一样，先来个简单实现。

这是什么home？来把它写进来，接着改成后可以了吧，嗯，那整个啊，大家看到两个路由组件定义好了。啊，我的应用组件也定义好了，接着我的这一边也用上了。可以了吧，好可以了，以后来啊，我们当前应用给他什么好起来，如果能看到效果，那基本上咱就可以先休息一下。开始的时候右边没有是吧，好像有点不太好是吧，因为最好是默认显示谁是吧，那我们先看一下。哇，漂亮了是吧，我都没想到竟然能啊，这太神奇了，因为我都没没怎么干了，对不对啊，挺好的，但是有一些问题啊，有些什么问题，就是就是你你想想看，我开始一上来的时候就把这个问题解决掉，我们就休息啊，这这空白的不太好吧啊，一上来你希望干嘛呀，希望显示谁，你想显示谁好about，那行，那我们就上来显示about。

啊，你想众口难调啊，你就把它谁提的用谁啊来看着什么意思啊，这个地方其实用到一个啊，另外一个组件。我一说大家就能知道啊，Redirect就自动的从定向到谁去。我写一个他。我来一个是你说啊，对，很好。

能看到吧，嗯。出来了啊，看是不是啊。总理。好了吗？啊，这个基本的最关键啊，如果你能把基本做上来，后面慢慢就没什么太大问题了啊，后面就是继续的往深入做了啊好行，大家先休息。