如何在React-Next.js中更改当前导航

Question

我使用此代码进行标题导航。

const navigation = [
{ name: 'Main', href: '/', current: true },
{ name: 'Test', href: '/test', current: false },
{ name: 'Test 2', href: '#', current: false },
{ name: 'Test 3', href: '#', current: false },
]

以及在html:中

{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className={classNames(item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'px-3 py-2 rounded-md text-sm font-medium')}
aria-current={item.current ? 'page' : undefined}
>
{item.name}
</a>
))}

如何将当前节更改为"；真"；我什么时候走？

Answer 1

我认为您不需要为这个用例更改数组中某个项的值。

在这种情况下，你可以检查当前路径是什么，你可以在路由器中找到。然后，您应该检查当前路径是否与href中的一个匹配。

const NavComponent = () => {
const router = useRouter();
return navigation.map((item) => (
<a
key={item.name}
href={item.href}
className={classNames(
router.asPath === item.href
? 'bg-gray-900 text-white'
: 'text-gray-300 hover:bg-gray-700 hover:text-white',
'px-3 py-2 rounded-md text-sm font-medium'
)}
aria-current={router.asPath === item.href ? 'page' : undefined}
>
{item.name}
</a>
));
};