0
298
ViewsLa propiedad React activeClassName de NavLink no funciona
He estado tratando de usar la propiedad activeClassName de NavLink para aplicar cierto color y fondo a los enlaces/anclajes. Pero los cambios no se mostraban al hacer clic. Adjunto los fragmentos js y CSS a continuación
import React from 'react'; import { NavLink } from 'react-router-dom'; import './navbar.css'; const Navbar = () => { return ( <div className='navbar'> <div className='navbar__left'> <NavLink to='/'>Clubhub</NavLink> </div> <div className='navbar__right'> <NavLink activeClassName='active_link' to='/'> Home </NavLink> <NavLink activeClassName='active_link' to='/membership'> Membership </NavLink> <NavLink activeClassName='active_link' to='/booking'> Booking </NavLink> <NavLink activeClassName='active_link' to='/profile'> Profile </NavLink> </div> </div> ); }; export default Navbar; .active_link { background-color: #224461; color: white; }
·
Juan Pablo Isaza
1 answers
Answer question0
Según los documentos del enrutador de reacción ,
En React Router v6, activeClassName se eliminará y debe usar la función className para aplicar nombres de clase a componentes NavLink activos o inactivos.
Aquí hay una versión actualizada: -
import React from "react"; import { NavLink, BrowserRouter as Router } from "react-router-dom"; import "./navbar.css"; const classNameFunc = ({ isActive }) => (isActive ? "active_link" : ""); const App = () => { return ( <Router> <div className="navbar"> <div className="navbar__left"> <NavLink to="/">Clubhub</NavLink> </div> <div className="navbar__right"> <NavLink className={classNameFunc} to="/"> Home </NavLink> <NavLink className={classNameFunc} to="/membership"> Membership </NavLink> <NavLink className={classNameFunc} to="/booking"> Booking </NavLink> <NavLink className={classNameFunc} to="/profile"> Profile </NavLink> </div> </div> </Router> ); }; export default App;El código anterior en acción: -
·
Juan Pablo Isaza
Report
Answer question