使用开关(react-router)时滚动到顶部
当从一个页面导航到另一个页面时,我希望用户自动滚动到顶部,即scrollTo(0, 0)
。使用开关(react-router)时滚动到顶部
根据react-router
docs on scroll restoration建议的方法是设置一个组件ScrollToTop
并在此范围内包裹您的路线。
虽然这种工作得很好,并且用户滚动到顶部嵌套在ScrollToTop
组件内的任何途径,如果该组件被放置在Switch
部件内时,Switch
不起作用像交换机不再;这意味着它将呈现所匹配的所有路线而不是第一条路线。
或者,将ScrollToTop
放在Switch
之外,它不再将用户滚动到顶部。
版本:react-router-v4
我有什么,我做的是每当更新将采取用户到scrollTo(0,0)
<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
...
</Router
如果上述方法无效同一个问题:
在react-router-v4scroll Restoration
这是s traightforward与将滚动窗口上的每个导航组件来处理,确保包装在withRouter给它接入到路由器的道具:
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0)
}
}
render() {
return this.props.children
}
}
然后在您的应用程序的顶部渲染,但下面路由器
const App =() => (
<Router>
<ScrollToTop>
<App/>
</ScrollToTop>
</Router>
)
上面的代码是从阵营,路由器web guides
复制我不知道具体的左右滚动,但你可以附加一个侦听browserHistory
这可能是一个简单的方法来做到这一点(我不 认为onUpdate
作品与V4):
const browserHistory = createBrowserHistory();
browserHistory.listen((location, action) => {
window.scrollTo(0, 0);
});
<Router history={browserHistory} />
谢谢!这正是我需要的。 – Yuschick
我管理这个使用react-router-v4
滚动恢复和放置ScrollToTop的Switch
之外来解决。还请记住使用withRouter
,否则它将无法工作。
多数民众赞成多少正是我在我的帖子后面提出的使用滚动恢复'withRouter',很高兴知道它解决了 – Aaqib
我的问题是与'你没有包括的开关'。但现在一切都很好,谢谢。 –
这个工作在v4上吗? –
onUpdate不适用于v4,我已用其他解决方案更新 – Aaqib
其他解决方案与我的经验无关,正如我在原始文章中所解释的。 –