如果使用 react-router
import { 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 this.props.children;
}
}
export default withRouter(ScrollToTop);
如果使用 umi
import { Component } from 'react';
import withRouter from 'umi/withRouter';
class Layout extends Component {
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0);
}
}
render() {
return this.props.children;
}
}
export default withRouter(Layout);
如果使用 React hooks 实现
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
export default () => {
const pathname = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return this.props.children;
};