使用React Router强制执行scrollToTop行为

Question

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

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

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

Answer 1

反应路由器版本<4

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

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

反应路由器版本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 <div>{this.props.children}</div>
  }
}

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 = () => (
  <Router>
    <ScrollToTop>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Link to="/">Home</Link>{' '}
      <Link to="/about">About</Link>
    </ScrollToTop>
  </Router>
)

Answer 2

您需要导入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