29_尚硅谷_react-router说明.avi原创

好，我们继续往下看啊，我们今天要把后面呢啊讲几个东西，两个东西啊，一个是route，一个是UI。先看这一个。啊，现在呢，我们用的是要强调一下，现在我们用的克数的四的版本，这版本四为什么要强调这个东西呢？因为四的版本跟以前的版本的那个API都不太一样，用法也不太一样啊，这个要注意啊。不过在讲这个东西之前，我们先说一下别的啊，来看一下它相关的一些东西啊，先别用啊，先对它有一个理解再说。首先通过这个名字啊，要知道一看到名字你就应该知道它是一个RA的插件。啊，什么什么插件，这是个什么概念呢？比如说这块插件。什么意思？对，依赖于基于这块的一个库。

也就是说这个这个库这个插件它没有这块能用吗？不能。因为它的语法是基于简化写的，那它也是一样。对吧，OK。这一个库呢，也是专门针对去写的，那也就是说我在。几块项目里面能用它吗？不能啊，就这样一个意思啊，专门啊用来去实现一个，诶这个一个东西。加18。单页应用。啊。好，等会我们再说，单应用是个什么样的概念啊？所有记忆项目呢，基本上都会用，所以这个库非常关键。好，下面我们来看一下啊，SPA应用的一个理解啊，这个是大家必须的理解的啊，叫单页外表应用啊，这是一个现在写啊web应用的一个潮流，就是做一个SPA。

好，SPA应用和非SPA应用有什么区别呢？我跟大家描述一下，譬如说我现在呢，大家知道一个页面很多界面对不对？那界面与界面之间是不是一般通过链接来跳转呢？那也就是说，譬如说我当前应用有两个页面，那我点击啊有一个页面一个页面B，我点击A页面的链接相当于是不是整个跳转到B页面，那也就是说我整个界面刷新了。记住了，是刷新。能不懂好，那如果是个单页应用呢。它不叫刷新啊，我更喜欢叫它更新。其实就是我们平常说的局部刷新。也就是说我点击这个链接，它跳不跳转，它页面跳吗？不跳转只是我的页面的某些部位发生了什么变化，它为什么叫单叶呀。

单页什么意思？一个页面对很好，这一个其实就告诉你一件事情，整个应用里面就只有一个完整页面。其实我们现在做的应用就是只有玩一个页面。能不懂啊，但是现在呢，我们应用里面有链接吗。没有，我们现在做的这些代码，这两个代码都是没有链，有一有一个链接是有链接的，但是那个链链接可是跳，可以直接的刷新，还记得我们那个用户列表吗？用户列表点击那个上有链接可以跳转了，但那个。是更新吗？是局部刷新吗？不是，那是一个一般的A链接，它是跳转，是页面的一个跳转啊。而且跳的不是我当前应用的界面，对不对外部的界面啊。好，那我们继续往下看啊。就整个应用，它只有一个完整的页面。那里面的东西都怎么构成的，实际上就是各种各样的组件构成的。

那也就是说在一个事情啊，点击页面中的链接是不会什么刷新页面的。还有一个非常重要的事情，点击链接本身这个操作也不会向服务器发请求。如果我不是一个单页，发不发请求？就是说我不是个单页，我一般的链接发不发他必然发嘛，对吧，必然是发请求了。但如果我是一个啊单页应用的链接，单页应用链接呢，我们称它为什么链接呢，叫路由链接。啊，这一个就是为了交流取得一个概念啊，那也就是说我点击路由链接本身它是不会发请求的。但是最终我的界面要不要变呢？肯定要变，那不然的话点到啥意义呢，对不对啊，经常大家可能看到这样的效果。

来看啊，譬如下面有一个table。对吧，有几个选项。就选项卡。点击这一个是不是显示一个上面就是主体部分是吧，点击这一个显示一个界面效果，点击它是不是又显示一个效果，点击第三个是不是又显示个效果，诶这个叫路由跳转。啊，这个路由跳转本身啊，它是不会向服务器发请求的，但是这个组件内部是不是有可能发请求，听懂吧，但是那个发请求是我这个链接导致的吗？不是我这个路由链接点击是不会发请求了。但是得更新不同的组件吧，得去找不同的组件，那这个怎么做呢？这个就要靠他了，靠这个库了呀。对吧，他得知道我去点击的不同链接吧。至于怎么回事，到时候再说啊，你先有一个大概理解啊，当点击链接的时候，这里面强调点击链接是点击了什么链接，不是一般链接。

而是什么呢？我们要强调一个概念，叫什么路由链接是只会做什么呢？页面的局部更新。OK，那在组件内部，如果我需要数据，组件内部可以干嘛？发请求去获取数据，亦不展现。但这个事情并不是因为我点击了链接直接的原因，对吧，点击链接本身是不会发请求的。这个一定要。知道这个事。好好，这个是了解以后呢，下面我们要看另外一个事情，就是对于路由的理解。这个大家学过了。忘了是吧，好忘了我们我就带你回顾一下啊，有一个东西叫路由器。

还记得吧，路由器对象有两个方法常用。点get或者post。还有印象吗？啊，而且这个方法呢，接收两个参数。第一个不能称为ul，那个他们名称不太好pass，因为ul一般是一个完整路径。就是带HTTP的。能懂吧啊，而我的pass是一个我的整个UI的一部分，右边的一部分，什么斜杠啊，Login斜杠register。这个称为pass，不称为UR，好，下面还有一个是什么？回调函数，还记得那个函数会接收啊，其实有三个参数，但我们常写两个。还记得是哪两个吗？IEQ和I还记得吧，OK。

那我们我这条整个语句在干嘛呢。这个是路由器啊，记住了，路由器和路由是两个东西，Root和root。这是路由器，这是路由。能不懂，好，那这个路由器点get方法在干嘛呢？我们有一个统一的称谓，这个叫在注册路由。能懂吗？啊在注册路由，那现在就要说了，注册路由的路由到底是什么呢。是不是路由其实就是一个映射关系。何谓映射关系？啊，就是一个key。对应一个什么呢。其实我们一个对象里面是不是很多映射关系组成的属性名和属性值吗。

对吧。能懂不？关于音色关系，其实有一个数据结构叫map，不知道还有没有印象。就在ES6里面啊，应该是讲过一个数据结构叫ma。Map里面就专门用来放映射关系放K钮的啊，如果你不记得，你稍微回去可以看一下。好，那这样一个映射关系到底是谁跟谁的映射关系？K是指谁？Y6是指谁呢？其实非常简单，K就是这个pass。Value是什么呢？就是这个毁掉函数。看着吗？能懂吧，那也就是说我一个路由器其实是不是可以去多次调用，点get或者点post。能懂吧，也就是说一旦你通过root去点get或者post，那你就在干嘛呀。注册路由。对吧，注册路由注册了很多映射关系吧，也就说一个root是不是可以挂多个K。

可以不不同路径嘛，当然可以。那有人说老师这有啥用呢，是吧？这个后后端的这个现在我们说的是后台的路由啊，后台路由他们是不是用来处理请求的呀。那大家想我在浏览器里面，我是不是可能输入一个地址啊，假设我这个服务器监听的，监听的端口号呢，是3000，那前面我就log就不写了啊，3000斜杠，假设我们这个pass呢是log，那我是不是写一个斜杠log。那我们的这个路径是不是就跟我要去匹配某一个路由的路径。假设我刚好我也就是斜杠路，那是不是跟他匹配了。那也就是说跟哪个路由匹配那个回调函数，是不是就处理请求啊，说白了就调用这个回调函数。能不能看懂，要知道流程啊。

OK，说白了就是我们后台路由是干嘛的。处理后前台提交的什么请求？能不能处理前代些？当然你这个请求要跟我匹配。对不对，靠什么匹配的，是不是你请求路径呢。匹配OK，最终去执行，因为我这里面有iqiiq，是不是代表的是请求啊，Is代表什么响应。最终我的服务器是不是浏览器发送返回一个响应数据啊。好，所以说大家先一定要啊，我以它为例啊，说明一下什么是路由啊，一个路由就是一个什么呢？映射关系，所说的映射关系就是K对应什么Y。K是什么？由径。Pass就是一个概念，叫pass，能不懂value是什么呢？好，这个时候就看你是前台路由还是后台路由了。

