[ Project4 / React ] 다른 페이지 특정 위치로 이동하기

같은 페이지에서  <a />를 이용하면 id가 페이지를 이동할 수 있다.

 

그런데 다른 페이지로 이동은 어떻게 될까?

 

 

같은 페이지의 경우 페이지가 로딩되면서 페이지만 이동하고 이동하는 기능이 사라진다.

 

 

scrollIntoView()

우리는 보통 페이지 이동을 위해서 다양한 scorll-  method를 사용한다.

window.scrollIntoView({
  behavior : 'smooth',
  block:'center'
})

 

 

Catch the Hash

맨 처음 말했듯이, <a />와 id를 활용해서 페이지를 이동한다.

<a />에 정보가 id 정보가 있으면 id='callMe' 이렇게 적으면 이쪽의 위치로 이동합니다.

<a href='/section#callMe' /> // a tag를 클릭하면, 하단에 있는 id 값으로 이동

(...)

<div id='callMe' >
 ...
</div>

 

 

id=''callMe' 값 추출

<a />를 클릭해 이동해 오면, URL https://...../section#callMe 이렇게 해서 이동해 온다.

그러면 그 위치로가기 위해서는 callMe 라는 string 정보만 필요하기 때문에 string 정보를 추출해야 한다.

substring() method

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substring

 

const location = useLocation(); // React-router-dom

useEffect(() => { // Scroll to the element with the matching ID
  const hash = location.hash;
  if (hash) {
    const element = document.getElementById(hash.substring(1)); // Remove '#' from hash
    if (element) {
      element.scrollIntoView({
        behavior: 'smooth',
        block:"center"
      });
    }
  }
}, [location]);

 

 

가장 중요한 거.

<Link />를 쓸 것.

<a />를 쓰면 안됨. 이유는 맨 처음 말한 부분에 힌트가 있음. 리로딩이 되기 때문.