React router 使用React路由器强制执行scrollToTop行为

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

例如，单击页脚上的

元素将用户推入向下滚动的视图中，页脚位于该视图中

---

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

您需要导入为react router设计的

滚动行为

库。以下是您如何使用它：

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

const history = useScrollToTop(createHistory)();

然后将

历史

对象作为历史道具传递给

路由器

上面的代码片段-修改为导入

useCollToTop

，而不是

useCollStandardScroll

-取自此处：

---

反应路由器版本 //路线

---

React路由器版本4

在新的React Router版本中，您可以创建如下ScrollToTop组件（改编自）：

//ScrollToTop.js
从“React”导入React，{Component}
从“react router dom”导入{withRouter}
类ScrollToTop扩展组件{
componentDidUpdate（prevProps）{
if（this.props.location！==prevProps.location）{
滚动到（0，0）
}
}
render（）{
返回{this.props.children}
}
}
使用路由器导出默认值（ScrollToTop）

然后将其添加到BrowserRouter/路由器组件的正下方以使用它，如下所示：

// 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>
)

//App.js
从“React”导入React，{Component}；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}
从“/ScrollToTop”导入ScrollToTop
常量应用=（）=>(
主页{'}
关于
)

如果您遵循React router docs（和Sia的答案），但发现自己有以下错误：

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.

尝试将ScrollToTop中的所有内容打包为一个

：

主页{'}
关于

您还应该在滚动到顶部的同时重置键盘焦点。我写了一篇文章来处理它：

// 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>
)

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.

<Router>
  <ScrollToTop>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Link to="/">Home</Link>{' '}
      <Link to="/about">About</Link>
    </div>
  </ScrollToTop>
</Router>