听懂吗？如果你是后台路由，它对应的是什么？Function处理请求的回调函数。对吧，那如果是前台路由了，其实非常简单，大家想我点击路由链接是不是要显示一个界面啊。一个界面靠什么显示？靠什么形式组件，回想一下我们刚才说的那个效果，这上面是我的主体部分，下面呢是三个table选项。就代表了三个链路由链接啊，分别是ABC，大家想我点A。是不是应该显示ae路由所对应的ae组件？对不对，我点B了。应该是不是显示B组件，我点C了。那就应该选C组件，至于这个怎么切换，得靠它去管理。

那么呢，我们专门现在去学一个库的时候，先要理解这个流程，这个道理，咱再说用上面库用什么语法去写。这个大概懂吧，好懂了以后啊。后面呢，就是一些具体的说明，刚才其实我已经说过了啊，后台啊路由分为两种，一种叫什么后台路由，一个叫什么前台路由，后台路由就是乐服务器端由啊value式。反险对吧，用来干嘛，处理客户端提交的请求，并返回一个什么响应数据，你不能光处理请求，这个没响应。那也不行，因为两次交互啊，前后台交互嘛。这个能理解吧，好，而前台路由虽然我们学，但是大概这一说大家就懂了，OK，用浏览器端路由，就是最终是在浏览器上实现value是什么？组件这里面就强调Y扭说明pass，那个K都是pass。

对吧，K都是pass，当我点击或者我请求某一个路由pass的时候。浏览器端发HP请求吗？没有。只是界面更新，为什么对应的组件，比如说老师怎么对应的，这个你不管。具体怎么对应你也不用管了，懂吗？现在咱还没学语法。你只要知道有对应就行，至于怎么对应，那是具体的语法该做的事情。好，后台路由和前台路由相关的这个过程刚才已经说过了，我不再去说了，诶看一下这个你就懂了，这个有意义，虽然我们写大家看，大家懂这个标签这什么意思。就是我在指定一个什么。第一个路由啊。是吧，就看名字就知道第一个路由指定什么，先看我们一个路由是包含两个方面啊，前台路由路径和什么主接。

看到吧，之所以啊，这个就在说明啊，你理解一个东西啊，比你学这个语法更关键，因为理解了看东西很容易看懂。那也就是说我在浏览器里面，我在浏览器输入的时候，要指定的是它。最终显示的就应该是about组件。至于它是什么内容，那看你写什么。对吧，嗯。好。后面的大家可以先聚着，先不管啊，后面给再看看。好，下面这个呢，实际上啊，是在去让大家去看啊，看一个呃，Route它最终底层是怎么实现的，这个底层是怎么实现的吧，我还只得先让它运行运行，把那个写好的效果先运行一下，大家能懂啊。来。

呃，这里面有一个专门的下划root不能写杠啊，为什么不能写杠，因为这个既然是一个库的名字啊，下划线就不一样，好，我这里面专门有一个测试页面。我专门有个测试页面啊，去测试一下，看一下东西，大家看一下就懂了。来呃，我现在呢，稍微把它打开一下啊，把它打开一下。来拍一下，这里面呢有很多东西啊，不过呢，我先啊把这个先注意一下。注一下这。啊，因为一共有两种方式。这是在干嘛呢？这是让大家能看到啊，路由是怎么回事啊，大概给大家演示一下是一个什么样的概念，大家看着我啊。我要点击它。诶，这是一个，这是一个，诶这还不能这么做啊，嗯，他那里面。

我看一下啊，这里面是一个链接，这个链接呢，现在现在还还没有啊，说一下吧。看一下它里面的东西。啊，这一个第一个A标签呢，是我就直接写了啊，写了这一个，写了一个写了一个他。写个它里面呢，有一个看能放大吗？哎，能放大枪啊。这是一般的A标签，A标签的有一个斜杠test，这个斜杠test说明我现在什么，现在是不是没有啊啊没有，所以他找不到当前的那个资源啊，找不到当前的资源，好接着我这里面有一个on。啊，安克，安克这里面在干嘛呢？啊，诶，这里面应该是有点小问题啊，这样吧，我在这里面给它打开啊，还是不能这么做，我在这里面打开好一点。嗯，我就把它打开一下，说一说啊。

