Next.js项目路由路径名无法正确更新问题求助

情况1：使用Pages Router（Next.js 12及更早，或13+兼容模式） #

问题根源：如果仅在组件初始化时获取pathname（比如直接在组件顶层读取window.location.pathname，或用useRouter但未监听路由变化），会因Next.js客户端路由不刷新页面导致路径值无法更新。

解决方法：

• 直接依赖响应式的router.pathname：

  import { useRouter } from 'next/router';
  
  function Header() {
    const router = useRouter();
    // 根据实时pathname切换样式
    const headerStyle = router.pathname === '/' 
      ? { background: '#ffffff' } 
      : { background: '#f5f5f5' };
  
    return <header style={headerStyle}>页面头部</header>;
  }
  
  export default Header;
  

• 或监听路由变化事件（适用于需要额外处理逻辑的场景）：

  import { useRouter } from 'next/router';
  import { useEffect, useState } from 'react';
  
  function Header() {
    const router = useRouter();
    const [currentPath, setCurrentPath] = useState(router.pathname);
  
    useEffect(() => {
      const updatePath = (url) => {
        const path = new URL(url, window.location.origin).pathname;
        setCurrentPath(path);
      };
  
      router.events.on('routeChangeComplete', updatePath);
      return () => router.events.off('routeChangeComplete', updatePath);
    }, [router]);
  
    const headerStyle = currentPath === '/' 
      ? { background: '#ffffff' } 
      : { background: '#f5f5f5' };
  
    return <header style={headerStyle}>页面头部</header>;
  }
  
  export default Header;
  

情况2：使用App Router（Next.js 13+） #

问题根源：App Router中服务器组件无法访问客户端路由状态，若未将Header标记为客户端组件、未使用专属路由钩子，会导致路径值不更新。

解决方法：
标记组件为客户端组件，使用usePathname钩子获取实时路径：

'use client';

import { usePathname } from 'next/navigation';

function Header() {
  const pathname = usePathname();
  const headerStyle = pathname === '/' 
    ? { background: '#ffffff' } 
    : { background: '#f5f5f5' };

  return <header style={headerStyle}>页面头部</header>;
}

export default Header;

常见错误排查 #

• 避免直接使用window.location.pathname：Next.js客户端路由为单页跳转，该值仅在页面初始化时读取一次，不会随路由更新。
• 确保Header是客户端组件：App Router中，服务器组件无法访问客户端路由钩子，必须添加'use client'指令。
• 检查缓存配置：若组件被强制缓存（如设置cache: 'force-cache'），可能导致路由信息无法实时更新，需调整缓存策略。

内容的提问来源于stack exchange，提问作者Cергей Темный