props.history.push('/') 没有转到页面顶部（需要功能组件）

Posted 2023-02-21

【中文标题】props.history.push(\'/\') 没有转到页面顶部（需要功能组件）

【英文标题】：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('/') 重定向到主页。

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

【问题讨论】：

推送后为什么不developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo？

我假设您使用的是 react-router。 react-router scroll to top on every transition

【参考方案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 就好了。实际上，我使用相同的完全相同代码的两个应用程序都可以正常工作。