リアクションルータが新しいページをスクロールする

Question

react-router ^2.4.1を使用して問題が発生しました。ホームページを下にスクロールした後、新しいページに移動すると、スクロールしてトップになる（予想される動作） 。私は、このスターターパック使用しています

：react-webpack-nodeを、私のroutes.jsxこの

import React from 'react' 
import { Route, IndexRoute } from 'react-router' 
import cookie from 'react-cookie' 

import App from 'containers/App' 
import HomePage from 'containers/HomePage' 
import WaitingListPage from 'containers/WaitingListPage' 
import NotFoundPage from 'containers/NotFoundPage' 
import SupportPage from 'containers/SupportPage' 

/* 
* @param {Redux Store} 
* We require store as an argument here because we wish to get 
* state from the store after it has been authenticated. 
*/ 
export default (store) => { 
    const hasQueueToken = (nextState, replace, callback) => { 
    if (cookie.load('queueToken')) { 
     replace({ 
     pathname: `/waiting-list/${cookie.load('queueToken')}`, 
     state: { nextPathname: nextState.location.pathname } 
     }) 
    } 
    callback() 
    } 

    return (
    <Route path='/' component={App}> 
     <IndexRoute component={HomePage} /> 
     <Route path='/w_ref/:ref' component={HomePage} /> 
     <Route path='/waiting-list/:token' component={WaitingListPage} /> 
     <Route path='/waiting-list' onEnter={hasQueueToken} component={WaitingListPage} /> 
     <Route path='/support' component={SupportPage} /> 
     <Route path='/terms-and-conditions' component={TermsConditions} /> 
     <Route path='/privacy-policy' component={PrivacyPolicy} /> 
     <Route path='*' component={NotFoundPage} /> 
    </Route> 
) 
} 

Answer 1

のように見えますが、ルータは、バージョン2.0.0でスクロール開始状態の管理が含まれていません反応します。

import { applyRouterMiddleware, browserHistory, Router } from 'react-router'; 
import useScroll from 'react-router-scroll'; 

/* ... */ 

ReactDOM.render(
    <Router 
    history={browserHistory} 
    routes={routes} 
    render={applyRouterMiddleware(useScroll())} 
    />, 
    container 
); 

Answer 2

@John Trichereau：in this exampleを見られるように

推奨されるアプローチはscroll-behaviorがreact-router-scrollを使用してルータを飾るためにある一番下までスクロールし

をuseScrollへのコールバックを与えることによって行うことができ、あなたのコールバックが見えますlike：

function customScroll (prevRouterProps, location) { 
    // on route /foo scroll to bottom 
    if (location.pathname == '/foo') return 'fooBottomDiv'; 
    // on all other routes, follow useScroll default behavior 
    return prevRouterProps && location.pathname !== prevRouterProps.location.pathname; 
} 

このようなあなたのルータにそれをお尻：

<Router render={ applyRouterMiddleware(useScroll((prevRouterProps, { location }) => customScroll(prevRouterProps, location))) }> 

をあなたのページでは、ID fooBottomDivで目に見えないのdivを挿入する必要があります。そのようなdivを挿入したくない場合は、customScrollに2要素の配列[x, y]を返します。[0, Number.MAX_SAFE_INTEGER]は下にスクロールします。あなたのページには、データをロードし、それを表示するコンポーネントを持っている場合、あなたのデータは、おそらく非同期に呼び出されたのに対し、customScroll機能のみ、ルートマッチング時に呼ばれるように、それは最も可能性の高い動作しないことが

ドキュメントhere

注意をルートマッチングの後に受信される。この場合 は、それはあなたのコンポーネントがref属性ref='fooBottomDivと空のdivを含んでいるでしょうライフサイクルメソッドcomponentDidMountとcomponentDidUpdateを反応させるので

ReactDOM.findDOMNode(this.refs.fooBottomDiv).scrollIntoView({ behavior: 'smooth' }); 

を、使用することが最も便利です。