如何在Next14客户端组件中获取带#值的URL？

在Next14的客户端组件中，usePathname仅返回路由路径部分，不会包含URL中的哈希（#后面的内容）——这是因为哈希属于浏览器端的状态，不属于Next.js路由体系的一部分。要获取哈希值，直接利用浏览器原生API即可：

1. 直接获取当前哈希 #

在客户端组件中直接访问window.location.hash就能拿到完整哈希（包括#），如果需要去掉开头的#，可以用slice(1)处理：

'use client';

export default function YourClientComponent() {
  const fullHash = window.location.hash; // 示例返回 "#abc"
  const hashValue = window.location.hash.slice(1); // 示例返回 "abc"

  return (
    <div>
      完整哈希：{fullHash}
      <br />
      哈希值（去掉#）：{hashValue}
    </div>
  );
}

2. 监听哈希变化（实时更新） #

如果页面哈希会动态改变（比如用户点击锚点），需要实时获取最新哈希的话，可以用useEffect监听hashchange事件：

'use client';
import { useState, useEffect } from 'react';

export default function HashAwareComponent() {
  const [currentHash, setCurrentHash] = useState(window.location.hash.slice(1));

  useEffect(() => {
    const handleHashChange = () => {
      setCurrentHash(window.location.hash.slice(1));
    };

    // 添加监听
    window.addEventListener('hashchange', handleHashChange);
    // 组件卸载时移除监听
    return () => window.removeEventListener('hashchange', handleHashChange);
  }, []);

  return <div>当前哈希：{currentHash}</div>;
}

注意事项 #

• 必须确保组件是客户端组件（顶部声明'use client';），否则在服务端渲染阶段访问window会报错。
• usePathname和useSearchParams分别负责路由路径和查询参数，哈希不在它们的返回范围内，只能通过浏览器原生API获取。

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