【问题标题】:props.history.push('/') does not go to top of page (need functional component)props.history.push('/') 没有转到页面顶部(需要功能组件)
【发布时间】:2021-03-03 10:29:48
【问题描述】:

我正在使用 React 构建一个网站,用户单击一个按钮进行注册。在该按钮的回调中,我使用props.history.push('/') 重定向到主页。

在注册页面中,他们必须稍微向下滚动,并且他们在页面上的位置会延续到主页。还有其他方法可以重定向到页面顶部吗?

【问题讨论】:

标签: reactjs


【解决方案1】:

下面的解决方案示例展示了如何使用它。这将使窗口在整个应用程序中自动滚动到顶部。信用未知 - 我从这里的某个地方得到它。

React 组件 - ScrollToTop:

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

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

    return null;
}

export default withRouter(ScrollToTop);

显示我如何在我的应用中使用它的照片:

【讨论】:

  • 谢谢!其他链接的问题使用类而不是功能组件,所以我认为这很有帮助并增加了价值,尽管问题可能仍然是重复的......
  • 虽然这似乎以某种方式覆盖了我的路由,也许这是我的设置,但是当我使用 react-router-dom 中的链接时,它似乎在快速切换到链接页面后将我送回主页
  • @EricHB - 我们必须查看您的代码。但是,我看不出与此相关的任何事情会导致该问题。我在我的应用程序中使用 Link 就好了。实际上,我使用相同的完全相同代码的两个应用程序都可以正常工作。
猜你喜欢
  • 2012-10-04
  • 2021-09-23
  • 2013-11-02
  • 1970-01-01
  • 1970-01-01
  • 2020-03-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多