- (Instructor) In this video,
we'll create a new messages buttonin NAV bar,
that navigates us to our new message component.
So let's begin in the front end
We'll open up our App component.
And then here, let's copy line four to add a new button
right below it, and we'll call it New Message.
And now using the two directives,
We'll navigate to that specific route.
So let's go over and create that route
inside our Main.js.
So I'll copy our first route on line 15,
and paste it below.
Then I'll create a new path called New Message.
And modify the component to new message as well.
And then we'll need to import the New Message components.
So I'll copy line eight and paste it below,
and make the modifications.
And then the final thing I'll do
is add a comma in between the two routes on line 16.
So let's hit the New Message button
and we can see that
our new message component is now being shown.
Let's do the same thing for our messages button.
So back in our App view, let's copy the two directive
and paste it in the line above, on line four.
Then we'll simply change this
to just the slash, since it's our root route.
Let's give that a try.
And there we go, Both of the routes are now working.
One thing you might have noticed is that
when we switch between our routes,
we have this hash symbol in front of our route URL.
And that's because the default mode
for view router is hash mode.
And it uses the hash to simulate a fully URL
so that the page won't reload when the URL changes.
So if you'd like, you can keep it this way
or we can switch to history mode
which gets rid of the hash
but then does cause a page reload in certain instances.
So for example, if I got rid of new message
and I went to the route URL, and I hit Enter,
you'd noticed that the page did not reload
and the same for new message.
There was no reload.
So in our Main js,
let's scroll down to line 20
where we recreate our new view router.
And let's add
a second property
called Mode,
and we'll set it to history within a string.
Let's save that.
And now Let's reload the page.
And you no longer see the hash symbol.
Let's try clicking on New Message.
And it's working.
And there is no page reload
when switching in between the routes.
But now if we manually changed the URL,
and hit Enter, there is a page reload.
And so that's the difference.
But for the most case,
you'll be navigating your web application
through Nav buttons and so it's not an issue.
Next, what if we wanted to access an individual message?
We could specify the individual message
using a route parameter.
So let's take a look at that next.