In the last section we took care of a little bit of a gotcha inside of re-act router and this section
we're going to continue on our five point list right here with Item number three making sure that we've
got some navigation to go from the index view over to the new page or the post new component.
So the idea on that index page is at the very top right will have a button that will navigate the user
over to that new component.
So let's open up our post index file inside of the components directory.
Here we go.
Now I want to take a minute and think about how we do navigation on classic Web sites so web sites where
we're navigating between distinct different HMO documents.
Traditionally we do that with a simple anchored tag we place in a tag we defined the aid Tref property
defined the route or the path that we want to go to.
And that's pretty much it when we're using re-act router we're not going to use anchor tags anymore
because remember anchor tags do discrete navigation between different routes inside the browser.
When we navigate around inside of a raft router application what we really want to do is just tell re-act
router to show a new set of components.
We don't really want the browser to go do another request and try to fetch another HTL document from
the server.
So in practice to do navigation with re-act router we end up using a component provided by re-act router
itself.
And so the Post's index file lets import that component right now will say import link from re-act router.
Dom you can think of this link component right here as being nearly identical to a classic anchor tag
really nearly identical.
It'll render something that the user can click to navigate around to different pages within your re-act
router application.
So let's make use of this link tag and see how it works.
Ms scroll down to the render function and I'm going to find where we are currently returning that top
level div and page 3 right inside of it.
Now remember that we really want to show this navigation button on the top right hand side of the page
probably above this H-3.
So right above it I'm going to place a div with a class name of text access right.
This class name right here is going to pull this entire div off to the right hand side of the screen
so it will cause the button which we're going to place inside of it to appear on the top right hand
side inside of here.
We'll place our link tag with the class name of between BATNA and dash primary
and then inside of the link tag will say add a post.
Capital P.
OK.
So so far looking at how we'd use link tag with just these few properties really it should feel like
a very classic rock component.
We specified link we specified a class name and we said that we wanted to render some text inside of
it.
Now the only other prop that we're going to add to this to actually make the navigation happen is called
to.
So the two property right here is going to be a string that is the new route that a user will be navigating
to whenever they clink click on this link link tag.
Excuse me.
So we want to send a user to the Post's new form or the post creation form whenever a user clicks on
this thing so we'll specify the route slash posts slash new and that's pretty much it.
So in practice it really behaves a lot like an anchor tag.
We can treat it with like a normal HMO element by passing in class names and all that kind of good stuff
you know pass and text but instead of specifying an age Trust property we specify the two property.
So let's test the south inside the browser.
Now I'll flip back over and I'm going to go to my route route.
So localhost ADHD once here you'll notice the nice big button on the screen will click it.
And that takes us to the post slash new route where we see our post-New component.
OK.
So this is looking pretty good.
We're not going to do the navigation going back to the index page from this forum just yet.
We'll take care of that in a moment.
But you could definitely imagine that navigating back to the index page will really just take the form
of another link tag.
So looking at these LWT tags ends up being pretty darn straightforward.
Now before we move on one thing I want to point out to you that's kind of interesting.
I'm going to go back to the index page and I'm going to inspect that button.
When I inspect it you might be surprised to see that it actually is behind the scenes an anchor tag.
So yes it does look like a button.
I know I know it looks like a button that's just the CSSA that's making it look like that.
And that's CSSA has been applied from this class right here.
So if I remove those two class names.
Well OK.
There we go.
Now it really looks like an anchor tag right.
So you might be thinking Stephen if this is an anchor tag if that's actually being rendered What's the
difference between using an anchor tag or a link tag if a link tag really just is an anchor tag.
And the answer is that when you click on a link tag it has a couple of event handlers on it that prevent
the browser from doing what it normally does which is to navigate or to issue another TTP request to
fetch another HTML document from the server.
So yes it does make an anchor tag at the end of the day.
But re-act router kind of prevents some of the default behavior around this anchor tag.
So you can definitely imagine if we really wanted to we could definitely build this link tags from scratch
and handle all the associated events around it.
But yeah we're definitely in use the link tag because it's all done for us already.
OK so we've gotten through Step number three on here.
Let's get started on our form inside the post-New component in the next section.