React Router's NavLink keep implemented its className's method

Question

I'm using React Router version 6.14, and I have a weird issue. I'm using the NavLink in this way:

<nav>
    <NavLink className={ ({isActive}) => isActive ? 'active' : null } to='/host'>Host</NavLink>
    <NavLink className={ ({isActive}) => isActive ? 'active' : null } to='/about'>About</NavLink>
    <NavLink className={ ({isActive}) => isActive ? 'active' : null } to='/vans'>Vans</NavLink>
</nav>

The CSS of the 'active' is simply:

.active {
  color: #161616;
  text-decoration: underline;
}

The problem is if I remove the className attribute from the NavLink, its method still being implemented. Even if I restart the program it's still hapening, like it's remember that line of code. Only if I remvoe the 'active' section from the CSS file it stops.

Does anyone know anything about this strange bug?

Answer 1

Thanks to @Drew Reese the question is answered, I'll share the solution here in case others come across it. It turns out that by default, an active class is added to a NavLink component when it is active. That's why if there's a class in the CSS file called "active", it will affect the active NavLink, even if there's no definition to its className.

The documentation that refer to this: default-active-class