In the last video we started to wire up our Hetter but we very quickly ran into this nasty error message.
So the error message says you should not use a link element outside of a router.
Now a couple of videos ago I showed you a diagram that looked like this one right here and I told you
that any time that we wanted to make sure that a component was always visible inside of application
we could just place it outside the browser router.
The one exception to that rule is if these outside components over here that should always be visible
are going to contain any re-act router related elements such as a link if we are trying to show a link
on a page or any element that is outside of our browser router.
We're going to get the exact same air that you see right here.
This error message saying you should not use a link outside of a router.
Is he essentially saying that any component that is not a child of our router cannot contain any re-act
router of related components.
So essentially we need to kind of migrate our architecture or our component hierarchy here from what
you see on the screen to something a little bit closer to this.
So we're going to make sure that the app component renders the browser router as it still is.
But now we're going to simply take our header component and move it underneath the browser router.
Now because the header component is not going to be wrapped up inside of a route the header will continue
to always be visible.
So going to be a pretty easy fix here will fall back over to our Apter jazz file or find my header component
right here.
I'm going to cut this thing and move it into this div right here.
So now the header is a child of the browser router.
And so it can successfully make use of a link element.
So I'll say this again we should be able to flip back over and we'll see our head appear.
All right.
So that doesn't look half bad.
Now of course you probably see something that looks a little bit closer to this as a reminder.
I always run with my screen very far zoomed in just so you can see what I see very easily.
Now I should be able to click on this link over here I built to click on this link over here and still
see everything as expected.
I'm going to also very quickly check to make sure they don't have any errors here.
If I open up my console you'll notice that I have a little warning here that simply says that the link
variable is defined but never used.
And that's inside the APTA jazz file.
So I'm going to clean that up very quickly.
If I open up my attic file and find my import statement for re-act router Dom you'll notice that we
were importing link inside of your but we never make use of that variable.
So I'm going to clean that up from the.
Yes file.
Now when I save this that error goes away.
OK so this looks pretty good.
Now take a quick pause right here and we continue in the next video.
We're going to start moving over to discussing how we're going to set up authentication inside of our
application.