使用开关（react-router）时滚动到顶部

当从一个页面导航到另一个页面时，我希望用户自动滚动到顶部，即scrollTo(0, 0)。使用开关（react-router）时滚动到顶部

根据react-routerdocs on scroll restoration建议的方法是设置一个组件ScrollToTop并在此范围内包裹您的路线。

虽然这种工作得很好，并且用户滚动到顶部嵌套在ScrollToTop组件内的任何途径，如果该组件被放置在Switch部件内时，Switch不起作用像交换机不再;这意味着它将呈现所匹配的所有路线而不是第一条路线。

或者，将ScrollToTop放在Switch之外，它不再将用户滚动到顶部。

版本：react-router-v4

2017-10-21 Kevin Farrugia

我有什么，我做的是每当更新将采取用户到scrollTo(0,0)

<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}> 
    ... 
</Router

如果上述方法无效同一个问题：

在react-router-v4scroll Restoration

这是s traightforward与将滚动窗口上的每个导航组件来处理，确保包装在withRouter给它接入到路由器的道具：

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

    render() { 
    return this.props.children 
    } 
}

然后在您的应用程序的顶部渲染，但下面路由器

const App =() => (
    <Router> 
    <ScrollToTop> 
     <App/> 
    </ScrollToTop> 
    </Router> 
)

上面的代码是从阵营，路由器web guides

来源

2017-10-21 21:36:30 Aaqib

这个工作在v4上吗？ –

onUpdate不适用于v4，我已用其他解决方案更新 – Aaqib

其他解决方案与我的经验无关，正如我在原始文章中所解释的。 –

复制我不知道具体的左右滚动，但你可以附加一个侦听browserHistory这可能是一个简单的方法来做到这一点（我不认为onUpdate作品与V4）：

const browserHistory = createBrowserHistory(); 

browserHistory.listen((location, action) => { 
    window.scrollTo(0, 0); 
}); 

<Router history={browserHistory} />

来源

2017-10-21 22:25:09

谢谢！这正是我需要的。 – Yuschick

我管理这个使用react-router-v4滚动恢复和放置ScrollToTop的Switch之外来解决。还请记住使用withRouter，否则它将无法工作。

来源

2017-10-22 09:44:54

多数民众赞成多少正是我在我的帖子后面提出的使用滚动恢复'withRouter'，很高兴知道它解决了 – Aaqib

我的问题是与'你没有包括的开关'。但现在一切都很好，谢谢。 –

使用开关（react-router）时滚动到顶部

回答

相关问题