在Next.js中如何正确获取window.location.pathname？代码报错求助

报错原因很直接：Next.js默认支持服务端渲染（SSR）或静态生成（SSG），在服务器端执行组件代码时，浏览器的window对象不存在，直接访问window.location.pathname会抛出错误。

下面分两种常用的路由方案给出解决办法：

1. Pages Router（pages目录结构，Next.js 12及更早版本适用） #

使用Next.js官方的useRouter钩子，它能在服务端和客户端都正确获取路由信息，且路由变化时自动更新：

import { useRouter } from 'next/router';

function YourComponent() {
  const router = useRouter();
  const path = router.pathname;

  return (
    <div>
      {path === '/product' ? <p className='mt-2'>Products</p> :
       path === '/contact' ? <p className='mt-2'>Contact</p> :
       path === '/cart' ? <p className='mt-2'>Cart</p> :
       <p className='mt-2'>Home</p>
      }
    </div>
  );
}

export default YourComponent;

2. App Router（app目录结构，Next.js 13+适用） #

需要在客户端组件中使用usePathname钩子，记得先添加'use client'指令声明这是客户端组件：

'use client';
import { usePathname } from 'next/navigation';

function YourComponent() {
  const path = usePathname();

  return (
    <div>
      {path === '/product' ? <p className='mt-2'>Products</p> :
       path === '/contact' ? <p className='mt-2'>Contact</p> :
       path === '/cart' ? <p className='mt-2'>Cart</p> :
       <p className='mt-2'>Home</p>
      }
    </div>
  );
}

export default YourComponent;

不推荐的方案（仅作参考） #

如果非要用window.location，需要确保代码只在客户端执行，同时手动监听路由变化（因为Next.js的客户端路由切换不会触发popstate以外的事件，这种方式维护成本高）：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [path, setPath] = useState('');

  useEffect(() => {
    // 仅在客户端执行
    if (typeof window !== 'undefined') {
      setPath(window.location.pathname);
      // 监听浏览器前进后退事件
      const handleRouteChange = () => setPath(window.location.pathname);
      window.addEventListener('popstate', handleRouteChange);
      // 组件卸载时移除监听
      return () => window.removeEventListener('popstate', handleRouteChange);
    }
  }, []);

  return (
    <div>
      {path === '/product' ? <p className='mt-2'>Products</p> :
       path === '/contact' ? <p className='mt-2'>Contact</p> :
       path === '/cart' ? <p className='mt-2'>Cart</p> :
       <p className='mt-2'>Home</p>
      }
    </div>
  );
}

export default YourComponent;

注意：优先使用官方提供的路由钩子，它们能更好地适配Next.js的渲染机制，避免手动维护路由状态的麻烦。

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