我的网站上有很多链接，但只有一个可以执行此操作。
它没有将我带到导航栏的顶部，而是转到内容的中间。知道为什么会这样吗？
这是一个页面，其中有一个.map经历一些JSON，这是渲染div页面下方的文本元素...如果重要的话。
这是一些可能相关的代码。
路线
<Route exact path ="/reviews" component={Reviews} />
The Link
<Link to="/reviews">
<ViewAllBtn>View All</ViewAllBtn>
</Link>
着陆页（位于中间而不是顶部）
<MotherDiv>
<NavBar />
<Prompt>
<PromptHead>Customer Reviews</PromptHead>
<PromptBody>Heres what our loyal customers think of Heavenly Details.</PromptBody>
</Prompt>
<ReviewsDiv>
{reviews.map(review =>
<ReviewDiv key={review.name}>
<Name>{review.name}</Name>
<Body>{review.body}</Body>
</ReviewDiv >
)}
</ReviewsDiv>
<Footer />
</MotherDiv>
react-router当 URL 更改时呈现一个新组件，而不是硬刷新页面。这有一个令人讨厌的副作用，它会记住您当前的滚动位置，并且当页面更改时不会自动滚动回页面顶部。
我想根据你的问题的声音，这可能是这里的问题。如果是的话，那么很容易用一个简单的方法来解决这个问题higher order component:
class ScrollToTop extends Component {
componentDidUpdate(prevProps) {
const { location } = this.props;
if (location.pathname !== prevProps.location.pathname) {
window.scrollTo(0, 0);
}
}
render() {
const { children } = this.props;
return children;
}
}
export default withRouter(ScrollToTop);
将此组件包裹在您的周围App像这样：
render(
<ScrollToTop>
<App />
</ScrollToTop>,
document.getElementById('app'),
);
当路线发生变化时，您的应用程序现在应该自动重置其滚动位置。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
