Esta pregunta se ha hecho muchas veces y busqué y probé muchas soluciones. Estoy usando NavLink de react-router-dom y quiero alternar el className activo para marcar el enlace en el que se hizo clic aquí está el código:

 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> ) }

Este código tiene una solución de otra publicación, sin embargo, no funciona para mí ... Intenté exact='true' en todos los enlaces, pero aún no funciona.

Aquí está el código donde la ruta está vinculada.

 <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>

este es el archivo css:

 .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; }

¿Me he perdido algo?