Next.js 13（next/navigation）中如何设置导航菜单激活链接？

先修正你代码里的基础错误，再实现激活状态判断：

1. 基础错误修正 #

你的代码里存在两个明显问题：

• 定义的数组变量是link，但循环时用了sidebarLink，变量名不匹配
• key属性用了link.index，但你的链接对象里并没有index字段，应该用循环的index或者链接的path

2. 实现激活状态逻辑 #

在Next.js 13的App Router中，我们可以使用usePathname钩子获取当前页面路径，对比每个导航链接的path来判断是否为激活状态。

完整代码示例 #

'use client'; // 使用客户端钩子需添加该指令

import Link from 'next/link';
import { usePathname } from 'next/navigation';

const Sidebar = () => {
  const sidebarLinks = [
    {
      label: 'Home',
      path: '/',
    },
    {
      label: 'About',
      path: '/about',
    }
  ];
  const currentPath = usePathname();

  return (
    <div className="sidebar">
      {sidebarLinks.map((link, index) => (
        <Link
          key={index} // 也可用key={link.path}，确保唯一即可
          href={link.path}
          className={`sidebar-link ${currentPath === link.path ? 'active' : ''}`}
        >
          {link.label}
        </Link>
      ))}
    </div>
  );
};

export default Sidebar;

关键说明 #

• 'use client'：必须添加，因为usePathname是客户端组件钩子，仅能在客户端组件中使用
• usePathname()：返回当前页面的路径字符串（比如访问/about时返回'/about'）
• 激活样式：通过动态添加active类标记当前活跃导航项，你可以在CSS中自定义该类样式，示例：

.sidebar-link.active {
  color: #0070f3;
  font-weight: bold;
  border-left: 2px solid #0070f3;
}

拓展处理（动态路径场景） #

如果你的导航包含动态参数路径（比如/posts/[id]），可以用startsWith判断部分匹配：

className={`sidebar-link ${currentPath.startsWith(link.path) ? 'active' : ''}`}

内容的提问来源于stack exchange，提问作者majid