33_尚硅谷_向路由组件传递数据.avi原创

下面还有一个啊，就是有一个问题，向路由组件传递参数数据。就是说白了就是什么意思呢？我们要先组件传递数据，以前我们怎么做。Pro。对不对，但现在有个问题啊，有一个什么问题呢？有个非常大的问题，大家看一下来，我来打开，打开一下我们一般的组件是不是都会写成标签呢，它呢，它写成标签了吗。他没有，因为你看我的路由组件使用上就靠它嘛。是不是我也写成标签吗？没有，就有一个问题啊。我怎么样通过属性传数据啊。这传不了啊。能看出来吧，就我现在没办法通过标签属性向路由组件传数据了。原因很简单，就是我没有写成标签，它不是用标签的形式来使用的。

对不对，那他肯定有别的方式向他传数据吧，啊什么方式呢，来看一下。这个地方啊，我们啊，下面我们来通过一个效果来看我们该怎么做啊，看到我们要做的效果啊。我们这个链接啊，我们每一个链接啊，点进去的时候，像我再再写一层路由。啊，相当于三级路由了，对吧，第三级路由啊，这个路由叫接收数据。为什么说要接收数据？接收什么数据大家知道吧？接收一个ID值。能懂不？我点不同的链接，大家看到上面。看着这上面例子。有没有变化，有。哎，这样一个数据。这个数据就应该要传到传给程序，传给下面这个组件。呃，下面组件是不是根据ID查到我当前消息的所有内容？

来展现呢？我现在就要做这样一件事情啊。根据ID来查询显示消息的详情。啊，先我们做一些我们能做的，还是第一步，我们干嘛去。写路由组件。对吧，因为是路由组件嘛，所以建在这里。来，我们是要显示消息的详情，名字叫什么？Message。消息的什么详情，看到不看到好。来啊，这一次啊，这一次啊，我们来我们来这么做一下，我这一次呢，用一下那个用一下那个函数的组件，用一下函数，好久没用了，一直在在用内组件。

函数组件exportport方对吧，接着写一个大写的message，来一个什么return return一个结构是吧。认了不啊，这是函数组件啊来，我们要return的是这样一个结构，看的应该是uri吧，啊来吧，那就来个小括号，来一个ul。里面有固定的几个三个ii，这是固定的啊，固定的来ii。好，但是这里面有些数据是动态的吧，嗯。但是我先写着啊，我先写着。有这三个数据应该是变化的。对吧，也就是说我当前这个组件啊，是要根据我得到的ID来去查。

对吧，那我应该有所有消息的一个数组吧，啊，我模拟一下啊，按理来说应该从后台获取的。懂不懂，按数的说应该是后道有矩，我这里面就不管那么复杂，我来去定义一个叫我messages。能不能看懂等一个什么呢？数组每一个都是message对象啊，它有哪些东西呢？来啊，我们刚才是不是整过message的这个里面有一个这个把这个拿过来。在这个基础上在添加一些信息就行。听得懂不？我应该还有一个东西叫什么，那content听懂不好，那这些内容是什么呀？是我爱你啊，你现在不要忘记了，我爱你中国。嗯，对吧。

好，下面一个啊，再一个不要了啊，就是你的对象。啊OK啊OK，再一个呢，就是啊，你的孩子。这是你生命的全部啊，好啊，自己有别人爱就行了啊，父母是吧？好啊，父母加个嗯，好啊，ID要变是吧，不能相同，这样的话不太好。啊，但是呢，如果如果这样的话啊，如果这样的话，你前面也应该有。不然的话，这个东西就查不出来了。这个能懂吧，就在前面这个。认了吧，他也应该有，这是对应的嘛，不然的话有的都显示不出来了。

啊，买机变了吗？不是。啊，这个什么啊，对哦，ID是六是吧，ID是六这是对的呀，哦，这个啊是这个这个没无所谓，这个只要对应就行，你要改就都改，因为要对应的行是吧是吧，啊好来啊。其实现在最大的问题就是我要找到那个ID是吧，我没有I，所以这些现在都应该是问号。我不知道。后面再说怎么样继续啊，因为现在还没做嘛。能看到吧，好，那我们的主见呢，只能先写到这里啊，先写到这里，再说下一步干嘛？啊，下一步就是要写那两个标签了，对不对，写那两个标签，路由标签和那个，呃，路由链接标签在哪个组件里面写。

