需要滚动才能在新页面加载时位于顶部 - 反应

Question

我有一个多页应用程序。我需要在遍历到新页面时自动实现滚动到顶部。我尝试了以下方法：

滚动到顶部.js它被放置在组件文件夹中

import React, { Component } from 'react';
import { withRouter } from 'react-router';
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)

和应用程序.js

import {Router} from 'react-router-dom'
import ScrollToTop from './common/components/ScrollToTop'
const Appnew = () => (
<Router>
<ScrollToTop>
<Appnew/>
</ScrollToTop>
</Router>
)
const App = (props) => {
{Appnew()}
}

这是行不通的。有什么建议吗？

Answer 1

你的hoc没有错。假设您的Appnew具有用Route封装的组件，它应该可以工作。

刚刚使用了您的hoc并准备了一个工作正常的演示。看一看。

Answer 2

你应该尝试改变这个

componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0)
}
}

由

componentDidMount() {
window.scroll({
top: 0,
left: 0
});
}

它将做什么，当组件安装时，它将滚动到顶部。

您也可以使用下面的事件来侦听 DOM，并在加载它时做任何您想做的事情

window.addEventListener('DOMContentLoaded', (event) => {
// Your code
});