1 00:00:00,900 --> 00:00:05,190 We're not going to start to implement some navigation into our app now just you know, we're going to 2 00:00:05,190 --> 00:00:09,360 go through a step by step incremental approach to implementing navigation. 3 00:00:09,750 --> 00:00:14,220 So the first thing that we're going to do here is not going to be the exact correct way of navigation. 4 00:00:14,520 --> 00:00:20,220 Instead, I want to kind of naturally lead you into a final, appropriate solution that we would use 5 00:00:20,250 --> 00:00:21,360 inside of a typical app. 6 00:00:21,990 --> 00:00:24,630 Long story short, let's just build this out step by step. 7 00:00:25,470 --> 00:00:25,730 OK? 8 00:00:25,870 --> 00:00:30,090 The first thing we want to do is make sure that we always show some appropriate component, the screen 9 00:00:30,300 --> 00:00:31,360 based upon the u r l.. 10 00:00:31,860 --> 00:00:36,180 So if we are at local Lowe's 3000, we should show the accordion if we are at local shows. 11 00:00:36,240 --> 00:00:37,380 Three thousand flash list. 12 00:00:37,680 --> 00:00:38,820 Show the search component. 13 00:00:38,910 --> 00:00:39,390 And so on. 14 00:00:40,350 --> 00:00:44,130 I took all those different components and kind of represented them inside this table. 15 00:00:44,580 --> 00:00:48,660 So we might call this a root mapping whenever we are at this year, El. 16 00:00:48,780 --> 00:00:50,430 We want show that component. 17 00:00:51,460 --> 00:00:56,340 So the first thing we need to understand is how to determine what your oil we are actually at. 18 00:00:56,950 --> 00:00:57,460 To do so. 19 00:00:57,530 --> 00:00:58,960 I'm gonna go back over to my browser. 20 00:01:00,820 --> 00:01:06,360 I'm going to go up to the address bar and I'm going to manually edit your L to localhost Colin three 21 00:01:06,360 --> 00:01:08,390 thousand slash translates. 22 00:01:10,130 --> 00:01:16,400 Then once here, I'm going to open up my console and I'm going to type out window dot location. 23 00:01:17,590 --> 00:01:21,100 Window dot location is an object that is built into your browser. 24 00:01:21,610 --> 00:01:26,260 This object is going to be automatically navvy or updated anytime you navigate around to a different 25 00:01:26,260 --> 00:01:28,480 you are well inside this object. 26 00:01:28,610 --> 00:01:31,820 You're going to see a lot of information that has been extracted from the current year. 27 00:01:32,590 --> 00:01:39,940 So we can see the current host post name, the entire your URL, the Origin Harth name and port. 28 00:01:40,600 --> 00:01:44,310 In our case, we care about the property inside of here called Path Name. 29 00:01:44,770 --> 00:01:48,010 And notice how path name is spelt with a lowercase N. 30 00:01:49,020 --> 00:01:56,010 Towpath name is everything inside the URL after the domain and the port in this case. 31 00:01:56,070 --> 00:01:58,080 I met Lokos three thousand slash translate. 32 00:01:58,140 --> 00:02:00,450 So the path name is slash translate. 33 00:02:02,020 --> 00:02:05,230 If we go to just local 3000 by itself. 34 00:02:06,220 --> 00:02:08,230 And then print out that same object once again. 35 00:02:08,860 --> 00:02:11,820 You'll notice that now the path name is just for ad flesh. 36 00:02:12,330 --> 00:02:17,320 So whenever we are at the root, root or localize three thousand with no path whatsoever, we still 37 00:02:17,320 --> 00:02:19,600 have a path name of forward slash. 38 00:02:20,680 --> 00:02:25,190 So to really decide when to show each these different components, here's what we really want to do. 39 00:02:25,880 --> 00:02:31,640 We want to show the accordion whenever window location Parth name is equal to forward slash. 40 00:02:32,240 --> 00:02:36,380 We want to show search whenever window location, path name is equal to list and so on. 41 00:02:37,070 --> 00:02:39,710 So these are the real checks that we want to do. 42 00:02:39,770 --> 00:02:43,190 Somewhere inside of application to decide which component to show. 43 00:02:44,210 --> 00:02:49,160 Let's go over to our Apte James file and we're going to implement some logic inside there to essentially 44 00:02:49,220 --> 00:02:52,610 do these different comparisons and then show the appropriate components. 45 00:02:53,800 --> 00:02:54,100 OK. 46 00:02:54,290 --> 00:02:56,510 So back inside of my APT James file. 47 00:02:57,140 --> 00:02:57,860 Here it is right here. 48 00:02:59,550 --> 00:03:04,080 I'm going to define a series of different functions in each of these functions. 49 00:03:04,200 --> 00:03:06,840 Where you going to do one of these different comparisons? 50 00:03:07,470 --> 00:03:11,540 And then if this comparison is true, we will return the appropriate component. 51 00:03:12,360 --> 00:03:17,460 So I will first put together a come a little function called show accordion. 52 00:03:19,600 --> 00:03:26,780 Then inside of here, I'll say if window, location, path, name and remember, name is lowercase. 53 00:03:28,220 --> 00:03:30,440 Equals, equals, equals forward slash. 54 00:03:30,920 --> 00:03:34,640 Then let's return the accordion component. 55 00:03:35,620 --> 00:03:40,240 Remember that whenever we show the accordion component, we have to provide an items crop. 56 00:03:40,750 --> 00:03:45,460 We had defined items as a hardcoded array inside of our apt G.S. file at the very top. 57 00:03:46,160 --> 00:03:49,600 So we'll just make sure that we provide those as an items prop. 58 00:03:53,730 --> 00:03:58,830 Then we can call the show accordion function from inside of this div right here. 59 00:03:58,920 --> 00:03:59,840 So inside of that div. 60 00:03:59,940 --> 00:04:01,680 So this is our actual app component. 61 00:04:02,040 --> 00:04:04,530 I'm going to call show accordion. 62 00:04:07,960 --> 00:04:13,240 So let's then delete the translate component really quickly and test out just what we have so far. 63 00:04:14,220 --> 00:04:15,200 I gonna flip back over. 64 00:04:16,710 --> 00:04:20,950 Now, whenever I'm at localhost 3000 by itself, I see the accordion appear. 65 00:04:21,480 --> 00:04:24,700 But if I go to local oast three thousand slash translate. 66 00:04:25,140 --> 00:04:26,340 I see nothing at all. 67 00:04:27,090 --> 00:04:27,210 OK. 68 00:04:27,300 --> 00:04:28,500 So that's actually a good sign. 69 00:04:28,620 --> 00:04:32,240 It means that we are only showing the accordion when a user goes to a path. 70 00:04:32,340 --> 00:04:33,870 Name of forward slash. 71 00:04:34,680 --> 00:04:37,920 Let's now build out similar functions for our other components as well. 72 00:04:38,610 --> 00:04:42,090 The next one I will call show list. 73 00:04:45,830 --> 00:04:51,860 Inside of here, we'll see if window location hath name is equal to flash list. 74 00:04:52,580 --> 00:04:55,280 And if it is, we will return the search component. 75 00:04:56,450 --> 00:04:58,540 Well, then, do you show dropdown? 76 00:05:01,220 --> 00:05:05,840 And say, if window location Parth name is last drop down. 77 00:05:07,500 --> 00:05:09,420 Let's return the dropdown. 78 00:05:11,160 --> 00:05:14,490 And remember, the drop down component requires a couple of different props. 79 00:05:14,730 --> 00:05:16,170 We're going to leave those off right now. 80 00:05:16,260 --> 00:05:20,040 The result means that if we go to the drop down route, we are probably going to end up with an error 81 00:05:20,040 --> 00:05:20,490 message. 82 00:05:20,760 --> 00:05:22,740 But let's just kind of roll at this right now. 83 00:05:22,860 --> 00:05:24,780 We just won't visit the drop down route right now. 84 00:05:25,560 --> 00:05:27,720 Then the last one will be show translates. 85 00:05:29,320 --> 00:05:32,020 And for this one, if window location. 86 00:05:34,670 --> 00:05:37,980 Half name is slash translate. 87 00:05:39,450 --> 00:05:42,330 Let's return the translate component. 88 00:05:43,960 --> 00:05:49,600 And the transit component as well, just like search and accordion, should work just fine. 89 00:05:49,960 --> 00:05:52,600 So the drop down at present is not going to work correctly. 90 00:05:52,630 --> 00:05:54,820 But like I said, we will fix that up in just a moment. 91 00:05:55,950 --> 00:06:00,600 Now, inside of the app component itself, I'm going to expand that, Dave, once again, and we can 92 00:06:00,600 --> 00:06:02,250 call all those other functions. 93 00:06:02,840 --> 00:06:04,470 We'll do show list. 94 00:06:05,310 --> 00:06:06,360 That's the second one. 95 00:06:07,920 --> 00:06:09,590 We'll do a show dropdown. 96 00:06:09,900 --> 00:06:10,630 That's the third one. 97 00:06:13,140 --> 00:06:14,460 And then show translate. 98 00:06:16,570 --> 00:06:19,870 OK, so let's save this and flip back over and see how we're doing. 99 00:06:20,910 --> 00:06:22,680 Now we've got just the accordion on the screen. 100 00:06:22,740 --> 00:06:23,400 Fantastic. 101 00:06:23,880 --> 00:06:29,430 If we go to slash list, we see our search component, which is great if we go to translate. 102 00:06:29,910 --> 00:06:30,720 We get the translate. 103 00:06:30,960 --> 00:06:34,530 And then finally, if we go to dropdown, we are going to get an error message right now. 104 00:06:34,560 --> 00:06:36,300 But we will fix that up in just a little bit. 105 00:06:37,110 --> 00:06:37,290 OK. 106 00:06:37,410 --> 00:06:41,760 Let's say that we have now implemented some very simple, very basic routing. 107 00:06:42,240 --> 00:06:46,590 But I think that you, Michaella, tell very quickly that there are some big downsides to this approach. 108 00:06:47,310 --> 00:06:51,780 For example, inside of each of these, we have some extremely repetitive logic. 109 00:06:52,200 --> 00:06:54,780 Every single one of them is really the same kind of check. 110 00:06:55,350 --> 00:06:59,940 So whenever you've got some really repetitive code like this, well, it's probably a sign that we could 111 00:06:59,940 --> 00:07:04,470 probably figure out a way to condense this down and rewrite it in a more compact fashion. 112 00:07:05,120 --> 00:07:09,180 So let's see if we can't kind of get it fixed up a little bit, this code in the next video.