在我的NextJS项目中有以下Navigation组件;
const navigation = [
{ name: 'Dashboard', href: '/dashboard', icon: Squares2X2Icon, current: true },
{ name: 'Orders', href: '/orders', icon: UsersIcon, current: false },
{ name: 'Products', href: '/products', icon: FolderIcon, current: false },
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
const Navigation = () => {
return (
<>
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className={classNames(
item.current
? 'bg-gray-100 text-gray-900'
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
'group flex items-center px-2 py-2 text-sm font-medium rounded-md'
)}
>
<item.icon
className={classNames(
item.current
? 'text-gray-500'
: 'text-gray-400 group-hover:text-gray-500',
'mr-4 flex-shrink-0 h-6 w-6'
)}
aria-hidden="true"
/>
{item.name}
</a>
))}
</>
)
}
export default Navigation
这是从Tailwind CSS网站复制的...当我在 Jmeter 板页面上时,导航链接是当前的,但当我转到订单或产品时,“当前”导航仍停留在 Jmeter 板上。
有什么方法可以根据我当前所在的页面动态更改此设置吗?
1条答案
按热度按时间dfty9e191#
通过
next/router
获取当前页面路径的更好方法const router = useRouter();
有了它,你可以做一个条件,像下面,并检测什么是当前页面
const isCurrent = router.pathname === item.href