路由更改时如何在不滚动 Reactjs 的情况下将页面置于顶部

Question

假设我们点击“关于我们”按钮，我们被定向到另一个页面，但它没有从顶部加载。我们必须自己向上滚动才能从头开始查看内容。现在我的代码就像首先被定向到不同的页面然后滚动到顶部一样工作。如何在不滚动的情况下将定向页面置于顶部。

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

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return (null);
}
export default withRouter(ScrollToTop);




      <BrowserRouter>
      <ScrollToTop />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </BrowserRouter>

Answer 1

React Router 的 Scroll Restoration 在官方文档中建议您创建一个组件来执行您所做的确切操作，并包装您想要此行为的每个页面组件。

他们建议您编写该组件的方式：

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

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

  return null;
}

另一种选择是不向useEffect 发送依赖数组，它的行为类似于componentDidMount：

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

  return null;
}