1 00:00:00,750 --> 00:00:05,190 In the last section we took care of a little bit of a gotcha inside of re-act router and this section 2 00:00:05,190 --> 00:00:09,810 we're going to continue on our five point list right here with Item number three making sure that we've 3 00:00:09,810 --> 00:00:16,270 got some navigation to go from the index view over to the new page or the post new component. 4 00:00:16,620 --> 00:00:22,140 So the idea on that index page is at the very top right will have a button that will navigate the user 5 00:00:22,140 --> 00:00:23,850 over to that new component. 6 00:00:24,250 --> 00:00:29,020 So let's open up our post index file inside of the components directory. 7 00:00:29,030 --> 00:00:29,960 Here we go. 8 00:00:30,510 --> 00:00:36,480 Now I want to take a minute and think about how we do navigation on classic Web sites so web sites where 9 00:00:36,480 --> 00:00:40,320 we're navigating between distinct different HMO documents. 10 00:00:40,350 --> 00:00:46,020 Traditionally we do that with a simple anchored tag we place in a tag we defined the aid Tref property 11 00:00:46,350 --> 00:00:49,430 defined the route or the path that we want to go to. 12 00:00:49,440 --> 00:00:55,640 And that's pretty much it when we're using re-act router we're not going to use anchor tags anymore 13 00:00:55,710 --> 00:01:01,660 because remember anchor tags do discrete navigation between different routes inside the browser. 14 00:01:02,160 --> 00:01:07,610 When we navigate around inside of a raft router application what we really want to do is just tell re-act 15 00:01:07,620 --> 00:01:10,470 router to show a new set of components. 16 00:01:10,500 --> 00:01:15,510 We don't really want the browser to go do another request and try to fetch another HTL document from 17 00:01:15,510 --> 00:01:16,750 the server. 18 00:01:17,490 --> 00:01:23,820 So in practice to do navigation with re-act router we end up using a component provided by re-act router 19 00:01:23,820 --> 00:01:25,160 itself. 20 00:01:25,310 --> 00:01:33,970 And so the Post's index file lets import that component right now will say import link from re-act router. 21 00:01:34,050 --> 00:01:40,380 Dom you can think of this link component right here as being nearly identical to a classic anchor tag 22 00:01:40,500 --> 00:01:41,910 really nearly identical. 23 00:01:42,120 --> 00:01:47,250 It'll render something that the user can click to navigate around to different pages within your re-act 24 00:01:47,250 --> 00:01:48,990 router application. 25 00:01:49,020 --> 00:01:53,350 So let's make use of this link tag and see how it works. 26 00:01:53,750 --> 00:01:58,140 Ms scroll down to the render function and I'm going to find where we are currently returning that top 27 00:01:58,140 --> 00:02:01,470 level div and page 3 right inside of it. 28 00:02:01,470 --> 00:02:06,060 Now remember that we really want to show this navigation button on the top right hand side of the page 29 00:02:06,330 --> 00:02:08,070 probably above this H-3. 30 00:02:08,380 --> 00:02:17,570 So right above it I'm going to place a div with a class name of text access right. 31 00:02:17,680 --> 00:02:22,540 This class name right here is going to pull this entire div off to the right hand side of the screen 32 00:02:22,840 --> 00:02:27,490 so it will cause the button which we're going to place inside of it to appear on the top right hand 33 00:02:27,490 --> 00:02:29,960 side inside of here. 34 00:02:30,010 --> 00:02:36,060 We'll place our link tag with the class name of between BATNA and dash primary 35 00:02:39,100 --> 00:02:43,360 and then inside of the link tag will say add a post. 36 00:02:43,360 --> 00:02:44,590 Capital P. 37 00:02:45,120 --> 00:02:45,560 OK. 38 00:02:45,910 --> 00:02:51,850 So so far looking at how we'd use link tag with just these few properties really it should feel like 39 00:02:51,850 --> 00:02:54,530 a very classic rock component. 40 00:02:54,670 --> 00:03:00,550 We specified link we specified a class name and we said that we wanted to render some text inside of 41 00:03:00,550 --> 00:03:01,390 it. 42 00:03:01,390 --> 00:03:07,150 Now the only other prop that we're going to add to this to actually make the navigation happen is called 43 00:03:07,360 --> 00:03:08,290 to. 44 00:03:08,800 --> 00:03:14,140 So the two property right here is going to be a string that is the new route that a user will be navigating 45 00:03:14,140 --> 00:03:17,140 to whenever they clink click on this link link tag. 46 00:03:17,170 --> 00:03:18,470 Excuse me. 47 00:03:18,490 --> 00:03:25,540 So we want to send a user to the Post's new form or the post creation form whenever a user clicks on 48 00:03:25,540 --> 00:03:34,050 this thing so we'll specify the route slash posts slash new and that's pretty much it. 49 00:03:34,290 --> 00:03:38,270 So in practice it really behaves a lot like an anchor tag. 50 00:03:38,270 --> 00:03:43,670 We can treat it with like a normal HMO element by passing in class names and all that kind of good stuff 51 00:03:43,700 --> 00:03:50,480 you know pass and text but instead of specifying an age Trust property we specify the two property. 52 00:03:51,070 --> 00:03:52,490 So let's test the south inside the browser. 53 00:03:52,490 --> 00:03:57,240 Now I'll flip back over and I'm going to go to my route route. 54 00:03:58,010 --> 00:04:05,330 So localhost ADHD once here you'll notice the nice big button on the screen will click it. 55 00:04:05,330 --> 00:04:10,310 And that takes us to the post slash new route where we see our post-New component. 56 00:04:10,660 --> 00:04:10,970 OK. 57 00:04:11,020 --> 00:04:12,400 So this is looking pretty good. 58 00:04:12,680 --> 00:04:17,000 We're not going to do the navigation going back to the index page from this forum just yet. 59 00:04:17,000 --> 00:04:18,390 We'll take care of that in a moment. 60 00:04:18,440 --> 00:04:23,150 But you could definitely imagine that navigating back to the index page will really just take the form 61 00:04:23,180 --> 00:04:24,770 of another link tag. 62 00:04:24,770 --> 00:04:28,880 So looking at these LWT tags ends up being pretty darn straightforward. 63 00:04:28,880 --> 00:04:32,440 Now before we move on one thing I want to point out to you that's kind of interesting. 64 00:04:32,570 --> 00:04:37,020 I'm going to go back to the index page and I'm going to inspect that button. 65 00:04:38,840 --> 00:04:45,200 When I inspect it you might be surprised to see that it actually is behind the scenes an anchor tag. 66 00:04:45,230 --> 00:04:47,100 So yes it does look like a button. 67 00:04:47,120 --> 00:04:50,610 I know I know it looks like a button that's just the CSSA that's making it look like that. 68 00:04:50,630 --> 00:04:53,550 And that's CSSA has been applied from this class right here. 69 00:04:53,600 --> 00:04:56,440 So if I remove those two class names. 70 00:04:56,630 --> 00:04:57,040 Well OK. 71 00:04:57,050 --> 00:04:57,440 There we go. 72 00:04:57,440 --> 00:04:59,650 Now it really looks like an anchor tag right. 73 00:04:59,690 --> 00:05:05,000 So you might be thinking Stephen if this is an anchor tag if that's actually being rendered What's the 74 00:05:05,000 --> 00:05:11,120 difference between using an anchor tag or a link tag if a link tag really just is an anchor tag. 75 00:05:11,210 --> 00:05:17,810 And the answer is that when you click on a link tag it has a couple of event handlers on it that prevent 76 00:05:17,810 --> 00:05:24,800 the browser from doing what it normally does which is to navigate or to issue another TTP request to 77 00:05:24,800 --> 00:05:27,850 fetch another HTML document from the server. 78 00:05:27,860 --> 00:05:30,500 So yes it does make an anchor tag at the end of the day. 79 00:05:30,650 --> 00:05:35,880 But re-act router kind of prevents some of the default behavior around this anchor tag. 80 00:05:36,260 --> 00:05:40,790 So you can definitely imagine if we really wanted to we could definitely build this link tags from scratch 81 00:05:40,850 --> 00:05:43,060 and handle all the associated events around it. 82 00:05:43,220 --> 00:05:47,100 But yeah we're definitely in use the link tag because it's all done for us already. 83 00:05:48,340 --> 00:05:52,270 OK so we've gotten through Step number three on here. 84 00:05:52,440 --> 00:05:57,140 Let's get started on our form inside the post-New component in the next section.