We're on step three out of our five step process for adding our new feature we scaffold it out our component 2
and we added a route for it. 3
Now we just need to make sure that our user can actually navigate to it from the post index component 4
. 5
We're going to focus that on our on in this section right now. 6
Looking back at our mockups you'll notice that on the top right hand side of our index route we've got 7
what looks like a button up here and whenever the user clicks it they expect to be taken over to the 8
new post form here on the far right. 9
Navigating between different routes with re-act router is really straightforward re-act router has what's 10
called a link component that we can use to link a component from one route to another. 11
Let's go ahead and give it a shot. 12
So in my posts index file at the top I'm going to imports link from re-act router so link right here 13
is a actual component. 14
You know just like any other Riak component that we're working with just like a div or posts index component 15
right here it can show up as actual age T.M. in our document when we place it in a component and actually 16
render it the link component ends up as an anchor tag or an a tag. 17
So let's go ahead and give this a shot. 18
I'm going to go ahead and expand our div here and get it going to add a new div 19
with a class name of text xs right. 20
And this is just serving the purpose of some styling here. 21
Now let's go ahead and add or link tag. 22
So we'll see a link and then we specify where we want to link the user to. 23
So we'll say to pose new. 24
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
a class name on here just to make it look like it's an actual button. 26
So say button DTN button primary and then we'll close our link tag. 27
And I'll add some text in here add a post. 28
OK let's go ahead and save this. 29
And now we'll go back over to the browser. 30
Refresh. 31
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
in the inspector sure enough it really does show up as an anchor tag. 33
And it links to posts slash new. 34
So let's go ahead and click it and great takes us over to our creator for just what we expected 35
linking between different routes really is this easy with re-act router is probably one of the best 36
features of re-act router in general. 37
One of the best benefits of this link Taggerty here is that since it manifests itself as an anchor tag 38
it behaves like one as well. 39
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
. 41
This is one of the best things about re-act rather in general is that all the links behave like true 42
links in a lot of other javascript applications out there cooking a button like this is not necessarily 43
tied to an anchor tag and it's not necessarily tied to a you know different route nor application. 44
Clicking a button like this and say an angular application might just show you know a show the user 45
a create form on the page but it won't necessarily be a distinct You are ill. 46
And of course you can and you can do exactly the same thing as react in this regard. 47
I'm not saying that it doesn't but there's a little bit more of a temptation of not always treating 48
these different views and other frameworks as different routes. 49
Whereas with re-act router you just get that behavior out of the box. 50
It always works that way. 51
It's really great. 52
OK. 53
So it's complete Step 3 being able to navigate over to our new feature. 54
Let's go ahead and continue in the next section where we will implement the form that a user will use 55
to enter their blog post into