スイッチ（反応ルータ）を使用している場合は上にスクロール

Question

あるページから別のページに移動するときに、ユーザーが自動的に上に移動するようにします。つまり、scrollTo(0, 0)です。

react-routerdocs on scroll restorationによれば、推奨する方法は、コンポーネントScrollToTopをセットアップし、これにルートをラップすることです。

これはうまく機能およびコンポーネントをSwitch構成要素内に配置されている場合、ユーザは、ScrollToTopコンポーネント内にネストされた任意の経路の上部にスクロールされている間、Switchはもはやスイッチのように機能しません。最初のルートの代わりに一致するすべてのルートをレンダリングすることを意味します。

また、Switchの外側にScrollToTopを置くと、ユーザーは上部にスクロールしなくなります。

バージョン：react-router-v4

Answer 1

私は上記の場合、それはscrollTo(0,0)

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

にユーザーがかかります更新されたなかった場合は常に動作しませんどのような同じ問題を持っていた：

でreact-router-v4scroll Restoration

これはsですそれをルータの小道具へのアクセス権を与えることをwithRouterでそれをラップすることを確認し、すべてのナビゲーション上のウィンドウをスクロールアップするコンポーネントで処理するtraightforward：

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

Answer 2

からコピーされた私は、特にスクロールについてはよく分からないが、あなたはこれを行う簡単な方法でもよいbrowserHistoryにリスナーを添付することができます私はしません ）V4とonUpdate作品だと思う：

const browserHistory = createBrowserHistory(); 

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

<Router history={browserHistory} /> 

Answer 3

私はreact-router-v4スクロール復元を使用してこの問題を解決するために管理し、Switchの外ScrollToTopを置きます。また、withRouterを使用することを忘れないでください。そうしないと動作しません。