React路由器向下滾動新頁面

我遇到了一個問題，使用react-router ^2.4.1，如果我向下滾動到我的主頁，然後轉到新頁面，它也會向下滾動，而不是在頂部（預期行爲）。React路由器向下滾動新頁面

我使用這個入門包：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> 
) 
}

來源

2016-06-20 Ilja

陣營路由器不包括滾動狀態管理2.0.0版本開始。

推薦的方法是使用react-router-scrollscroll-behavior裝飾路由器所看到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 
);

來源

2016-06-20 20:29:42 Interrobang

謝謝我有這個偉大的工作。只是想知道在路由X的頁面加載時是否有方法scrollToBottom。 –

@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))) }>

在你的頁面，你就需要用ID fooBottomDiv插入一個看不見的股利。如果你不想插入這樣一個div，那麼你可以讓customScroll返回一個2元素數組[x, y]，它可以是[0, Number.MAX_SAFE_INTEGER]滾動到底部。

文檔here

不過請注意，如果你的頁面有它加載數據，並顯示它的成分，它很可能會無法正常工作的customScroll功能只能呼籲路線匹配，而您的數據可能是異步調用並在路由匹配後收到。在這種情況下，這是最方便使用

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

在陣營的生命週期方法 componentDidMount和 componentDidUpdate

，你的組件將包含一個空div與ref屬性ref='fooBottomDiv。

來源

2017-04-26 14:09:07 MDH

React路由器向下滾動新頁面

回答

相關問題