Next.js中直接访问带锚点URL无法定位指定位置求助

直接访问带#锚点的URL时，浏览器会在页面完全渲染前尝试定位目标元素，但Next.js的客户端渲染/SSR机制可能导致目标元素尚未挂载，从而失效。以下是几种靠谱的解决方法：

1. 监听路由/页面加载事件，手动触发滚动 #

在目标页面（mypage）中添加监听逻辑，确保元素渲染完成后再执行滚动：

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

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

  useEffect(() => {
    const scrollToHash = () => {
      const hash = router.asPath.split('#')[1];
      if (!hash) return;
      
      const targetElement = document.getElementById(hash);
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
      }
    };

    // 页面初始加载时执行
    scrollToHash();
    // 监听客户端路由切换事件
    router.events.on('routeChangeComplete', scrollToHash);

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

  return (
    <div>
      {/* 页面其他内容 */}
      <div id="mydiv">需要定位的目标区域</div>
    </div>
  );
}

2. 处理动态加载的目标元素 #

如果目标元素依赖异步数据（比如API请求返回后才渲染），要等数据加载完成后再执行滚动：

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

export default function MyPage() {
  const router = useRouter();
  const [pageData, setPageData] = useState(null);

  useEffect(() => {
    // 模拟异步数据请求
    fetch('/api/my-data')
      .then(res => res.json())
      .then(data => {
        setPageData(data);
        // 数据加载完成后检查锚点并滚动
        const hash = router.asPath.split('#')[1];
        if (hash) {
          const target = document.getElementById(hash);
          target?.scrollIntoView({ behavior: 'smooth' });
        }
      });
  }, [router]);

  if (!pageData) return <div>加载中...</div>;

  return (
    <div>
      <div id="mydiv">依赖异步数据的目标区域</div>
    </div>
  );
}

3. Next.js 13+ App Router 适配方案 #

使用App Router时，用usePathname监听路径变化：

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

export default function MyPage() {
  const pathname = usePathname();

  useEffect(() => {
    const hash = window.location.hash.slice(1);
    if (hash) {
      const target = document.getElementById(hash);
      target?.scrollIntoView({ behavior: 'smooth' });
    }
  }, [pathname]);

  return (
    <div>
      <div id="mydiv">App Router下的目标区域</div>
    </div>
  );
}

4. 禁用默认滚动恢复（可选） #

如果Next.js默认的滚动恢复机制干扰锚点定位，可在next.config.js中关闭：

module.exports = {
  scrollRestoration: false,
};

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