副组件吗？这不是在当前这个组件吗？Message嘛，对吧，好来吧message。啊，Message也就在这呗。是不是概念啊，在这里的话，大家想一个问题啊，就是这个这个里面啊，这一个写什么呀。看一下我们刚才最终做好的就知道，其实就写一个这个。是不是？把它复制过来。这个吧，但是现在有个事情，这一个对吗？不能写，应该是从M里面去取，对吧，这咋取。II。首先我们这里面要确定我们要写GS代码对不对，所以必须先用上什么打括号写GS代码，我们是不是要写一个串出来呀，声音怎么写对吗？

对不对，你这个不是动态的呀，怎么办。当然，你可以这么做。拼串。对吧，当然你也可以用E6的写法。啊，ES6的写法就是V4什么，先写一个这个啊，先写个这个出来，对吧，这是斜杠home下面的，斜杠message下面的。大家看着啊。下面呢，这个这个东西，它里面有一个，待会我点它的时候。这个都设计的不算是特别好啊，应该应该应该是怎么的呢？因为现在我显示的是消息的详情，所以最好啊，其实这个这个写的有点不算特别好啊，看到我写应该最好是这样啊，有一个message detail。

下面再说啊，是几。就是这一看你就能看出来啊，这一层是用来显示消息列表的，能不懂？呃，这个再说明我要显示什么消息的详情，只是详情我要带过去什么。一个ID。M点什么ID这样是比较严谨的那个呢，不算特别好啊，虽然说也没问题啊。能不能看懂好。那在下面我是不是要用root标签来去显示他们？对吧，那我就要引入什么，引入root呗，啊不是root啊，Root from。嗯，React。是这个吧。好来可以啊，没问题，我这个下面，诶这个地方有个问题啊，我不能写在ul里面吧，这样不太好吧。

我写个UI的外面吧。但是我现在就需要有一个什么，最好有一个div，是不是给它包一下，不然的话就没跟标签了。就这个，这样会更好一点。那么呢，下面就可以，但是呢，我现在还要说一些吗。我现在不要了，因为为什么呢，我只需要写一个，我没有多个可选的。对不对。啊，而这里面指定两个东西pass是多少。Pass是多少呢？啊就下面复制过来，但是有个问题啊，有一个非常大的问题，那我这个不能写这个吧，不行，那我这里写什么呢？我这里不写行吗？不行，你这个地方得写一个写个一行吗。那不行，你写个一只能匹配一，你23456怎么办呢？

对不对，你得写一个能匹配任意数值，任意字符的一个占位符，不是这个地方，它不是用的那个那个正则啊，他这么写的。冒号，随便写个叉叉叉。来代表。你这里面必须传一个东西，至于传什么，不管。能不懂它为什么不用新呢？用什么呢？因为这个是个名称，这个有用的，这个等会有用啊，用来干嘛呢，而且不会用叉叉，我这个是什么意义啊，是不是ID啊，我就一般会写什么冒号ID。这个什么时候用呢？等会啊。等会我们就能用到它，它既是占位符，也是一个标识名称。好，我什么时候用啊，等会来看啊，大家看到这样的话，我是不是请求路径里面就会有这个值吧，就会跟他匹配，最终呢，它就会显示出来，但是现在我还有是不是几个事情没没确定呢。

好，我先看一下我们现在的效果再说啊，先看一下我们现有的效果，来点一下。我还没写什么，我还没写完，对，还有一个东西，还有一个什么那个另外一个component还没整，那肯定显示不出来呀，对吧，Component等于。来先得将它什么引入import message detail from，点斜杠。My detail。对吧，写它你没写完，那肯定是出不来的，有没有子的嘛，OK吧。啊，整个啊，我们刚才要说的这四个是不是都写好了啊，这三个应该说啊来看一下啊，我们当前的有什么问题刷一下先。在说啥呀？说detail里面react必须再放过来，我这里面是不是没有引路react，大家看一下。

