如何在第二次及之后pathname变化时触发useEffect实现页面滚动

要实现「首次访问显示Hero区块，后续页面切换自动滚动到Hero下方」的需求，核心是区分首次页面加载和后续路由切换两种场景，修改后的代码如下：

import { useLocation, useEffect, useRef, useState } from 'react';

// 组件内部代码
const { pathname } = useLocation();
const paragraphRef = useRef(null);
const [isFirstLoad, setIsFirstLoad] = useState(true);

useEffect(() => {
  // 首次加载时，仅标记状态为非首次，不执行滚动
  if (isFirstLoad) {
    setIsFirstLoad(false);
    return;
  }

  // 后续路由切换时，执行滚动逻辑
  if (paragraphRef.current) {
    window.scroll({
      top: paragraphRef.current.offsetTop,
      behavior: "smooth",
      block: "start"
    });
  }
}, [pathname, isFirstLoad]);

关键逻辑说明 #

• 用isFirstLoad状态标记是否为首次加载，初始值设为true
• 首次触发useEffect时（对应页面首次加载），只更新状态为false，直接返回不执行滚动
• 后续每次路由切换（pathname变化）时，因为isFirstLoad已经是false，就会执行滚动到目标区块的逻辑
• 额外加了paragraphRef.current的判断，避免DOM节点未挂载时出现报错

内容的提问来源于stack exchange，提问作者het.oosten