就这个。嗯，把这个页面先打开一下。看一点东西啊。把这个前面的这这是那个插件生成的一些乱七八糟东西给它去掉。好，再来看一下啊，点一下它。啊，OK，这样它它报的错误好一点，看起来舒服一点啊这个里面啊，这个里面大家看一下，我们现在点了一下它啊，点了它以后我做了个什么事呢？我这里面有一个有一个return啊，有一个有一个return的一个效果啊，这个return呢，也就是说我最终是不是点击的时候会调用这个函数。看懂吧，调这个函数，我这个函数在干什么呢？看着啊，诶我这个边看什么是什么意思。就是不让他跳能懂吧啊说白了其实说白了我这个链接还会发发一般的一请求吗。会不会我就让他这个行为失效了，我刚刚默认行为失效了，对不对，是不会的，而我做了一件事情啊，这里面有一个东西叫什么呢？叫history，大家知道啊，浏览器里面在window，在boom里面有一个有一个东西叫history对象。

还记得吧？它用来管理什么？管理我的历史记录，历史的浏览记录，说白了就管理这个东西这玩意。这个就要利用浏览器的历史记录，也就是说你点，譬如说你从一个页面啊开始，点击有一个页面A页面，接着点一个链接跳出了B页面，接着点B了，又跳C页面，这个所有的过程都被什么。是不是都被黑水记录下来了，那也就我点回退了。回退到，但我这里回退回到B，我再给回退到回到A。能懂吧，但是我现在有跳转页面吗。没有啊，记住了，我没有跳转页面。

但是我要通过一定的方式让浏览器能记住我点击了不同链接，做了不同的操作。大家看着点一下。什么意思？是回到上一个状态啊，看那地址有变化，看它点它。有没有我的地址栏的pass是不是变了？而且我这个浏览器历史记录是不是记住了啊，其实我们现在是用的库，不是用的原生的DOM语法，为什么不用原声呢？因为原声的用起来比较费劲一点。没这个好用。嗯，好看。这个在说一个什么事呢，你说这个东西有啥用啊是吧。而且应该会有，要看看有没有打印输出，大家看着。大家看啊，我再点一下走里。说什么？这在说一个什么事啊，他说。

就是我点一下他知不知道他是不是监视到了呀，这个非常非常有用，就这一下就非常有用，为什么说这一下就非常用了，你想想回想一下啊，回想一下我刚才说的那个那个业务场景。啊，我有我有三个三个选项嘛，ABC。是不，我最终这是主界面，我点A的时候是不是要显示A，我点B的时候显示B，我点C的时候显C，他怎么知道你点的。对不对，你点ABC，只是这个地址栏发生了变化，并本身不会发请求对吧，本身不会发请求，你又不发请求，我怎么知道你变了呢，对不对，就这一项非常关键。你看我刚才点了一下test，他知道吗。他知道，那也就是说我到时候点a.b.c那个是不是应该要知道啊。能懂不啊，知道这个很关键，因为他只有知道你变化了，他就可以读到你当前请求那个路径吧。

而每一个路径是不是会对应一个什么？主键。它是不是就可以将组件显示出来。这就个对应关系。啊。OK，这个呢，现在我是通过这种方式去做的，我也可以啊，大家看这我刚才是个链接，我这里面不是链接是按钮。其实链接最终也是调用一个方法来做的吗？是不是，而我点P的这一个。是不是直接调用push指定的什么。TEST2，那也是我请求另外一个路径吧，啊请求另外一个路径调用的都是它push，你看呢，Push什么意思。里面内部肯定有一个容器。Push是往里面压的意思。懂吗？什么意思？我加上先不写的T1。

接着我们破晓开始吗？对吧，你说什么一个结构啊。先是一接着了啊，这有用吗？这顺序有没有用，非常有用啊，非常非常有用，你看啊，接着我先来个先回去一下。现在我们推谁是吧，先推一下一知道了吧，你看他知道我是请求了太一看到了吧，好，接着快着推出了太二有变化吗。也知道吧，好，你说我现在是个什么场景，回退倒一倒一。这个也非常关键。真的吧，我再回去了。是不是到这个是不是index页面。吧，好。那现在大家想啊，我是不是点击它回退啊，我点他能不能回退了。

