Jac*_*ton 3 html javascript reactjs react-router
我的网站上有很多链接，但只有一个可以做到这一点。
而不是通过导航栏将我带到顶部，它只是进入内容的中间。知道为什么会这样吗？
它是一个.map经过 some的页面，它在页面下方JSON呈现div文本元素……如果有关系的话。
这是一些可能相关的代码。
路线
<Route exact path ="/reviews" component={Reviews} />
链接
<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>
Luz*_*uze 11
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'),
);
当路线改变时，您的应用现在应该自动重置它的滚动位置。
| 归档时间： |
|
| 查看次数： |
2183 次 |
| 最近记录： |