In the last video we put together some of the plate for our five different core components.
Now in this video we're going to continue by certain to work on this header at the top of each of these
individual screens putting the letter together is really important because it forms the basis of having
the ability to log in and log out of our application which is a very large feature inside of our app.
Now in order to put the header together you might think that we could build a better component and then
show it inside of the stream list inside of streams show inside a stream create edit and so on.
But instead we can use a little shortcut that will make us only have to define or show the header component
exactly one time.
So here's what we're going to do.
This is a diagram of our current component hierarchy except for what you see on the right hand side
I suppose.
So at the very top we have our app component inside the app component.
We are showing a browser router and the browser router has some number of routes defined inside of it.
Now these different routes are only going to be visible depending upon the current Your eldest the user
is visiting.
What we are saying that we want our head component to always be visible no matter what you are l the
user is trying to look at.
So in order to do so we're just going to add the header component to our app component outside of the
browser router.
If we have a component that is not listed inside the browser router it will always be shown 100 percent
of the time irrespective of what the current path is.
So let me show you a quick example of this.
Back inside of my app component I'm going to find the div right here that is dropping our browser router.
And then as a quick example I'm going to put a H-1 tag inside of here and I'll just give it the text
header like so.
So then I'll save this and then we can flip back over to our application we can visit all the different
routes that we have defined and we'll see that no matter what this one is always visible at the top
of the screen.
So if I flip back over that streams delete I see the header if I go to the route I see the header at
Stream list.
I can do streams slash at it.
I still see the header and you get the general idea.
So in order to make sure that this component is always visible we're just going to show it inside the
component outside of our browser router and that's pretty much it.
Now let's take a quick pause right here.
When we come back the next section will start actually putting our real header together.