React 路由器向下滚动新页面答案

【问题标题】：React router scrolls new page downReact 路由器向下滚动新页面
【发布时间】：2016-06-20 19:13:34
【问题描述】：

我在使用 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>
  )
}

【问题讨论】：

标签： javascript reactjs redux react-router

【解决方案1】：

React Router 从 2.0.0 版本开始不包含滚动状态管理。

推荐的方法是使用react-router-scroll 用scroll-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
);

【讨论】：

谢谢我的工作很棒。只是想知道是否有办法在路由 X 的页面加载时滚动到底部。

【解决方案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;
}

你会像这样将它传递给你的路由器：

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

在您的页面中，您需要插入一个 ID 为 fooBottomDiv 的不可见 div。如果你不想插入这样的 div，那么你可以让 customScroll 返回一个 2 元素数组 [x, y] 可以是 [0, Number.MAX_SAFE_INTEGER] 滚动到底部。

文档here

但是请注意，如果您的页面有一个加载数据并显示它的组件，它很可能无法工作，因为 customScroll 函数仅在路由匹配时调用，而您的数据可能在路由匹配后被异步调用并接收. 在这种情况下，使用

是最方便的

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

在 React 生命周期方法 componentDidMount 和 componentDidUpdate 中，您的组件将包含一个带有 ref 属性 ref='fooBottomDiv 的空 div。

【讨论】：