以上答案目前对我来说都没用。事实证明，. scrollto并不像. scrollintoview那样广泛兼容。

在App.js中，我们在componentWillMount()中添加了

    this.props.history.listen((location, action) => {
            setTimeout(() => { document.getElementById('root').scrollIntoView({ behavior: "smooth" }) }, 777)
        })

这是唯一适用于我们的解决方案。 root是我们应用的ID。“平滑”行为并不适用于每个浏览器/设备。777的超时有点保守，但我们在每个页面上都加载了大量数据，所以通过测试，这是必要的。更短的237可能适用于大多数应用程序。

在反应路由有一个问题，如果我们重定向到新的路由，那么它不会自动带你到页面的顶部。

就连我也有同样的问题。

我只是将单行添加到组件中，它就像黄油一样工作。

componentDidMount() {
    window.scrollTo(0, 0);
}

参考:反应训练

我有一段时间也有同样的问题。添加窗口。scrollTo(0,0);到每个页面都是痛苦和冗余的。所以我添加了一个HOC，它将包装我所有的路由，它将留在BrowserRouter组件:

 <ScrollTop>
    <Routes />
  </ScrollTop>

在ScrollTopComponent内部，我们有以下内容:

import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";

const ScrollTop = (props) => {
  const { children } = props;

  const location = useLocation();

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

  return <main>{children}</main>;
};

export default ScrollTop;

我已经尝试过@sledgeweight解决方案，但它并不适用于某些视图。但是添加setTimeout似乎可以完美地工作。以防有人遇到和我一样的问题。下面是我的代码。

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

const ScrollToTop = () => {
    const { pathname } = useLocation()
    useEffect(() => {
        console.log(pathname)
        /* settimeout make sure this run after components have rendered. This will help fixing bug for some views where scroll to top not working perfectly */
        setTimeout(() => {
            window.scrollTo({ top: 0, behavior: 'smooth' })
        }, 0)
    }, [pathname])
    return null
}

export default ScrollToTop

在AppRouter.js中使用它

<Router>
    <ScrollToTop/>
    <App>
</Router>

这个解决方案既适用于功能组件，也适用于类基。

首先，我不喜欢每次重新渲染时滚动到顶部的想法，相反，我喜欢附加函数到特定的事件。

步骤#1:创建一个ScrollToTop函数

const scrollToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: "smooth",
    });
};

步骤2:在事件(如onClick)上调用此函数

onRowClick={scrollToTop()}
// onClick={scrollToTop()}
// etc...

你可以在路由器上这样做:

ReactDOM.render((
<Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}>
     <Route path='/' component={App}>
        <IndexRoute component={Home}></IndexRoute>
        <Route path="/about" component={About}/>
        <Route path="/work">
            <IndexRoute component={Work}></IndexRoute>
            <Route path=":id" component={ProjectFull}></Route>
        </Route>
        <Route path="/blog" component={Blog}/>
    </Route>
 </Router>
), document.getElementById('root'));

onUpdate={() =>窗口。scrollTo(0,0)}将滚动顶部。 更多信息请查看:codepen link