1 00:00:00,730 --> 00:00:05,280 In this video I want to continue covering re-act router and focusing a little bit more on this snippet 2 00:00:05,670 --> 00:00:06,330 in particular. 3 00:00:06,360 --> 00:00:10,410 I want to take a look at some of the different properties that we passed off to both these components 4 00:00:11,040 --> 00:00:13,840 both route components got a path property. 5 00:00:14,040 --> 00:00:18,720 This property right here is what is used by re-act router to decide whether or not to show this given 6 00:00:18,900 --> 00:00:20,100 component on the screen. 7 00:00:21,080 --> 00:00:23,560 On the first route we then have the key word exact. 8 00:00:23,600 --> 00:00:29,690 We'll talk about what exact does in just a moment the last prop on here of component does exactly what 9 00:00:29,690 --> 00:00:32,240 you would think it does when we pass in the component. 10 00:00:32,240 --> 00:00:37,070 If this route right here is matched by the given that you are that the user is visiting we're going 11 00:00:37,070 --> 00:00:39,560 to show either page one or page two. 12 00:00:39,680 --> 00:00:44,900 Now something I want you to be aware of is that in a re-act router application different routes can 13 00:00:44,900 --> 00:00:46,390 be matched by the same. 14 00:00:46,530 --> 00:00:48,740 Well let me show you what I mean by that. 15 00:00:48,830 --> 00:00:53,280 I'm going to take the first route right here and I'm going to duplicate it right above itself. 16 00:00:53,420 --> 00:00:58,820 So I now have two identical routes inside of my application Alden's saved this file and then flip on 17 00:00:58,820 --> 00:01:04,530 over to the browser and then go to my you are bar and I'll make sure that I navigate back to local losed 18 00:01:04,590 --> 00:01:05,790 3000. 19 00:01:05,820 --> 00:01:09,400 Then when I get there I see Page 1 appear on the screen twice. 20 00:01:09,720 --> 00:01:15,090 So inside of a re-act rodder application we can very easily have multiple route components that match 21 00:01:15,150 --> 00:01:18,810 a given you are all in all showed themselves to the user. 22 00:01:18,810 --> 00:01:24,470 Now this is absolutely by design because there are some cases where we will define different route components 23 00:01:24,510 --> 00:01:28,430 deeply nested inside of different components inside of application. 24 00:01:28,470 --> 00:01:34,050 And so by deeply nesting routes we can customize how some part of our app looks depending upon the or 25 00:01:34,060 --> 00:01:39,420 L and we don't have to pass down some deep configuration through redux or props or something like that 26 00:01:39,630 --> 00:01:44,270 to configure how a very deeply nested child component renders itself. 27 00:01:44,310 --> 00:01:47,040 OK I'm going to delete that duplicated route. 28 00:01:47,040 --> 00:01:50,020 Now I want to tell you a little bit more about what that exact word means. 29 00:01:50,160 --> 00:01:56,760 So like I said just a second ago a single route or C a single L or a single path can be matched by different 30 00:01:56,760 --> 00:02:00,910 routes inside of application notes tried taking off that exact key word right there. 31 00:02:00,940 --> 00:02:05,560 You're going to see some really interesting behavior All right I'm going to save this file and then 32 00:02:05,560 --> 00:02:07,380 I'll flip back over to my application. 33 00:02:07,630 --> 00:02:09,360 Now I'm still at local shows three. 34 00:02:09,370 --> 00:02:12,920 And I see the text page one up here on the screen. 35 00:02:12,970 --> 00:02:17,540 Now I'm going to navigate to page two and you're going to start to see something kind of interesting. 36 00:02:17,740 --> 00:02:24,080 So when I go over to page 2 I see both the route for page one and Page two rendered on the screen. 37 00:02:24,130 --> 00:02:25,990 So this might be a little bit surprising. 38 00:02:26,080 --> 00:02:27,970 And I know it definitely is surprising to me. 39 00:02:27,960 --> 00:02:34,870 I very frequently run into this and just knock my head against the wall with re-act rudder because of 40 00:02:34,870 --> 00:02:36,770 this little issue right here. 41 00:02:36,820 --> 00:02:42,490 So you might have thought that because we went to slash page two we would only show the second route 42 00:02:42,550 --> 00:02:45,750 on the screen but that is not the case with re-act router. 43 00:02:46,150 --> 00:02:51,370 You see this path property right here has some very interesting behavior that is kind of hard to understand 44 00:02:51,400 --> 00:02:52,590 at first glance. 45 00:02:52,630 --> 00:02:57,670 So to help you understand why we saw both routes appear on the screen when we went to splash page 2 46 00:02:57,880 --> 00:03:02,500 I want to show you a couple of diagrams to help you understand exactly what the path property does for 47 00:03:02,500 --> 00:03:05,990 us. 48 00:03:06,000 --> 00:03:10,630 So in this diagram right here I have some address that we put into our address bar. 49 00:03:10,650 --> 00:03:16,770 Now as we've discussed re-act router only cares about what is listed after the dot com or the dot net 50 00:03:16,770 --> 00:03:21,830 or the edu or the or definition whatever is inside of your you are l. 51 00:03:21,840 --> 00:03:26,310 So in this case re-act router would just care about the path of forward slash. 52 00:03:26,340 --> 00:03:31,320 So now using this path right here I want to figure out what different route definitions would be shown 53 00:03:31,320 --> 00:03:32,930 inside of application. 54 00:03:33,240 --> 00:03:38,920 In this case we would only be showing the first route definition the one with a path of just forward 55 00:03:38,930 --> 00:03:39,690 slash. 56 00:03:39,890 --> 00:03:45,290 We would not show path of slash page or path of slash page slash 5. 57 00:03:45,710 --> 00:03:49,740 The rule that we use for deciding what components or what routes are going to be shown on the screen 58 00:03:49,950 --> 00:03:52,690 is this little snippet of code right here. 59 00:03:52,710 --> 00:03:57,930 So this is not the exact code that re-act router internally runs but it kind of works like 90 percent 60 00:03:57,930 --> 00:04:00,130 of the time for figuring out what is going on. 61 00:04:00,450 --> 00:04:05,910 So essentially we take the string of the extracted path from the L and we can imagine that we'd run 62 00:04:05,910 --> 00:04:11,100 the contains method with the path inside of each of our different route components that just you know 63 00:04:11,100 --> 00:04:17,120 that contains method is going to essentially check if this string exists inside of this string. 64 00:04:17,130 --> 00:04:22,740 So in this case we would ask ourselves OK does this string contain the path forward slash or contain 65 00:04:22,740 --> 00:04:24,050 the string for its slash. 66 00:04:24,060 --> 00:04:25,160 In this case it does. 67 00:04:25,290 --> 00:04:30,430 So this route would be visible on the screen and we would see it appear when we loaded our application 68 00:04:32,030 --> 00:04:37,820 then we would move onto the next route and we would say OK does this path right or this string contain 69 00:04:37,820 --> 00:04:39,470 the string slash page. 70 00:04:39,470 --> 00:04:40,570 In this case no. 71 00:04:40,790 --> 00:04:42,710 So we would not show this route. 72 00:04:42,710 --> 00:04:45,620 And then the same thing with this third route down here as well. 73 00:04:45,620 --> 00:04:48,180 Now let's continue on to another quick example here. 74 00:04:48,200 --> 00:04:52,080 Now on this one I kind of abbreviated it just a little bit to make this go a little bit faster. 75 00:04:52,280 --> 00:04:55,700 So let's imagine that we go to localhost 3000 slash page. 76 00:04:55,760 --> 00:04:59,480 So now our extracted path is slash page. 77 00:04:59,480 --> 00:05:04,400 So now we would say does this string right here contain this path. 78 00:05:04,400 --> 00:05:09,420 Well in this case it does because we have four slash here and we have the forward slash right there. 79 00:05:09,650 --> 00:05:15,310 So this string contains that string and so we would show that route component on the screen. 80 00:05:15,530 --> 00:05:19,760 We would then move onto the next route and we would say does this string contain that string. 81 00:05:19,790 --> 00:05:25,230 In this case it does slash page matches perfectly with Slash page and then we would move on to our last 82 00:05:25,230 --> 00:05:25,630 route. 83 00:05:25,640 --> 00:05:29,150 So sashed page does that contain the string slash page slash 5. 84 00:05:29,150 --> 00:05:30,500 In this case no it does not. 85 00:05:30,500 --> 00:05:32,190 So we would not show that route. 86 00:05:32,210 --> 00:05:36,950 And then finally if we want to look closer at thousand slash page slash five I bet you can imagine up 87 00:05:37,190 --> 00:05:38,250 this route right here. 88 00:05:38,270 --> 00:05:40,090 This string contains that string. 89 00:05:40,100 --> 00:05:42,940 It contains that string and it contains that string. 90 00:05:42,950 --> 00:05:47,800 So this right here is the rule that re-act writer uses to decide whether or not to show a given route 91 00:05:47,840 --> 00:05:52,790 on the screen and it explains why we see both of these routes appear. 92 00:05:53,090 --> 00:05:57,840 So we navigated to a route of slash page two. 93 00:05:57,980 --> 00:06:03,830 So we would say does slash ph to contain the character forward slash. 94 00:06:03,890 --> 00:06:04,720 Yes it does. 95 00:06:04,730 --> 00:06:06,720 So this route is rendered on the screen. 96 00:06:07,040 --> 00:06:11,510 We would then move on to the next route and we would say does slash page to contain the string slash 97 00:06:11,510 --> 00:06:12,210 page too. 98 00:06:12,350 --> 00:06:12,960 Yes it does. 99 00:06:12,980 --> 00:06:13,300 OK. 100 00:06:13,310 --> 00:06:15,750 And this route is displayed on the screen as well. 101 00:06:16,010 --> 00:06:18,710 So that is the rule that re-act router uses. 102 00:06:18,710 --> 00:06:23,990 Now you might be thinking to yourself that sounds like a crazy town rule like why does it do that. 103 00:06:24,010 --> 00:06:29,960 Well you're going to see that inside of re-act router there are sometimes some rules that are sometimes 104 00:06:29,960 --> 00:06:33,050 a little bit confusing or not quite what you would expect. 105 00:06:33,080 --> 00:06:38,470 I will say that the authors of Riak router do everything that they do for a very good reason. 106 00:06:38,480 --> 00:06:43,210 So there are some good reasons that you would want to have some routes that kind of eagerly maps themselves 107 00:06:43,220 --> 00:06:46,970 in this fashion but I just want you to know that sometimes this behavior is going to be a little bit 108 00:06:47,000 --> 00:06:48,230 unexpected. 109 00:06:48,260 --> 00:06:53,690 Now in order to override this behavior we can find all of our given routes and we can optionally add 110 00:06:53,690 --> 00:07:01,850 on a prop of exact Lysa to see note when we type out a key word inside of a GSX tag like so it is equivalent 111 00:07:01,850 --> 00:07:04,270 to saying equals true. 112 00:07:04,610 --> 00:07:10,850 So anytime you list out just a property name the component that you added to interpret that as having 113 00:07:10,850 --> 00:07:12,380 a prop equal to true. 114 00:07:12,380 --> 00:07:18,200 So inside of the component it would think that this Propst not exact would equal the value true. 115 00:07:18,380 --> 00:07:21,300 So that's what happens when you just put the key word like that by itself. 116 00:07:21,530 --> 00:07:28,060 When you add on a prop name of exact it causes re-act rider to change the rule that it uses for matching 117 00:07:28,050 --> 00:07:28,910 the power slightly. 118 00:07:28,910 --> 00:07:35,330 And as you would expect it essentially changes it to does extracted path equal the string path which 119 00:07:35,330 --> 00:07:41,470 is way closer to how a lot of people probably imagine this system would or should work. 120 00:07:41,480 --> 00:07:48,860 So now with the key word on there we would say does the route of slash page to exactly equal the string 121 00:07:49,130 --> 00:07:49,880 slash. 122 00:07:50,030 --> 00:07:50,750 Well no it doesn't. 123 00:07:50,750 --> 00:07:57,790 So we would now not show that route component on the screen however does flash page to contain slash 124 00:07:57,820 --> 00:07:58,320 page 2. 125 00:07:58,340 --> 00:07:59,230 Yes it still does. 126 00:07:59,240 --> 00:08:01,540 So we would show that route component on the screen. 127 00:08:01,880 --> 00:08:06,230 Now last thing I want to understand is that when we add on this exact keyword it only modifies the route 128 00:08:06,230 --> 00:08:07,460 that you add it to. 129 00:08:07,460 --> 00:08:15,350 So if we had a second route right here with a path of slash that does not have the exact word then this 130 00:08:15,350 --> 00:08:20,040 one right here would be shown on the screen when the user goes to slash page 2. 131 00:08:20,040 --> 00:08:24,220 And so if I say save that you see that I see Page 1 appear again. 132 00:08:24,480 --> 00:08:29,050 Look at Saddam we have a better idea of how reac router works internally and how it matches this path 133 00:08:29,060 --> 00:08:31,300 in this kind of confusing fashion. 134 00:08:31,310 --> 00:08:33,520 Well let's continue with our application in the next video.