在浏览器后退按钮上滚动到顶部单击反应

Question

每当我的项目 url 发生变化（以及页面重新加载）时，我都需要滚动到顶部。

一切正常，但浏览器后退按钮出现问题。即使路径名发生变化，页面也不会像它应该的那样滚动到顶部，它适用于所有其他情况（页面重新加载和常规 link 导航）。

我试图反驳为后退按钮创建自定义挂钩的做法，但它的行为并不如我所愿。我还尝试了很多其他的东西，但对于浏览器后退按钮似乎没有任何效果

import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";

const ScrollToTop = () => {
  const { pathname } = useLocation();

  const useBackButton = () => {
    const [isBack, setIsBack] = useState(false);
    const handleEvent = () => {
      setIsBack(true);
    };
    useEffect(() => {
      window.addEventListener("popstate", handleEvent);
      return () => window.removeEventListener("popstate", handleEvent);
    });
    return isBack;
  };

  const backButton = useBackButton();
  console.log(backButton);

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname, backButton]);

  useEffect(() => {
    window.onbeforeunload = () => {
      window.scrollTo(0, 0);
    };
  }, []);

  return null;
};

export default ScrollToTop;

Answer 1

我认为 beforeunload 事件在这里不是必需的，但无论如何都会包含它。您可以使用 useNavigationType 挂钩来明确检查 POP 事件类型，而不是对“popstate”事件使用事件侦听器。

注意：对beforeunload事件使用window.addEventListener，这样你就不会pollute/mutate [=16] =]对象.

示例：

import { NavigationType, useLocation, useNavigationType } from "react-router-dom";

const useBackButton = () => {
  const navType = useNavigationType();
  return navType === NavigationType.Pop;
};

const useScrollToTop = () => {
  const { pathname } = useLocation();

  const isPop = useBackButton();

  const scrollToTop = () => window.scrollTo(0, 0);

  useEffect(() => {
    scrollToTop();
  }, [pathname, isPop]);

  useEffect(() => {
    window.addEventListener("beforeunload", scrollToTop);
    return () => {
      window.removeEventListener("beforeunload", scrollToTop);
    };
  }, []);
};

用法：

function App() {
  useScrollToTop();

  return (
    ...
  );
}

在浏览器后退按钮上滚动到顶部单击反应

Scroll to top on browser back button click react

javascript

reactjs

react-router-dom