在使用react-router时会遇到奇怪的问题,比如当我们从首页进入详情页的时候,首页跳转到详情页,首页滚动的位置,进入到详情页的时候也会被记录下来,原因是由于共享了同一个history,所以对记录有所保留,这显然不符合我们的浏览习惯。
总结种解决方案:
方案一
<Router onUpdate={() => window.scrollTo(0, 0)} history={hashHistory}> <Route path="/" component={ App }> </Router>
方案二
class Protol extends React.Component { constructor(props) { super(props); } componentDidUpdate(prevProps) { if (this.props.location !== prevProps.location) { window.scrollTo(0, 0) } } render() { return ( <div> <Header/> {this.props.children} <Footer/> </div> ); } }