반응 라우터에 앵커 태그를 만드는 방법은 무엇입니까?

Question

나는 라우팅을 위해 내부적으로 반응 라우터 (react-boilerplate) (3.4.0)를 사용하고 있습니다.

내가 가진 링크 만들려고 한 : A HREF = "# 앵커 태그를"<>를 </A>

나는 id=anchor-tag

와 사업부로 스크롤 할 것으로 예상 그것을 클릭하면 < A> 태그 대신 링크 구성 요소를 사용하는 경우에도 페이지 상단으로 스크롤 만합니다. 우리는 < A> 또는 < 링크>에 대해 신경 써야합니까?

반응 라우터에 앵커 태그는 어떻게 작성해야합니까? ,

import ReactDOM from 'react-dom'; 

... some more codez... 

componentDidUpdate() { 
    const anchor = this.props.location.hash.replace('#', ''); 

    if (anchor) { 
    const domElement = ReactDOM.findDOMNode(this.refs[hash]); 
    if (domElement) { 
     domElement.scrollIntoView(); 
    } 
    } 
} 

다음을 당신이, 당신이 ref 속성을 추가 할 필요가로 이동하려는 실제 요소 :

Answer 1

이 늦게 동안 일하지만 당신이 할 수있는 당신의 구성 요소에이를 추가 할 것입니다 수 이 같은 :

<a href="/about#my-anchor>Go To Anchor</a> 

: 링크 요소는 일반 링크처럼 보일 것입니다

<h1 ref="my-anchor">Hello World</h1> 

또는 반응 - 라우터 :

이 반응 라우터 2.6.1와 함께 작동

<Link key="my-anchor" to="/about#my-anchor">Go To Anchor</Link> 

-이 시점에서 이후 버전에 대해 확실하지.

희망이 도움이됩니다.

Answer 2

개선 대답 위 :

componentDidMount() { 
    const anchor = this.props.location.hash; 

    if (anchor) { 
    const domElement = document.querySelector(anchor); 
    if (domElement) { 
     domElement.scrollIntoView(); 
    } 
    } 
}