对于较小的应用程序，有1-4个路由，你可以尝试用#id重定向到顶部DOM元素，而不仅仅是一个路由。这样就不需要在ScrollToTop或使用生命周期方法中包装路由。

我唯一的解决方案是在每个文件中添加一行代码，例如:

import React from 'react';
const file = () => { document.body.scrollTop = 0; return( <div></div> ) }

这是另一种方法。

对于react-router v4，您还可以以以下方式将侦听器绑定到历史事件中的change:

let firstMount = true;
const App = (props) => {
    if (typeof window != 'undefined') { //incase you have server-side rendering too             
        firstMount && props.history.listen((location, action) => {
            setImmediate(() => window.scrollTo(0, 0)); // ive explained why i used setImmediate below
        });
        firstMount = false;
    }

    return (
        <div>
            <MyHeader/>            
            <Switch>                            
                <Route path='/' exact={true} component={IndexPage} />
                <Route path='/other' component={OtherPage} />
                // ...
             </Switch>                        
            <MyFooter/>
        </div>
    );
}

//mounting app:
render((<BrowserRouter><Route component={App} /></BrowserRouter>), document.getElementById('root'));

如果点击链接改变了路由，那么没有setimmediation()，滚动级别也会被设置为0，但是如果用户在浏览器上按下后退按钮，那么它将不起作用，因为浏览器在按下后退按钮时手动将滚动级别重置到上一个级别，所以通过使用setimmediation()，我们使我们的函数在浏览器完成重置滚动级别后执行，从而给我们提供了预期的效果。

我的申请也遇到了同样的问题。使用下面的代码片段可以帮助我在单击下一个按钮时滚动到页面顶部。

<Router onUpdate={() => window.scrollTo(0, 0)} history= {browserHistory}>
...
</Router>

然而，在浏览器返回时，这个问题仍然存在。经过大量的尝试，我意识到这是因为浏览器窗口的历史对象，它有一个属性scrollRestoration被设置为auto。将此设置为手动解决了我的问题。

function scrollToTop() {
    window.scrollTo(0, 0)
    if ('scrollRestoration' in history) {
        history.scrollRestoration = 'manual';
    }
}

<Router onUpdate= {scrollToTop} history={browserHistory}>
....
</Router>

反应16.8 + 如果你正在运行React 16.8+，这是一个简单的处理组件，它会在每个导航中向上滚动窗口: 这是scrollToTop.js组件

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

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

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

  return null;
}

然后在应用程序的顶部渲染它，但在路由器下面 这是在app.js中

import ScrollToTop from "./scrollToTop";

function App() {
  return (
    <Router>
      <ScrollToTop />
      <App />
    </Router>
  );
}

或者在index.js中

import ScrollToTop from "./scrollToTop";

ReactDOM.render(
    <BrowserRouter>
        <ScrollToTop />
        <App />
    </BrowserRouter>
    document.getElementById("root")
);

我想把我的解决方案分享给那些正在使用react-router-dom v5的人，因为这些v4解决方案中没有一个对我有用。

解决我的问题是安装react-router-scroll-top，并将包装器放在<App />中，如下所示:

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

就是这样!它工作!