使用useRouter遇NextRouter未挂载错误，需实现导航链接高亮

错误原因 #

useRouter 是Next.js的客户端钩子，仅能在客户端组件中使用。如果你的项目基于Next.js 13+的App Router，默认所有组件都是服务器组件，直接调用useRouter会因服务器环境无Router实例报错。此外你的代码还存在两个问题：所有导航链接的href都设为"/"，无法实现不同页面的高亮；isVisible变量未定义，会导致类名解析错误。

修复步骤及完整代码 #

1. 标记为客户端组件 #

在组件顶部添加'use client'指令，告知Next.js这是客户端组件，允许使用客户端钩子。

2. 修复导航路径 #

给每个菜单项设置对应实际页面的href路径，比如/about-us、/admission等。

3. 处理导航显示状态 #

添加useState定义isVisible状态，控制导航栏的显示隐藏（若无需滚动控制，可直接移除相关类名逻辑）。

4. 优化高亮逻辑 #

将菜单项存为数组循环渲染，减少重复代码，同时通过router.pathname匹配当前路径添加激活样式。

'use client';
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import logo from '../path/to/your/logo.png'; // 替换为你的logo实际路径

const Navbar2 = () => {
  const router = useRouter();
  const [isVisible, setIsVisible] = useState(true);

  // 可选：监听滚动控制导航显示隐藏
  useEffect(() => {
    const handleScroll = () => {
      setIsVisible(window.scrollY < 100);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 导航菜单配置
  const menuItems = [
    { path: '/', label: 'Home' },
    { path: '/about-us', label: 'About us' },
    { path: '/admission', label: 'Admission' },
    { path: '/safeguarding', label: 'Safeguarding' },
    { path: '/school-life', label: 'School life' },
    { path: '/sixth-form', label: 'Sixth Form' },
    { path: '/news', label: 'News' },
    { path: '/alumni', label: 'Alumni' },
    { path: '/contact-us', label: 'Contact us' },
  ];

  return (
    <nav className={`fixed top-0 w-full px-10 bg-white p-4 transition-all duration-500 ${isVisible ? 'top-0' : 'top-[-160px]'}`}>
      <div className="flex items-center justify-between">
        {/* Brand Logo  */}
        <div className="w-[40%]">
          <Image src={logo} alt="Brand Logo" className="w-20" width={80} height={80} /> {/* Image组件需显式传入宽高 */}
        </div>
        {/* menu item */}
        <div className="flex-1">
          {/* main menu */}
          <ul className="flex items-center justify-between mt-10">
            {menuItems.map((item) => (
              <li key={item.path}>
                <Link 
                  href={item.path} 
                  className={router.pathname === item.path ? 'text-[#7B003B] font-medium' : 'text-gray-700 hover:text-[#7B003B] transition-colors'}
                >
                  {item.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </nav>
  );
};

export default Navbar2;

关键说明 #

• 'use client'：必须放在组件最顶部，是App Router中使用客户端钩子的必要声明。
• 菜单数组：统一管理导航项，便于后续修改维护。
• 高亮判断：通过router.pathname === item.path匹配当前路由，给激活链接添加指定样式。
• Image组件：Next.js的Image组件需显式传入width和height属性（或使用fill属性），避免控制台警告。

内容的提问来源于stack exchange，提问作者T.I.T Tanmoy