DOM中class与组件className不一致？生产环境激活链接className不渲染排查

核心问题原因 #

1. 路由匹配逻辑过于严格：用router.asPath === nav.href判断激活状态，但asPath包含查询参数、哈希值（比如/profile#settings或/?page=1），严格相等会导致匹配失败，激活类无法添加。
2. 动态导入NextLink的渲染时机问题：动态加载next/link可能让组件渲染延迟，和父组件的路由状态不同步，生产环境下这种异步差异会更明显。
3. 初始渲染路由状态不一致：生产环境预渲染页面时，router.asPath在客户端hydration阶段可能未同步完成，导致初始激活判断错误。

具体修复步骤 #

1. 优化路由匹配逻辑 #

把严格相等判断改成基于pathname的匹配，适配带参数/哈希的路由场景：

// Navbar.tsx
// 替换原isActive判断逻辑
isActive={router.pathname === nav.href}
// 若有嵌套路由（如/blog/123），改用前缀匹配：
// isActive={router.pathname.startsWith(nav.href)}

2. 移除NextLink的动态导入 #

直接导入next/link，避免异步加载带来的同步问题：

// Link.tsx
// 替换动态导入为直接导入
import NextLink from 'next/link';

// 删除原动态导入代码
// const NextLink = dynamic(() => import('next/link'));

3. 确保路由变化时组件重渲染 #

在Navbar组件中监听路由变化，保证状态同步：

// Navbar.tsx
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

const Navbar = () => {
  const router = useRouter();
  const [currentPath, setCurrentPath] = useState(router.pathname);

  useEffect(() => {
    const handleRouteChange = (url: string) => {
      const path = new URL(url, window.location.origin).pathname;
      setCurrentPath(path);
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => router.events.off('routeChangeComplete', handleRouteChange);
  }, [router.events]);

  // 后续激活判断使用currentPath
  return (
    ...
          {navigations.map((nav) => (
            <NavLink key={nav.label} href={nav.href} isActive={currentPath === nav.href}>
              {nav.label}
            </NavLink>
          ))}
    ...
  );
};

4. 验证classnames生成逻辑 #

临时添加日志确认激活类是否正确生成（生产环境调试后删除）：

// NavLink.tsx
const NavLink = ({ children, href, isActive }: NavLinkProps) => {
  const linkClass = classnames(styles.navbar__link, {
    [styles.navbar__link_active]: isActive
  });
  console.log(`Link ${href} 激活状态: ${isActive}, 生成类名: ${linkClass}`);
  
  return (
    <Link href={href} className={linkClass}>
      {children}
    </Link>
  );
};

额外注意事项 #

• 若使用Next.js 13+的App Router，建议改用usePathname（来自next/navigation）替代useRouter，匹配逻辑更稳定。
• 检查SCSS模块的类名在生产环境是否被正确编译，避免哈希值导致的类名匹配失败。

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