我的那个detail里面，他说我没有引入，他必须需要我有吗？没有。这里面就看得出来了，其实我们基本上没用。但他就不息怒。不行不行，他说了，那你还等什么呢？在的吧。嗯，好，没报错了吧，明白错了，下面啊，下面我是不是点它了。吴迪。上面有变化，看上面，先看上面有变有变化吧，有啊，这不有变化吗。有变化，但是呢，有一个问题啊，我这个里面没显示出来呀，对不对啊，主要我还没写，关键现在我不知道去哪找。对不对，它数据是在这个上面的，对不对，但现在呢，我就要利用一下工具，我也不用看什么文档，我来看一下工具在这里还还有错，我必须有一个K。

就是我们的这个message的时候，遍历的时候，估计没指定K吧。这个合同写的什么index，来，我们来看一下啊。来我们来看一下这个最里面的这个组件怎么看呢。公军干嘛去的？JY围是个browse root路由器组件，看到了吧，打开。啊，它里面会有一个包含的一个root，这都不是我们做的，它内部包含的有我们的什么APP。打开好AP里面有些东西，接着我们有一个定义了一个Switch Switch里面啊，当前选中的是不是home路由啊，看看home嘛。层次还是很深啊，显示的是home组件吧？好后直接打开。

Home组件里面又有一个什么Switch打开啊，一打开我给大家看一下结构，好，接着啊，匹配了一个路由啊，接着有message，我们不是看message。我们现在是不是要在里面去取数据，哎哟的个神呐。受不了了，不搞了吧。来看一下，继续往下看。诶，来了，终于来了。是不是有它呀，啊，它的话我们来看一下这个啊message detail啊就看它，那现在我们主要是诶在下面看一下也行。啊，这宽度不够，来看一下这里面是不是有这么三个pro啊，这三个pro我是不是都能取。我就看一下哪个里面有那个有这个值。是不是这意思，来我就直接看啊。打开它，打开它。

这是不是在啊，大家看到橙子啊，先是pro里面有个match对吧，匹配接着有一个什么。死的对象里面有个ID，为什么是ID不是叉叉叉呢？这个名字为什么叫ID呢？对啊，为什么不叫叉叉叉。就是因为我这里面我刚刚说过了，这既是占位符，也是一个标识名称。这个能不能懂啊，虽然说可以随便写，但尽量能建名字啊，我就是ID值嘛。不懂，当然你也可以去操作的，这history它里面看到有什么。这是我们一些方法吧。看到不啊，但是我们现在需要的，大家看了match下面的para下面的什么ID，那也就是说啊，大家看啊。

我们在这个地方啊，在这里面啊，我们干嘛去啊。可以先啊，我得到ID怎么读。This match。里面还要点ID吗？不用了，因为里面就有ID取出来了，结构负值啊。对吧，好下面。有了这个ID以后，你说我该干嘛呀？通过ID我是不是写错位置了？我应该写的那个。我现在想的Mac应该在这里面吧。是吧？赶快找吧，你在这嘛是吧，好，那我这个ID有了，ID在里面找，怎么怎么找。那找到一个找到一个message对象了啊，这是得到我那个请求参数中的ID，得到请求参数中的ID下面呢。

是不是得到对应的message啊，查询啊，得到对应的什么message，我就简单的直接在这里做啊，怎么。这一个用message是数组的什么方法去查。知道吗？我要从中找到一个，是不是某一个人的ID跟我一样的呀，这估计大家没用过啊，叫。当然你可以用过去法去查可不可以，可以啊，这个找到返回的就是一个什么呢？Message对象。因为你是message啊，OK，那最终啊，我里面先不写啊，你说这里面该怎么整message.id这一个了message.title是吧，下面这一个了message的content。

是吧？看不懂，看懂好了。哎，这个写法有点不对，因为我们现在是用的什么形式，函数的形式，不是用的主组件类的形式，看到了吗？就不是认是意思了，那我怎么写的还记得不？这里面接收。能看到吧，啊好，那下面这个find怎么写啊，我先写了，看看大家懂不懂啊，写一个回调函数啊，这个里面的每一个呢都是M。好，看到我啊，其实很好写，M的ID等于ID。这个翻译的方法什么时候会返回？

