javascript - 在每次转换时滚动到顶部 react-router-dom v6

Question

我正在尝试使用 react-router dom v6 在每个页面更改的顶部滚动。代码只在我的主页上滚动回到顶部，而不是在我的 Angular 色详细信息页面上。我尝试了很多解决方案，但无法让它们发挥作用。我正在使用 "react-router-dom": "^6.2.2",

这是我到目前为止所取得的成就:

ScrollToTop.js:

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

export default function ScrollToTop({ children }) {
    const { pathname } = useLocation();
    
    useEffect(() => {
        window.scrollTo(0, 0);
    }, [pathname]);
    
    return children;
}

我的 app.js

  <Router>
    <ScrollToTop>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/character/:char_id" element={<CharacterDetail />} />
        <Route path='*' element={<PageNotFound />} />
      </Routes>
      <Footer />
    </ScrollToTop>
  </Router>

我还尝试使用“window.scrollTo(0, 0);”直接制作我的组件并在我的 useEffect 中滚动到一个 ID 但没有成功。感谢您的指导。

Answer 1

这似乎也取决于浏览器，一些浏览器开始自行处理“滚动恢复”(specs)。

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

export default function ScrollToTop({ children }) {
  const { pathname } = useLocation();
  
  useEffect(() => {
    const canControlScrollRestoration = 'scrollRestoration' in window.history
    if (canControlScrollRestoration) {
      window.history.scrollRestoration = 'manual';
    }

    window.scrollTo(0, 0);
  }, [pathname]);
  
  return children;
}

附注:我不会将子组件传递给该组件，而是将其渲染为 App 的同级组件，这样它就不会在位置更改时触发重新渲染，除非有必要:

<Router>
  <ScrollToTop />
  <App />
</Router>