React-router锚点跳转的解决方案

本文记录了使用react的时候想要实现锚点跳转的解决方案。

传统解决方案

<a href="#scroll">
    <button className="button">
        <i className="text">跳转</i>
    </button>
</a>
<div>
    <a name="scroll"></a>
    <p>跳到这里</p>
</div>

用这种传统的方式，如果是基于browserHistory，路径上加了hash值，但是并不会跳转到想要的锚点位置。

localhost:3000/demo#scroll

如果是基于hashHistory，虽然会跳转到想要的锚点位置，但是路径改变了。

localhost:3000/#/demo
=>
localhost:3000/#/scroll

基于browserHistory的解决方案

solugebefola提出的解决方案

scrollToAnchor() {
    let anchorName = this.props.location.hash;
    if (anchorName) {
        anchorName = anchorName.replace("#","");
        let anchorElement = document.getElementById(anchorName);
        if(anchorElement) { anchorElement.scrollIntoView(); }
    }
}

但是如果基于hashHistory的，就不能通过hash值来判断

基于hashHistory的解决方案

不能用hash值，那就只能通过query的方式来实现啦~

scrollToAnchor() {
    let anchorName = t.props.location.query.anchorName;
    if (anchorName) {
        let anchorElement = document.getElementById(anchorName);
        if(anchorElement) { anchorElement.scrollIntoView(); }
    }
}

Support

scrollIntoView