react-router-dom

useLocation.tsx

import { Link, LinkProps, useLocation } from 'react-router-dom'

export type NavLinkProps = LinkProps

export function NavLink(props: NavLinkProps) {
  const { pathname } = useLocation()

  return (
    <Link
      data-current={pathname === props.to}
      className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground data-[current=true]:text-foreground"
      {...props}
    />
  )
}

useLocation - retorna a rota atual, pode ser usado como active

useNavigate - redirecionamento a partir de um click do botão, todas as vezes que não for um link.