Question

使用React Router 4中的browserHistory以编程方式导航到锚：

import { withRouter } from 'react-router-dom'
...
props.history.push('#blah')

我可以在地址栏中看到哈希值发生变化，但页面不会滚动到相关的锚点。我用标准<a href="#blah">Blah</a>检查了它，这很好用。知道我做错了什么吗？谢谢:)

UPDATE
刚检查过，<Link to="#blah">Blah</Link>也不起作用......我假设反应Links也使用历史对象吗？

Answer 1

经过一番调查后，我决定添加一个函数来处理componentDidUpdate生命周期事件：

componentDidUpdate: props => {
  const selected = props.history.location.hash
  if(selected && selected.length > 0) {
    const elem = document.getElementById(selected)
    elem && elem.scrollIntoView()
  }
}

这很好地解决了这个问题：）

React Router browserHistory push和anchors

1 个答案: