React-router：滚动恢复不起作用

Question

当我更改 url 路径时，我试图将滚动位置恢复到页面顶部，但它不起作用。 我创建了一个 ScrollToTop 组件，它带有一个应该对路径更改做出反应的 useEffect()。然后我将组件导入到我的路由中，但没有任何改变，我不明白为什么。你有什么想法/建议吗？

ScrollToTop 组件：

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

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

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

  return null;
}

App.js：

...
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom"
import ScrollToTop from "./components/ScrollToTop"

function App() {
  return (
       <Router>
       <ScrollToTop />
        <Header></Header>
        <Switch>
          <Route path="/about">
            <About/>
          </Route>
          <Route path="/works">
            <Works />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
        <Footer></Footer>
      </Router>
  );
}

export default App;

Answer 1

您应该对每个路由页面使用ScrollToTop 组件。或者从App 组件传递道具。因为，App 只安装一次。为此，pathname 会发生变化，但不会影响 ui。你可以这样使用：

App.js

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useLocation
} from "react-router-dom"
import ScrollToTop from "./components/ScrollToTop"

function App() {
  const { pathname } = useLocation();

  return (
       <Router>
       <ScrollToTop pathName={pathname} />
        <Header></Header>
        <Switch>
          <Route path="/about">
            <About/>
          </Route>
          <Route path="/works">
            <Works />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
        <Footer></Footer>
      </Router>
  );
}

export default App;

ScrollToTop.js

export default function ScrollToTop(pathName) {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathName]);

  return null;
}