啊，OK。什么叫返回，返是返回，第一个返回啊，第一个结果，为什么呢的。那个啊元素。数字元素。什么意思？就说白了，每一个M所对应的这个结果，如果是处，那这个M就是这个翻译的结果。听懂不啊，我就找嘛，找到维修为止，那也就是说假设如果我咔的一下就这么写。第一个，那肯定第一个嘛，为什么？因为他从第一个开始变利嘛。好，那我咔了一下，我写个boss。那最后找到结果没有，那就那那就安fine那的话就没有东西嘛，没一个匹配的。

能不能看懂啊，但是我们肯定不能这么写，我们肯定这么写。看懂吗？啊，OK，这个估计得要你要自己下去再看一看啊，看看清楚我说的这句话返回的是什么。第一个结果为什么处的那个数值元素。最后我的message记录就可以什么显示了呗，对不好了。他说啥了？说这个can't read prop I of，什么de DeFine，那也就是说谁是de？Message对吧，那我这样啊，我的先得去把这个。把这个pro给打印一下，看一下我们这里面的pro到底是个什么结构。啊，ID都不放在上面吧。

先打印看一下。呃，我这里面都报错了是吧，那报错了，我这个地方先这样，你现在不能报错，报错你才能才能看到一个现象呢。哎，这哪个是我打印我看不出来呀，是怎么看。主要是我这个地方来一个。可以吧，这样就能看得出来是哪个是我的啊，点一下这个是我的吧，来走啊，先是麦起。Mash里面有。就是一个ID吧。好，呃，我来看一下，我是这么写的吧，看一下。麦姐。是吧，接着是。没问题是吧。啊来，呃，这个地方啊，这样更更直接的方式应该这么做啊，傻了。

这么重？OK啊，这个地方我们来看一下啊，看一下就知道了，看一下稍微看一下。啊，其实就是类型不匹配导致的啊，我们这个地方啊，我们这边这个debug很重要啊，就这个操作啊非常严重。啊，因为老写打印输出啊，特别费劲，你知道吧，你打印输出有时候就看了一丁点，你这个bug可以看很多东西啊，即使他这个人说老师这个我看起来不太爽啊，我这个idd现在是什么。是自创。能不懂，而我这个里面呢，数字一。是怎么办？To stick。乘一吗？能看到吧，啊，这样就可以了。好把这个把这个再一住啊，这种方调试方式非常有用。

啊，非常非常有用。应该没了吧，好点下它。我们把这个已经给他什么，是不是做掉了回来。这是一的吧。什么是不是三的能看懂不啊，要能看懂啊，OK，但是这个地方有一个问题啊，有一些小问题，就是我们每一次那个数据都是什么这个message的数据。你现在之所以之所以出现这种情况，大家看。什么原因，是因为我的数据义务请求的吧，对吧，因为每次都会发请求对吧？啊，这个我们先不管他，现在数据能动态展现吧。可以吧，可以，所以这个就这样。

主要啊，这个地方我怎么看出来有这个东西啊，其实你要想去看文档，那你从何找起那么多。我怎么知道有这些东西的？看什么看工具我都不用记。那当然你也不需要记，你要根据这个文档能够去读数据。能不懂啊，OK。好，那整个呢，我们这一个啊，像路由组件传递数据，其实方式是什么呀。如何向路由组件传递数据啊，是不是链接啊，你可以通过路由链接来传递数据，但这个时候就有一个非常重要的东西，就什么。这个冒号，冒号的使用，占位符的使用。你只有这张占位符了，到时候我才从参它，它就不是一个简单路径了，它是个参数，它都是值，就这个是路径，这一部分是路径。

能懂不？这个是路径吗？这个不是路径。能懂不？这是路径里面，这是里面包含了一个什么参数，你没看到他取了一个概念叫什么。是吧？参数翻译过来不就是参数的意思吗？能不能看到啊，就是参数这样一个作用啊。Okay。好，那后面呢，还剩下的东西下，我们再继续往下说，没有多少了啊，就一点点啊，后面呢，我们还有一个UIOK，好行。