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

Posted 2023-05-07

【中文标题】路由更改时如何在不滚动 Reactjs 的情况下将页面置于顶部

【英文标题】：How to make page to the top when route changes without scrolling in Reactjs

【发布时间】：2021-10-21 08:29:42

【问题描述】：

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

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>

【参考方案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;

【讨论】：

如果您包含代码 sn-p 会是一个更好的答案。

这有必要吗？他们在我添加的文档中有一个很棒的代码示例

答案不应依赖外部资源。高质量的答案应该包括所有细节，通常高质量的答案通常会得到更好的投票。另一种看待它的方式是，如果链接出于某种原因（例如离线服务器）断开，那么您的回答毫无意义。