The "isActive" prop for React's NavLink isn't working - css

Question

I'm making a little ticker animation for my navbar but for some reason, the ticker doesn't move when I click on a NavLink. At first, I thought it was a problem with the CSS file but that seems to be working fine. I then tried using an older version of react-router-dom but that also didn't seem to work. Some help would be appreciated.
As you can see, the 'active-nav' class is supposed to change to any NavLink that is Active & the rest are left with empty quotation marks.
Navbar.jsx:
import {Link, NavLink} from 'react-router-dom'
import {links} from '../data'
import {GoThreeBars} from 'react-icons/go'
import Logo from '../images/logo.png'
import "./navbar.css"
const Navbar = () => {
return (
<nav>
<div className='container nav__container'>
<Link to="/" className='logo'>
<img src={Logo} alt="Nav Logo"/>
</Link>
<ul className="nav__links">
{
links.map(({name, path}, index) => {
return (
<li>
<NavLink to={path} className={({isActive}) => isActive ? 'active-nav' : ''}>{name}</NavLink>
</li>
)
})
}
</ul>
<button className="nav__toggle-btn">
<GoThreeBars />
</button>
</div>
</nav>
)
}
export default Navbar
Here you can see that most of the functionality is in the CSS
navbar.css:
nav {
height: 5rem;
width: 100vw;
background: var(--color-primary);
display: grid;
place-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
/* only shows on medium and small screens */
.nav__toggle-btn {
display: none;
}
.nav__container {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
width: 1920px;
}
.logo {
width: 7rem;
margin-right: 400px;
}
.nav__links {
display: flex;
gap: 3.5rem;
}
.nav__links a {
transition: var(--transition);
}
.nav__links a:hover {
color: var(--color--secondary);
}
.active-nav {
position: relative;
}
.nav__links::after {
content: '';
display: block;
width: 1.2rem;
height: 1.2rem;
background: var(--color-primary);
position: absolute;
left: calc(50% - 0.6rem);
transform: rotate(45deg);
margin-top: 2.7rem;
}
package.json
{
"name": "reactappblue",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.6.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
app.js:
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import Home from './pages/home/Home'
import About from './pages/about/About'
import Contact from './pages/contact/Contact'
import Gallery from './pages/gallery/Gallery'
import Plans from './pages/plans/Plans'
import Trainers from './pages/trainers/Trainers'
import NotFound from './pages/notfound/Notfound'
import Navbar from './components/Navbar'
import {BrowserRouter as Router} from 'react-router-dom'
const App = () => {
return (
<BrowserRouter>
<Navbar />
<Routes>
<Route index element={<Home/>} />
<Route path="about" element={<About/>} />
<Route path="contact" element={<Contact/>} />
<Route path="gallery" element={<Gallery/>} />
<Route path="plans" element={<Plans/>} />
<Route path="trainers" element={<Trainers/>} />
<Route path="*" element={<NotFound/>} />
</Routes>
</BrowserRouter>
)
}
export default App

Answer 1

It's rather hard to exactly reproduce your problem since you are missing some relevant information in your question. I made some assumptions:
Your package.json would have been valuable since it contains the versions of the packages you're using, I used "react": "18.2.0" and "react-router-dom": "6.4.2"
I wrapped the Navbar in a react-router-dom BrowserRouter in the parent component like this:
import Navbar from './Navbar.jsx';
import {BrowserRouter as Router} from 'react-router-dom'
function App() {
return (
<Router>
<div className="App">
<Navbar/>
</div>
</Router>
);
}
Doing so, the class name was set properly for me. I didn't have to change any parts of the code you provided.
I hope this already helps, if not, please provide the versions of the packages you're using and how the <Navbar /> component is instantiated in its parent component(s).

Answer 2

You can simply use activeClassName prop.
<NavLink to={path} activeClassName="active-nav">{name}</NavLink>
If you are using className you don't need to destructure {isActive}, simply use
<NavLink
to={path}
className={isActive => isActive ? 'active-nav' : ''}
>
{name}
<NavLink/>