React router scrolls new page down

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.

Рекомендуемый подход украсить маршрутизатор с scroll-behavior использованием react-router-scroll как видно in this example:

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:

прокрутки вниз можно сделать, давая обратный вызов useScroll, ваш обратный вызов будет выглядеть например:

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; 
} 

и вы бы p задница его к маршрутизатору, как это:

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

В вашей странице, вам нужно будет вставить невидимый DIV с идентификатором fooBottomDiv. Если вы не хотите вставлять такой div, вы можете вернуть customScroll двухэлементный массив [x, y], который может быть [0, Number.MAX_SAFE_INTEGER] для прокрутки вниз.

Документация here

Однако обратите внимание, что если ваша страница содержит компонент, который загружает данные и отображает его, то, скорее всего, не работает, как функция customScroll вызывается только при согласовании маршрута, в то время как ваши данные, вероятно, вызывается асинхронно и получен после согласования маршрута. В этом случае наиболее удобно использовать

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

в React методы управления жизненным циклом componentDidMount и componentDidUpdate, где ваш компонент будет содержать пустой DIV с атрибутом refref='fooBottomDiv.