Active link highlighting not working.
When the link is clicked, the route changes but the link styling doesn't. This is my full code below:
import { Link, useRouter } from "@tanstack/react-router";
import * as Icons from "solar-icon-set";
import cn from "classnames";
const Sidebar = () => {
const links = [
{
title: "Home",
href: "/dashboard",
icon: Icons.Home2,
},
{
title: "Collections",
href: "/dashboard/collections",
icon: Icons.Folder2,
},
];
const router = useRouter();
return (
<div className="py-3 px-4 w-full h-screen bg-[#f5f5f3]">
<h1>Logo</h1>
<div className="space-y-3 mt-10">
{links.map((link, index) => (
<Link
key={index}
to={link.href}
className={cn(
"flex items-center gap-x-2 bg-transparent px-4 py-3 rounded-full text-gray-600 transition-colors",
{
"!bg-accent/15 !text-accent font-medium":
router.latestLocation.pathname === link.href,
"hover:bg-accent/10 hover:text-accent":
router.latestLocation.pathname !== link.href,
}
)}
>
<link.icon
iconStyle={
router.latestLocation.pathname === link.href ? "Bold" : "Linear"
}
size={20}
/>
<span>{link.title}</span>
</Link>
))}
</div>
</div>
);
};
export default Sidebar;
