在第二次路径名更改时触发 useEffect

Question

当用户更改页面时，我想向下滚动到英雄块下方。到目前为止，我的 App.jsx 中有此代码：

const { pathname } = useLocation()
 const paragraphRef = useRef(null)
 useEffect(() => {
    window.scroll({
      top: paragraphRef.current.offsetTop,
      behavior: "smooth",
      block: "start"
    })
  }, [pathname])

问题是我希望英雄块在第一次访问时可见，然后在每个页面上触发向下滚动。

Answer 1

您可以使用状态变量来跟踪用户之前是否访问过该页面：

  const { pathname } = useLocation();
  const paragraphRef = useRef(null);
  const [hasVisited, setHasVisited] = useState(false);

  useEffect(() => {
    if (hasVisited && paragraphRef.current) {
      window.scroll({
        top: paragraphRef.current.offsetTop,
        behavior: "smooth",
        block: "start",
      });
    } else {
      setHasVisited(true);
    }
  }, [pathname, hasVisited]);

说明： 状态变量（hasVisited）：跟踪用户之前是否访问过该页面。最初，它是 false，这会阻止第一次访问时的滚动操作。