使用React Router强制执行scrollToTop行为

我希望在转换时将用户的滚动位置默认设置为页面顶部.

例如,单击页脚上的元素会将用户推入到页脚完全向下滚动的视图中.

是否可以选择设置所有过渡以从顶部显示新组件？

反应路由器版本<4

你也可以简单地onUpdate在你的喜欢中添加一个属性:

 window.scrollTo(0, 0)} history={history}>
  // routes

反应路由器版本4

在新的React Router版本中,您可以创建这样的ScrollToTop组件(根据此处的文档改编):

// ScrollToTop.js    
import React, {Component} from 'react'
import {withRouter} from 'react-router-dom'

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)

然后通过在BrowserRouter/Router组件下面添加它来使用它,如下所示:

// App.js
import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
import ScrollToTop from './ScrollToTop'

const App = () => (
  
    
      
      
      Home{' '}
      About
    
  
)

您需要导入scroll-behaviorlib,专为与反应路由器一起使用而设计.以下是您使用它的方式:

import createHistory from 'history/lib/createBrowserHistory';
import useScrollToTop from 'scroll-behavior/lib/useScrollToTop';

const history = useScrollToTop(createHistory)();

然后将history对象作为历史道具传递给您Router.

上面的代码片段 - 修改为导入useScrollToTop而不是useStandardScroll- 取自这里:https: //github.com/rackt/scroll-behavior