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

CodePudding user response：

As per