Javascript 反应路由器向下滚动新页面

我在使用react router ^2.4.1时遇到了一个问题，如果我在主页上向下滚动，然后转到一个新页面，它也会向下滚动，而不是在顶部（预期行为）

我正在使用这个初学者包：我的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>
  )
}

从“React”导入React
从“react router”导入{Route，IndexRoute}
从“反应cookie”导入cookie
从“容器/应用程序”导入应用程序
从“容器/主页”导入主页
从“容器/WaitingListPage”导入WaitingListPage
从“容器/NotFoundPage”导入NotFoundPage
从“容器/SupportPage”导入SupportPage
/*
*@param{Redux Store}
*我们在这里需要store作为参数，因为我们希望
*验证后存储中的状态。
*/
导出默认值（存储）=>{
const hasQueueToken=（nextState、replace、callback）=>{
if（cookie.load（'queueToken'））{
替换({
路径名：`/waiting list/${cookie.load（'queueToken'）}`，
状态：{nextPathname:nextState.location.pathname}
})
}
回调函数（）
}
返回(
)
}

React路由器不包括从2.0.0版开始的滚动状态管理

建议的方法是使用

react router scroll

使用

scroll行为装饰路由器，如图所示：

从“react Router”导入{applyRouterMiddleware，browserHistory，Router}；
从“react router scroll”导入UseColl；
/* ... */
ReactDOM.render(
,
容器
);
：

滚动到底部可以通过回调
usecroll
，您的回调如下所示：

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

在React lifecycle methods
componentDidMount
和
componentDidUpdate
中，您的组件将包含一个带有
ref
属性
ref='fooBottomDiv
的空div，谢谢，我的工作非常好。只是想知道是否有办法在route X的页面加载上滚动到底部。
<Router render={ applyRouterMiddleware(useScroll((prevRouterProps, { location }) => customScroll(prevRouterProps, location))) }>

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