NextRouter未挂载错误解决及导航栏当前页高亮实现需求

问题场景 #

需求为：首页时导航项「Home」通过变色+下划线显示激活状态，切换至其他页面时，对应导航项同步呈现该状态。但使用useRouter钩子实现时，触发"NextRouter was not mounted"未处理运行时错误。

错误原因 #

该错误通常源于两种场景：

• 在**服务器端渲染(SSR)或静态生成(SSG)**的组件顶层直接调用useRouter，此时Next.js路由在服务器端尚未完成挂载
• 在App Router（App目录）环境下误用了Pages Router的useRouter API（两者路由体系不兼容）

解决方案 #

分两种路由环境针对性修复：

场景1：使用Pages Router（Pages目录） #

通过useEffect延迟获取路由信息，确保在客户端挂载后再处理路由逻辑：

// components/Navbar.js
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function Navbar() {
  const [currentPath, setCurrentPath] = useState('');
  const router = useRouter();

  useEffect(() => {
    // 客户端挂载后初始化当前路径
    setCurrentPath(router.pathname);
    
    // 监听路由切换事件，更新激活状态
    const handleRouteChange = (url) => setCurrentPath(url);
    router.events.on('routeChangeComplete', handleRouteChange);
    
    // 组件卸载时移除监听
    return () => router.events.off('routeChangeComplete', handleRouteChange);
  }, [router]);

  const isActive = (path) => currentPath === path;

  return (
    <nav>
      <Link href="/" className={`nav-item ${isActive('/') ? 'active' : ''}`}>
        Home
      </Link>
      <Link href="/about" className={`nav-item ${isActive('/about') ? 'active' : ''}`}>
        About
      </Link>
      <Link href="/contact" className={`nav-item ${isActive('/contact') ? 'active' : ''}`}>
        Contact
      </Link>
    </nav>
  );
}

配套激活状态样式：

.nav-item {
  margin: 0 1rem;
  text-decoration: none;
  color: #333;
  transition: all 0.3s;
}

.nav-item.active {
  color: #0070f3;
  border-bottom: 2px solid #0070f3;
}

场景2：使用App Router（App目录） #

App Router需使用next/navigation提供的usePathname替代Pages Router的useRouter：

// app/components/Navbar.js
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function Navbar() {
  const pathname = usePathname();

  const isActive = (path) => pathname === path;

  return (
    <nav>
      <Link href="/" className={`nav-item ${isActive('/') ? 'active' : ''}`}>
        Home
      </Link>
      <Link href="/about" className={`nav-item ${isActive('/about') ? 'active' : ''}`}>
        About
      </Link>
      <Link href="/contact" className={`nav-item ${isActive('/contact') ? 'active' : ''}`}>
        Contact
      </Link>
    </nav>
  );
}

样式与上述保持一致即可。

额外注意事项 #

• 若在Pages Router的_app.js中使用useRouter，确保组件未强制开启纯SSR模式
• 禁止在服务器端渲染组件的顶层直接访问router.pathname，必须在客户端生命周期钩子内处理路由逻辑

内容的提问来源于stack exchange，提问作者Khuong Viet Tai