Next.js 13导航栏切换页面时状态不更新，无法添加激活类求助

问题根源 #

你用useState存储选中状态的方式存在核心问题：页面通过Link跳转后，导航栏组件会重新挂载，useState的初始值会被重置，导致第一次点击后激活状态直接消失；第二次点击同一项时，页面还没完成跳转，state临时生效，但跳转后依然会丢失状态。另外在Next.js 13 App Router中，useRouter的pathname必须在客户端组件中才能获取，你可能没添加客户端组件标识。

正确实现方案 #

改用usePathname钩子（来自next/navigation）来判断当前路由，替代手动维护state，具体步骤如下：

1. 在组件顶部添加'use client'指令，将组件标记为客户端组件；
2. 导入usePathname并获取当前路径；
3. 建立路由路径与导航项标识的映射关系，通过当前路径匹配对应的激活状态。

修改后的代码：

'use client'; // 必须添加，否则无法使用客户端钩子

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

export default function Navbar() {
  const pathname = usePathname();
  
  // 路径与导航标识的映射
  const pathMap = {
    '/most_popular': 'popular',
    '/top_rated': 'rated',
    '/upcoming': 'upcoming'
  };

  return (
    <div className="flex text-center flex-row navbar font-mono">
      <div className="navLink">
        <Link
          className={`option ${pathMap[pathname] === 'popular' ? 'clicked' : ''} p-1`}
          href="/most_popular"
        >
          Most Popular
        </Link>
      </div>
      <div className="navLink">
        <Link
          className={`option ${pathMap[pathname] === 'rated' ? 'clicked' : ''} p-1`}
          href="/top_rated"
        >
          Top Rated
        </Link>
      </div>
      <div className="navLink">
        <Link
          className={`option ${pathMap[pathname] === 'upcoming' ? 'clicked' : ''} p-1`}
          href="/upcoming"
        >
          Upcoming
        </Link>
      </div>
    </div>
  );
}

方案优势 #

• usePathname会自动监听路由变化，页面跳转后实时更新当前路径，无需手动处理状态；
• 彻底避免服务端渲染导致的state重置问题，激活状态在页面跳转后能保持正确；
• 代码更简洁，去掉了冗余的点击事件和state维护逻辑。

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