Question

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

例如，单击页脚上的<Link>元素会将用户推入视图中，该视图一直向下滚动，页脚位于其中。

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

Answer 1

反应路由器版本＆lt; 4

您也可以简单地向onUpdate添加<Router>属性，如下所示：

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

反应路由器版本4

在新的React Router版本中，您可以像这样创建一个ScrollToTop组件（改编自docs here）：

// 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-behavior lib，专为与反应路由器一起使用而设计。以下是您使用它的方式：

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

Answer 3

如果您按照React路由器文档（以及Sia的回答）发现自己有这个错误：

string

尝试将ScrollToTop中的所有内容包装成一个Invariant Violation: ScrollToTop.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.：

<div>

使用React Router强制执行scrollToTop行为

3 个答案: