在每次转换时，将react-router滚动到顶部

这很hacky（但可以）：我只是添加

window.scrollTo（0,0）;

渲染（）;

我发现这ReactDOM.findDomNode(this).scrollIntoView()是可行的。我把它放在里面componentDidMount()。

render() {
    window.scrollTo(0, 0)
    ...
}

在不更改道具且未触发componentDidUpdate（）的情况下，这可能是一个简单的解决方案。

对于具有1-4条路由的小型应用程序，您可以尝试使用#id重定向到顶部的DOM元素，而不是仅通过一条路由来破解它。这样就无需将Routes包装在ScrollToTop中或使用生命周期方法。

使用React Router dom v4可以使用

创建一个scrollToTopComponent组件，如下所示

class ScrollToTop extends Component {
    componentDidUpdate(prevProps) {
      if (this.props.location !== prevProps.location) {
        window.scrollTo(0, 0)
      }
    }

    render() {
      return this.props.children
    }
}

export default withRouter(ScrollToTop)

或者，如果您使用的是标签页，请使用以下内容

class ScrollToTopOnMount extends Component {
    componentDidMount() {
      window.scrollTo(0, 0)
    }

    render() {
      return null
    }
}

class LongContent extends Component {
    render() {
      <div>
         <ScrollToTopOnMount/>
         <h1>Here is my long content page</h1>
      </div>
    }
}

// somewhere else
<Route path="/long-content" component={LongContent}/>

希望这有助于为更多的滚动恢复VIST有文档野兔反应路由器DOM滚动恢复

我想与正在使用的人分享我的解决方案，react-router-dom v5因为这些v4解决方案都没有为我完成工作。

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

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

就是这样！有效！

在下面的组件中 <Router>

只需添加一个React Hook（以防您不使用React类）

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

值得注意的是该onUpdate={() => window.scrollTo(0, 0)}方法已经过时。

这是React Router 4+的简单解决方案。

const history = createBrowserHistory()

history.listen(_ => {
    window.scrollTo(0, 0)  
})

<Router history={history}>

React Router v4的文档包含用于滚动还原的代码示例。这是他们的第一个代码示例，当页面导航到以下位置时，它可作为站点范围的解决方案：“滚动到顶部”：

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    return this.props.children
  }
}

export default withRouter(ScrollToTop)

然后将其呈现在您应用的顶部，但在路由器下方：

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

// or just render it bare anywhere you want, but just one :)
<ScrollToTop/>

^直接从文档复制

显然，这适用于大多数情况，但是还有更多关于如何处理选项卡式接口以及为何未实现通用解决方案的信息。

此答案用于旧代码，对于路由器v4 +，请检查其他答案

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

如果不起作用，则应查找原因。也在里面componentDidMount

document.body.scrollTop = 0;
// or
window.scrollTo(0,0);

您可以使用：

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

您可以添加一些标志，例如“ scrolled = false”，然后进行更新：

componentDidUpdate() {
  if(this.scrolled === false){
    window.scrollTo(0,0);
    scrolled = true;
  }
}