Next.js 13 App Router中isActive的替代用法及正确语法求助

在Next.js 13的App Router体系下，无法再直接使用旧的isActive逻辑，需要借助next/navigation提供的usePathname钩子来手动判断当前路由是否匹配目标链接。

实现步骤： #

1. 从next/navigation导入usePathname客户端钩子
2. 获取当前页面的完整路径名
3. 对比当前路径与链接的目标路径，判断是否处于活跃状态
4. 将判断结果应用到Link组件的className属性上

完整代码示例： #

'use client'; // 注意：使用客户端钩子必须添加该指令

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

// 假设你已定义links数组、activeLink和normalLink样式变量
const NavigationComponent = ({ links, activeLink, normalLink }) => {
  const pathname = usePathname();

  return (
    <>
      {links.map((link) => {
        const targetPath = `/Pages/${link.name}`;
        const isActive = pathname === targetPath; // 匹配当前路由与目标链接

        return (
          <Link
            href={targetPath}
            key={link.name}
            className={isActive ? activeLink : normalLink}
          >
            {link.icon}
            <span className='capitalize'>{link.name}</span>
          </Link>
        );
      })}
    </>
  );
};

export default NavigationComponent;

嵌套路由场景补充： #

如果需要判断嵌套路由的某个片段是否匹配（比如仅判断/Pages下的子路由片段），可以改用useSelectedLayoutSegment钩子：

import { useSelectedLayoutSegment } from 'next/navigation';

const segment = useSelectedLayoutSegment();
const isActive = segment === link.name; // 匹配路由片段而非完整路径

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