这就是我所做的:

useEffect(() => ref.current.scrollTo(0, 0));
const ref = useRef()

       return(
         <div ref={ref}>
           ...
         </div>
        )

这里还有另一种方法，它允许你选择你希望窗口滚动位置重置到的安装组件，而不需要大量复制ComponentDidUpdate/ComponentDidMount。

下面的例子是用ScrollIntoView()包装Blog组件，这样当Blog组件被挂载时，如果路由改变了，那么HOC的ComponentDidUpdate将更新窗口滚动位置。

你可以很容易地将它包裹在整个应用程序中，这样在任何路由改变时，它都会触发一个窗口重置。

ScrollIntoView.js

import React, { Component } from 'react';
import { withRouter } from 'react-router';

export default WrappedComponent => {
  class ResetWindowScroll extends Component {
    componentDidUpdate = (prevProps) => {
      if(this.props.location !== prevProps.location) window.scrollTo(0,0);
    }

    render = () => <WrappedComponent {...this.props} />
  }
  return withRouter(ResetWindowScroll);
}

Routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import App from '../components/App';
import About from '../components/pages/About';
import Blog from '../components/pages/Blog'
import Index from '../components/Landing';
import NotFound from '../components/navigation/NotFound';
import ScrollIntoView from '../components/navigation/ScrollIntoView';

 export default (
    <Route path="/" component={App}>
        <IndexRoute component={Index} />
        <Route path="/about" component={About} /> 
        <Route path="/blog" component={ScrollIntoView(Blog)} />
        <Route path="*" component={NotFound} />
    </Route>
);

上面的示例工作得很好，但是如果您已经迁移到react-router-dom，那么您可以通过创建一个封装组件的HOC来简化上面的示例。

同样，您也可以轻松地将它包装在您的路由上(只需将componentDidMount方法更改为上面编写的componentDidUpdate方法示例代码，以及使用withRouter包装ScrollIntoView)。

容器/ ScrollIntoView.js

import { PureComponent, Fragment } from "react";

class ScrollIntoView extends PureComponent {
  componentDidMount = () => window.scrollTo(0, 0);

  render = () => this.props.children
}

export default ScrollIntoView;

组件/ Home.js

import React from "react";
import ScrollIntoView from "../containers/ScrollIntoView";

export default () => (
  <ScrollIntoView>
    <div className="container">
      <p>
        Sample Text
      </p>
    </div>
  </ScrollIntoView>
);

所有的解决方案都谈论在componentDidMount或componentDidUpdate上添加滚动，但使用DOM。

我做了所有这些，但都没用。

所以我找到了另一种适合我的方法。

添加 componentDidUpdate(){窗口。scrollTo(0,0)} 在header中，我的是<Switch></Switch>元素。只要在应用里免费就行了。

我还发现了一些关于ScrollRestoration的东西，但我现在很懒。现在就用“DidUpdate”的方式吧。

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

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

以上所有的方法对我都不起作用——不知道为什么，但是:

componentDidMount(){
    document.getElementById('HEADER').scrollIntoView();
}

working，其中HEADER是HEADER元素的id

你可以用这样的东西。ReactDom是react的缩写。否则只需React即可。

    componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }

2019年5月11日更新React 16+

构造函数(道具){ 超级(道具) 这一点。childDiv = React.createRef() ｝ componentDidMount = () => this.handleScroll() componentDidUpdate = () => this.handleScroll() handleScroll = () => { Const {index, selected} = this.props If (index === selected) { setTimeout(() => { this.childDiv.current。scrollIntoView({behavior: 'smooth'}) }, 500) ｝ ｝