All language subtitles for 006 Using NavLinks_en

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.