Instructor: Now, before we continue,
I prepared some additional styles
attached to find an updated index.css file
which you can use to replace yours with it
and you find a mainheader.modules.css file
which you can drag and drop into your components folder.
And in the MainHeader.js file
you then need to import classes from MainHeader.module.css
and add this class name, classes.header
to your header HTML element.
And if you do that,
we got this basic styling here.
Other than that,
I haven't changed anything.
Now why did I add those styles here though?
Because I want to draw your attention to a problem
or a requirement which we have in a lot of applications.
We often want to highlight the active link
in the navigation.
Currently I'm on the welcome page
but we can't tell that we are by looking at the navigation.
Now I did add the hover styles here
so that the active item is highlighted.
But again, we don't see that when we're on the page,
neither for welcome, nor for products.
Now to a highlight the active link,
react router has an extra feature which helps us.
Instead of using the regular link, which we used here
we can use the NavLink component.
We can use NavLink to replace the standard link
and NavLink works basically like the standard link.
It still creates an anchored hack
catches the clique prevents the browser default
but it does more than that.
NavLink also will set a CSS class
on the active anchor item.
We just need to tell NavLink, which class to add.
And we do this by adding the active class name prop.
And here we can then define a CSS class named
that should be added on this link element.
So on this anchor tech
if that link is active and here we could,
for example, say that classes.active should be added
as a CSS class.
So one of the classes, one of the CSS classes defined
in this main header module CSS file.
And I'll set this on both NavLinks that if they are active
if we are on the page, this link leads to
then this special CSS class should be added.
For this, we just need to go to this CSS file.
And then here on this last rule
we want to add a selector where we select anchor
texts that have the active class.
So a.active.
Active because that is the class I'm adding here
in my JSX code.
And with that, if we save this,
we notice that now the active navigation item
will be marked as such.
If we visit the page to which it belongs.
And that's a nice additional feature,
which you want to have
in a lot of applications you're building
and it is easy to implement with help
of NavLink and the active class named prop.