NextJS 13.4中useRouter()失效：pathname为undefined求助

问题根源 #

你用的是Next.js 13+的App Router，从next/navigation导入的useRouter和旧版Pages Router的useRouter不一样——它没有pathname属性，所以你拿不到当前页面路径，自然无法判断链接是否激活。

修复步骤 #

1. 替换钩子：用usePathname代替useRouter获取当前路径，这个钩子是专门用来获取当前URL路径的。
2. 添加客户端指令：因为usePathname是客户端钩子，组件顶部必须加'use client'，否则会报错。
3. 优化className判断（可选，让代码更简洁）：用模板字符串或者工具类来管理条件类名。

修改后的完整代码 #

'use client'; // 必须添加，因为使用了客户端钩子
import React from 'react';
import Image from 'next/image';
import hamburgerMenu from '../../public/Assets/hamburger-menu.svg';
import { usePathname } from 'next/navigation'; // 替换为usePathname
import Link from 'next/link';

function HamburgerMenu({ isModalOpen, handleModal }) {
    const pathname = usePathname(); // 直接获取当前路径

    return (
        <>
            <button onClick={handleModal}>
                <Image src={hamburgerMenu} width={20} height={14} />
            </button>
            {isModalOpen && (
                <div className='absolute top-16 left-[50%] translate-x-[-50%]'>
                    <ul>
                        <li>
                            <Link href='/' className={pathname === '/' ? 'underline' : ''}>
                                Home
                            </Link>
                        </li>
                        <li>
                            <Link
                                href='/about'
                                className={pathname === '/about' ? 'underline' : ''}>
                                About
                            </Link>
                        </li>
                    </ul>
                </div>
            )}
        </>
    );
}

export default HamburgerMenu;

额外提示 #

• 如果项目中有多个导航链接，推荐用clsx简化条件类名，示例：

  import clsx from 'clsx';
  // ...
  <Link href='/' className={clsx({ underline: pathname === '/' })}>Home</Link>
  

• 确保你的Next.js版本是13.0+，usePathname是App Router特有的钩子，Pages Router仍使用旧版useRouter的pathname属性。

内容的提问来源于stack exchange，提问作者Ali Bin Naseer