Next.js中如何处理URL内嵌套锚点ID（父ID下的子ID）

根据你的组件结构和需求，要实现直接跳转到父级区块内子组件的具体ID位置，需要分Next.js的Pages Router和App Router两种场景处理，核心思路是确保页面/组件挂载完成后，根据URL的hash值定位到对应子元素。

一、Pages Router 方案 #

在Pages Router中，可以通过useRouter钩子监听URL的hash变化，结合useEffect在组件挂载后执行滚动逻辑：

import { useRouter, useEffect } from 'next/router';

export default function StorePage() {
  const router = useRouter();

  useEffect(() => {
    // 处理初始加载和路由切换时的hash
    const scrollToAnchor = () => {
      const hash = router.hash;
      if (!hash) return;

      // 去掉hash开头的#
      const targetId = hash.slice(1);
      const targetElement = document.getElementById(targetId);
      
      if (targetElement) {
        // 滚动到目标元素，可配置平滑滚动
        targetElement.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
      }
    };

    // 初始加载时执行
    scrollToAnchor();
    // 监听路由hash变化
    router.events.on('hashChangeComplete', scrollToAnchor);

    // 清理监听
    return () => {
      router.events.off('hashChangeComplete', scrollToAnchor);
    };
  }, [router]);

  return (
    <div id="parent">
      <ChildComponent />
    </div>
  );
}

二、App Router 方案 #

在App Router中，使用next/navigation提供的useRouter钩子，结合useEffect监听hash变化：

'use client'; // 必须标记为客户端组件

import { useRouter, useEffect } from 'next/navigation';

export default function StorePage() {
  const router = useRouter();

  useEffect(() => {
    const scrollToAnchor = () => {
      const hash = window.location.hash;
      if (!hash) return;

      const targetId = hash.slice(1);
      const targetElement = document.getElementById(targetId);
      
      if (targetElement) {
        targetElement.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
      }
    };

    // 初始加载时执行
    scrollToAnchor();
    // 监听hash变化事件
    window.addEventListener('hashchange', scrollToAnchor);

    // 清理监听
    return () => {
      window.removeEventListener('hashchange', scrollToAnchor);
    };
  }, [router]);

  return (
    <div id="parent">
      <ChildComponent />
    </div>
  );
}

关键注意事项 #

• 确保子组件中的目标元素（如child1、child2）的ID在DOM中唯一且正确渲染，避免ID冲突。
• 如果子组件是客户端组件，需确保在hydration完成后再执行滚动逻辑（上述方案中的useEffect会在组件挂载后触发，已覆盖此场景）。
• 若需要更精细的滚动控制，可以调整scrollIntoView的参数，比如block: 'center'可以让目标元素居中显示。

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