0
297
VistasReact activeClassName property of NavLink not working
I've been trying to use the activeClassName property of NavLink for applying a certain color and background to the links/anchors. But the changes weren't displayed upon clicking. I'm attaching the js and CSS snippets below
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 Respuestas
Responde la pregunta0
As per react-router docs,
In React Router v6, activeClassName will be removed and you should use the function className to apply classnames to either active or inactive NavLink components.
Here is an updated version :-
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;
The above code in action :-
·
Juan Pablo Isaza
Denunciar
Responde la pregunta