NextJS导航栏激活样式添加问题：useRouter属性报错

问题根源是NextJS 13+的App Router与旧Pages Router的路由API完全不同：你从next/navigation导入的useRouter是App Router实例，它没有pathname和asPath属性——这些路径相关功能已拆分到单独的钩子中。

解决步骤 #

• 改用usePathname钩子获取当前路径，替代原router.pathname/router.asPath
• 组件顶部必须添加'use client'指令，因为usePathname属于客户端钩子，只能在客户端组件中使用
• 替换原有路径判断逻辑

修改后的完整代码 #

'use client'; // 必须添加，启用客户端组件特性

import { usePathname } from 'next/navigation';
import Link from 'next/link';
// 导入你的图标组件
import MdOutlineVerifiedUser from 'react-icons/md';
import TbBrandReactNative from 'react-icons/tb';
import GoCodeOfConduct from 'react-icons/go';
import TbFileReport from 'react-icons/tb';

export default function AdmissionNavigation() {
  const pathname = usePathname(); // 获取当前页面的完整路径

  return (
    <ul>
      <li className='font-medium py-1 my-2'>
        <Link 
          href="/dashboard/admission/offer" 
          className={`${pathname === "/dashboard/admission/offer" ? 'bg-gray-100 text-purple-800' : ""} text-sm py-2.5 px-3 flex gap-4 items-center rounded`}
        >
          <MdOutlineVerifiedUser className='text-xl'/> Offer Letter
        </Link>
      </li>
      <li className='py-1 my-3 bg-white'>
        <Link 
          href="/dashboard/admission/state" 
          className={`${pathname === "/dashboard/admission/state" ? 'bg-gray-100 text-purple-800' : ""} text-sm py-2.5 px-3 flex gap-4 items-center rounded`}
        >
          <TbBrandReactNative /> State of Origin
        </Link>
      </li>
      <li className='py-1 my-3 bg-white'>
        <Link 
          href="/dashboard/admission/conduct" 
          className={`${pathname === "/dashboard/admission/conduct" ? 'bg-gray-100 text-purple-800' : ""} text-sm py-2.5 px-3 flex gap-4 items-center rounded`}
        >
          <GoCodeOfConduct /> Code Conduct
        </Link>
      </li>
      <li className='py-1 my-3 bg-white'>
        <Link 
          href="/dashboard/admission/medical" 
          className={`${pathname === "/dashboard/admission/medical" ? 'bg-gray-100 text-purple-800' : ""} text-sm py-2.5 px-3 flex gap-4 items-center rounded`}
        >
          <TbFileReport /> Medical Report
        </Link>
      </li>
    </ul>
  );
}

额外说明 #

• 若需处理带查询参数的路径（如/dashboard/admission/conduct?tab=1），可结合useSearchParams钩子补充判断，你的场景用usePathname即可满足精确匹配需求
• App Router的useRouter仅负责导航操作（如router.push、router.back），路径信息获取已拆分到专用钩子，这是与Pages Router的核心差异

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