반응 라우터가 새로운 페이지를 아래로 스크롤

Question

react-router ^2.4.1을 사용하여 문제가 발생했습니다. 내 홈 페이지를 아래로 스크롤하면 나중에 새 페이지로 이동하여 맨 아래로 이동합니다 (예상되는 동작) . react-webpack-node을이

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부터 스크롤 상태 관리를 포함하지 않는 반작용처럼 내 routes.jsx 보인다 :

나는이 스타터 팩을 사용하고 있습니다.

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에 [x, y]의 2 요소 배열을 반환 할 수 있습니다. [0, Number.MAX_SAFE_INTEGER] 아래로 스크롤 할 수 있습니다.

문서 here

참고 그러나 페이지가 데이터를로드하고 표시하는 구성 요소가있는 경우 customScroll 기능 만 경로 일치에 호출로 데이터가 아마 비동기 적으로 호출되는 반면, 그것은 가장 가능성이 작동하지 않습니다 경로 일치 후 수신됩니다. 이 경우 , 그것은 구성 요소가 ref 속성 ref='fooBottomDiv와 함께 빈 DIV 포함됩니다 수명주기 방법 componentDidMount 및 componentDidUpdate 반응에

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

를 사용하는 것이 가장 편리합니다.