After searching and attempting various solutions, I am still facing an issue with toggling the active className for a NavLink in my react-router-dom setup. Below is the code snippet:
import React from 'react'
import styles from './NavBar.module.css'
import logo from '../assets/logos/icon-left-font-monochrome-white.svg'
import { NavLink } from 'react-router-dom'
export default function NavBar() {
return (
<div className={styles.nav_contrainer}>
<img className={styles.img} src={logo} alt='logo groupomania avec typo blanc' />
<nav className={styles.nav}>
<NavLink to='/home' exact='true' className={(navData) => (navData.isActive ? 'active' : 'none')} style={{ textDecoration: 'none' }}>
<li>Home</li>
</NavLink>
<NavLink to='/articlebuilder' className={(navData) => (navData.isActive ? 'active' : 'none')} style={{ textDecoration: 'none' }}>
<li>Écrire un article</li>
</NavLink>
<NavLink to='/profile' className={(navData) => (navData.isActive ? 'active' : 'none')} style={{ textDecoration: 'none' }}>
<li>Profile</li>
</NavLink>
</nav>
</div>
)
}
The solution provided by others does not seem to work for me, despite trying the 'exact=true' attribute in all links. Here is how the paths are defined:
<div className='App'>
<Routes>
<Route path='/' exact={true} element={<HomePage />} />
<Route path='/landingpage' exact={true} element={<LandingPage />} />
<Route path='/home' exact={true} element={<HomePage />} />
<Route path='/profile' exact={true} element={<Profile />} />
<Route path='/articlebuilder' exact={true} element={<ArticleBuilder />} />
<Route path='/signup' exact={true} element={<Signup />} />
<Route path='/signin' exact={true} element={<Signin />} />
</Routes>
</div>
Below is the accompanying CSS file:
.nav_contrainer {
background-color: #ffac99;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0em 0em 0em 1em;
}
nav {
display: flex;
position: sticky;
}
nav a {
list-style: none;
font-size: 1.6em;
color: white;
transition: all ease-in-out 350ms;
padding: 10px;
}
nav a:hover {
color: #870e07;
cursor: pointer;
}
.nav_contrainer img {
width: 15%;
height: 15%;
}
.active {
color: #870e07;
font-weight: bold;
}
Am I overlooking something crucial? Any help would be appreciated.