1

00:00:01,500  -->  00:00:07,470
We're on step three out of our five step process for adding our new feature we scaffold it out our component

2

00:00:07,530  -->  00:00:09,200
and we added a route for it.

3

00:00:09,240  -->  00:00:14,580
Now we just need to make sure that our user can actually navigate to it from the post index component

4

00:00:14,580  -->  00:00:15,230
.

5

00:00:15,270  -->  00:00:18,940
We're going to focus that on our on in this section right now.

6

00:00:19,350  -->  00:00:26,400
Looking back at our mockups you'll notice that on the top right hand side of our index route we've got

7

00:00:26,400  -->  00:00:33,480
what looks like a button up here and whenever the user clicks it they expect to be taken over to the

8

00:00:33,660  -->  00:00:37,050
new post form here on the far right.

9

00:00:37,350  -->  00:00:43,710
Navigating between different routes with re-act router is really straightforward re-act router has what's

10

00:00:43,710  -->  00:00:49,670
called a link component that we can use to link a component from one route to another.

11

00:00:49,950  -->  00:00:53,290
Let's go ahead and give it a shot.

12

00:00:53,310  -->  00:01:04,830
So in my posts index file at the top I'm going to imports link from re-act router so link right here

13

00:01:04,830  -->  00:01:07,950
is a actual component.

14

00:01:07,960  -->  00:01:14,370
You know just like any other Riak component that we're working with just like a div or posts index component

15

00:01:14,370  -->  00:01:22,860
right here it can show up as actual age T.M. in our document when we place it in a component and actually

16

00:01:22,860  -->  00:01:28,110
render it the link component ends up as an anchor tag or an a tag.

17

00:01:28,110  -->  00:01:30,920
So let's go ahead and give this a shot.

18

00:01:32,070  -->  00:01:38,550
I'm going to go ahead and expand our div here and get it going to add a new div

19

00:01:41,970  -->  00:01:48,280
with a class name of text xs right.

20

00:01:48,810  -->  00:01:53,030
And this is just serving the purpose of some styling here.

21

00:01:53,040  -->  00:01:56,170
Now let's go ahead and add or link tag.

22

00:01:56,280  -->  00:02:01,840
So we'll see a link and then we specify where we want to link the user to.

23

00:02:02,160  -->  00:02:06,470
So we'll say to pose new.

24

00:02:06,540  -->  00:02:12,000
So we just type in the exact route that we want to take them to and then I'm going to go ahead and add

25

00:02:12,000  -->  00:02:16,230
a class name on here just to make it look like it's an actual button.

26

00:02:16,230  -->  00:02:23,060
So say button DTN button primary and then we'll close our link tag.

27

00:02:23,580  -->  00:02:27,380
And I'll add some text in here add a post.

28

00:02:27,890  -->  00:02:30,360
OK let's go ahead and save this.

29

00:02:30,360  -->  00:02:32,510
And now we'll go back over to the browser.

30

00:02:32,630  -->  00:02:33,560
Refresh.

31

00:02:34,050  -->  00:02:40,950
And I get my nice button over here out of post so I'm going to inspect this button now and you'll see

32

00:02:41,810  -->  00:02:45,430
in the inspector sure enough it really does show up as an anchor tag.

33

00:02:45,750  -->  00:02:48,860
And it links to posts slash new.

34

00:02:49,290  -->  00:02:54,930
So let's go ahead and click it and great takes us over to our creator for just what we expected

35

00:02:59,550  -->  00:03:04,110
linking between different routes really is this easy with re-act router is probably one of the best

36

00:03:04,110  -->  00:03:06,380
features of re-act router in general.

37

00:03:06,510  -->  00:03:12,720
One of the best benefits of this link Taggerty here is that since it manifests itself as an anchor tag

38

00:03:13,230  -->  00:03:15,150
it behaves like one as well.

39

00:03:15,270  -->  00:03:22,920
So I can do stuff like say right click it and open link in New Tab and I get my new form right here

40

00:03:22,920  -->  00:03:23,800
.

41

00:03:23,850  -->  00:03:29,580
This is one of the best things about re-act rather in general is that all the links behave like true

42

00:03:29,580  -->  00:03:35,130
links in a lot of other javascript applications out there cooking a button like this is not necessarily

43

00:03:35,130  -->  00:03:41,700
tied to an anchor tag and it's not necessarily tied to a you know different route nor application.

44

00:03:41,700  -->  00:03:47,850
Clicking a button like this and say an angular application might just show you know a show the user

45

00:03:47,940  -->  00:03:53,050
a create form on the page but it won't necessarily be a distinct You are ill.

46

00:03:53,220  -->  00:03:57,810
And of course you can and you can do exactly the same thing as react in this regard.

47

00:03:57,810  -->  00:04:02,730
I'm not saying that it doesn't but there's a little bit more of a temptation of not always treating

48

00:04:02,730  -->  00:04:06,010
these different views and other frameworks as different routes.

49

00:04:06,210  -->  00:04:10,100
Whereas with re-act router you just get that behavior out of the box.

50

00:04:10,110  -->  00:04:11,060
It always works that way.

51

00:04:11,070  -->  00:04:12,240
It's really great.

52

00:04:12,780  -->  00:04:13,080
OK.

53

00:04:13,080  -->  00:04:17,540
So it's complete Step 3 being able to navigate over to our new feature.

54

00:04:17,580  -->  00:04:23,010
Let's go ahead and continue in the next section where we will implement the form that a user will use

55

00:04:23,010  -->  00:04:24,870
to enter their blog post into