是不是？也就是说我的这个history对象啊，别管这history对象怎么产生的，这个history对象它是不是有应该有语法能够回退啊，他为什么要有语法能回，他为什么能够有啊。你想啊，那个整个东西都谁管理着呀，黑水刚才那个容器结构是不是就他管理着。他能不知道回退吗？我先塞进一，接着塞进二是吧，啊，接着你告诉他，你说要回退。干嘛，Go back。来试一下看行不行，也就是说我点这个按钮，实际上是不是下面点在左边回到一了吧。看到过，诶前进什么意思。那你说到哪去了啊？是不是说白了整个是不是都他记录的，当然他有能力去做，说白了就是我们可以通过GS来去模拟点击这个向左向右的按钮。

是不是这意思啊，这种操作我们在路由的项目里面肯定要用到的。啊，OK。好，这个里面代码呢，也非常简单，没有几行代码啊，都非常简单，好最后我要再说一个，最后说一个东西就这个。再一次呢，我们不是push。Replace。来看一下特别有意思，你先看一下效果啊，看一下效果，我先下replace的时候是这个按钮replace太成什么三你来看一下是个什么效果啊，我先我再回过去看，回过去搞一下。啊，回回推到最前面啊，看着我，我来给大家演变一遍。三进一了吧，接着塞啊，接着看啊，我是在二的基础上是三。Replace，你应该知道什么意思，替换好，请问我点回退。

是一还是二？要是二就没意思了，那二不就相当于不写了吗？啊，其实非常简单，这不很简单一件事吗。先是一。塞了一个二吧，三了个一，三了二吧，接着我筛三不是三是什么替换，替换成三什么意思？把占顶的，其实上它是相当于一个占的结构，对不对？把二换成什么三，你说你再点回退，能回退到二吗？二的不在了。能不懂啊，OK，其实就两种啊，一种是一种是什么替换。啊，这两种场景都有可能有啊，我们从一个路由跳转到另外一个路由，有的可能有时候可能希望能回去，有的时候希望不能回去。

如果你希望能回去，那你就应该用什么push。对不对？那如果你不希望再能回去，那你应该用什么replace？那么懂，而这些语法只要大家懂了，后面我们再去讲它的一些用法，就非常简单了。因为他用的它包装的就是它啊，它内部包装的就是这个。啊，那个包养的就是这些语法。不过呢，这个地方啊，我们其实啊，它其实现在用的什么呢？用的是那个，呃，那个H5里面的那个history新的语法。二。就是当前这个语法，还有一个，还有一个用的是以前的一个语法，我来用一下这个history包装两种实现，一个叫啊b history，一个叫history。这哈黑就不一样了，大家看着啊，刚才那个路径里面有没有什么型号吗？没有，都是看着就像正常路径对不对，看着就像正常路径，好，下面我们来回过头来看一下，哎，先刷一吧，你看。

这个井号我不知道大家有没有见过，有没有用过井号这个东西最先用是在什么，在什么地方用，我不知道，大家知道锚点对吧，就说白了，定指定某一个位置为点，就能跳到某一个位置，它本身发请求吗？发不发不发，但是锚点它有一个，它也有，它有一个副，它有一个副作用，就是能够去让历史记录记住。就虽然说我没有发请求，对吧，我是从一个位置是不是定位到页面的另外一个位置啊。认道吧，啊，历史记录history是会记住你的这个啊锚点的变化的，其实这锚点更更专业的词汇叫哈希值。啊，等会看一下，你再看我点一下，大家懂我点一下。总你就这个就是它的哈希值。

能不能啊，OK，这个大家看我这一点啊，是不是有变化，我这个回退是不是也一样，之所以能回退，其实非常简单，就是历史记录已经什么给他记住了。啊，给大家记住啊，当然我们不能总是指望用那个用户去点击浏览器的左侧左上角这个东西，对吧，我们应该页面里面是不是也可以通过按钮来控制啊。这种意思不就是我们用户操作我的界面就能回退就能前进啊这样一跳，比如说我们现在前进是不是到二呀，回退了到一能看到不先进到二好接着。我点它三，那我还能回头到二吗？不能，因为我是什么替换，所以我回退回头到几啊一。好，这一个啊，其实是我们去学习那个啊的一个基础。

大家可能现在对这种啊变化，它的作用性不是那么明确，等我们把那个使用讲完了，大家就非常明白，说实话这个其实挺重要的。