onclick menu item active and add class on it-CodePudding

I want to add a class to my menu item on click

<nav className="pt-4">
        {routes.map(({ icon, name, path }) => (
          <ul  >
            <li key={name} className="mb-1">

              <Link to={`/dashboard${path}`} shallow scroll>

                <a className={`block flex gap-4 items-center px-4 py-2 text-xs hover:pl-6 transition-all duration-300
                ${navigate === path ? 'bg-gradient-to-r from-white/10 text-primary' :
                    'text-white hover:text-primary'
                  }
                `}
                >
                  {icon}
                  <span>{name}</span>
                </a>
              </Link>
            </li>

          </ul>
        ))}
      </nav>

I try to use useHistory but it doesn't work anymore and I don't know how to use useNavigate

CodePudding user response：

You can replace Link component with NavLink component as follows:

<NavLink
    to={`/dashboard${path}`}
    className={`block flex gap-4 items-center px-4 py-2 text-xs hover:pl-6 transition-all duration-300 ${(navData) => (navData.isActive ? 'bg-gradient-to-r from-white/10 text-primary' : 'text-white hover:text-primary')}`}
  >
    {icon}
    <span>{name}</span>
</NavLink>

CodePudding user response：

this what works for me :

<NavLink to={`/dashboard${path}`} shallow scroll>
              {({ isActive }) => (

                <a className={`block flex gap-4 items-center px-4 py-2 text-xs hover:pl-6 transition-all duration-300
                ${isActive ? 'bg-gradient-to-r from-white/10 text-primary' :
                    'text-white hover:text-primary'
                  }
                `}
                >
                  {icon}
                  <span>{name}</span>
                </a>
              )}
              </NavLink>