React activeClassName property of NavLink not working

Question

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

Please help me figure out the issue. Thanks!

Answer 1

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