React單頁面應用使用antd的錨點跳轉失效

首先在react項目中引用antd的錨點javascript

import {Anchor} from 'antd';
const { Link } = Anchor;

<Anchor>
    <Link href="#components-anchor-demo-basic" title="Basic demo" />
    <Link href="#components-anchor-demo-static" title="Static demo" />
    <Link href="#API" title="API">
        <Link href="#Anchor-Props" title="Anchor Props" />
        <Link href="#Link-Props" title="Link Props" />
    </Link>
</Anchor>
//測試

<div id="components-anchor-demo-basic" style={{marginTop:"1000px"}}>
    dddd
</div>
<div id="components-anchor-demo-static" style={{marginTop:"2000px"}}>
    ffff
</div>

發現頁面進行跳轉而不是點位到頁面的錨點，發現url有所改變
解決辦法:加上location.hash能夠解決

<Anchor>
    <Link href={location.hash+"#components-anchor-demo-basic"} title="Basic demo" />
    <Link href={location.hash+"#components-anchor-demo-static"} title="Static demo" />
    <Link href="#API" title="API">
        <Link href="#Anchor-Props" title="Anchor Props" />
        <Link href="#Link-Props" title="Link Props" />
    </Link>
</Anchor>


React不引入antd如何實現錨點跳轉
代碼以下：

scrollToAnchor (id){
    document.getElementById(id).scrollIntoView(false);
}

render:

<div className="anchorLink">    <div className="navLink">        <ul>            <li>                <a href="javascript:;" onClick={()=>this.scrollToAnchor('Summarize')}>Summarize</a>            </li>            <li>                <a href="javascript:;" onClick={()=>this.scrollToAnchor('ProductFunction')}>ProductFunction</a>            </li>            <li>                <a href="javascript:;" onClick={()=>this.scrollToAnchor('ToHelpAnswer')}>ToHelpAnswer</a>            </li>        </ul>    </div></div><div id="Summarize" style={{marginTop:'100px'}}>點點滴滴</div><div id="ProductFunction"  style={{marginTop:'500px'}} >fffffffff</div><div id="ToHelpAnswer" style={{marginTop:'1000px'}}>wwwwwww</div>