reactjs - 为什么 react-router-dom 滚动到顶部不起作用？

Question

我一直有这个问题，当我有一个很长的内容页面时，当导航到时，它会一直向下滚动，所以我需要一种方法来在每次导航时向上滚动窗口。我在谷歌上进行了研究，甚至使用了 react-router-dom 文档组件，但到目前为止没有任何效果。

我很高兴能得到一些关于如何解决这个问题的线索。

谢谢！

• ScrollToTop 组件

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

export default function ScrollToTop() {
  const { pathname } = useLocation();

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

  return null;
}

• App.js 组件

function App() {
  return (
    <>
      <Router>
        <NavBar />
        <ScrollToTop />

        <Switch>
          <Route exact path="/" component={MainPage} />
          <Route exact path="/contracts" component={ContractPage} />
          <Route exact path="/areas" component={AreasPage} />
          <Route exact path="/about" component={AboutPage} />
          <Route exact path="/gallery" component={GalleryPage} />
          <Route exact path="/get-a-quote" component={GetAQuotePage} />
          <Route
            exact
            path="/insulated-garden-room"
            component={GardenRoomPage}
          />
          <Route exact path="/erecting-fence" component={FencePage} />
          <Route
            exact
            path="/garden-storage-shed"
            component={GardenStoragePage}
          />
          <Route
            exact
            path="/bathroom-renovation"
            component={BathRenovationPage}
          />
          <Route exact path="/roof-cleaning" component={RoofCleaningPage} />
          <Route
            exact
            path="/painting-decoration"
            component={PaintingDecorationPage}
          />
          <Route
            exact
            path="/flooring-tiles-instalation"
            component={FlooringTilesPage}
          />
          <Route exact path="/eletical-services" component={EletricalPage} />
          <Route
            exact
            path="/heating-plumbing"
            component={HeatingPlumbingPage}
          />

          <Route component={NotFound} />
        </Switch>
        <Footer />
      </Router>

      <GlobalStyles />
    </>
  );
}
export default App

OBS：所有路线都运行良好。

标签： reactjsroutesreact-routerreact-router-dom