Next.js router.push携带锚点失效问题求助

我有一个/contracts页面，展示了条目列表，每个条目div都设置了唯一ID（示例：<div id="contract-3929" />）。点击条目会跳转到该条目的详情页/contracts/detail，详情页的返回按钮本应回到/contracts页面并滚动到对应条目。我使用以下代码实现返回：

const router = useRouter();
const goBackPage = () => {
    router.push(
      `/contracts#contract-${contract_id}`
    );
};

并且尝试添加scroll:false参数：

router.push(
      `/contracts#contract-${contract_id}`,
      undefined,
      { scroll: false }
);

但均无效，而其他页面使用相同逻辑却能正常工作，想询问这是否为正确的实现方式？

你的核心思路是正确的——通过路由锚点实现返回后定位到目标条目，但在Next.js（从useRouter判断你使用的是Next.js）中，部分场景下默认的锚点滚动可能失效，以下是具体分析和解决方案：

为什么当前代码无效？ #

1. scroll: false的反向影响：你添加的scroll: false会禁止路由跳转后的所有自动滚动行为，包括锚点定位的滚动，这反而会阻止你想要的效果，应该移除这个参数（或显式设置scroll: true）。
2. 页面渲染时机问题：如果/contracts页面是静态生成或服务端渲染的，当从详情页返回时，页面的DOM元素可能还未完全加载完成，此时锚点找不到对应的元素，滚动自然失效。
3. 路由缓存的干扰：Next.js的路由缓存机制可能导致返回/contracts时页面没有重新渲染，锚点的滚动逻辑无法触发。

可行的解决方案 #

方案1：在/contracts页面手动监听锚点并触发滚动 #

在列表页添加useEffect，监听路由变化，当检测到锚点时手动定位到目标元素：

// /contracts 页面代码
import { useRouter } from 'next/router';
import { useEffect } from 'react';

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

  useEffect(() => {
    const scrollToAnchor = () => {
      // 提取路由中的锚点
      const anchor = router.asPath.split('#')[1];
      if (!anchor) return;

      const targetElement = document.getElementById(anchor);
      if (targetElement) {
        // 平滑滚动到目标元素，也可以用targetElement.scrollIntoView()
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    };

    // 页面初始加载和路由完成变化时执行
    scrollToAnchor();
    router.events.on('routeChangeComplete', scrollToAnchor);

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

  // 页面其他渲染逻辑...
}

方案2：调整router.push的参数格式 #

改用对象形式传递路由参数，确保锚点被正确识别：

const goBackPage = () => {
  router.push(
    {
      pathname: '/contracts',
      hash: `#contract-${contract_id}`
    },
    undefined,
    { scroll: true } // 显式开启自动滚动，确保锚点生效
  );
};

方案3：检查自定义滚动容器 #

如果/contracts页面的列表是放在自定义滚动容器（比如设置了overflow: auto的div）中，而非全局body滚动，默认的锚点滚动会失效，此时需要找到滚动容器并手动滚动：

// 假设滚动容器的id是contract-list-container
const scrollContainer = document.getElementById('contract-list-container');
const targetElement = document.getElementById(`contract-${contract_id}`);
if (scrollContainer && targetElement) {
  scrollContainer.scrollTop = targetElement.offsetTop - scrollContainer.offsetTop;
}

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