[React] react hooks를 사용한 ScrollToTop / 페이지 이동 시 스크롤 상단으로 초기화

 

link to로 페이지를 이동하니 이전의 스크롤 위치 그대로 유지되어 이동되는 이슈가 생긴다.

 

 

클래스 컴포넌트로 만드는 방법도 있었지만

hooks를 이용하여 처리하는 방법이 더 편한 것 같아서 정리해 놓는다.

 

[ScrollToTop.js]

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return (null);
}

export default withRouter(ScrollToTop);

 

 

사용방법

<Router>
  <Fragment>
    <ScrollToTop />
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </Fragment>
</Router>

 

 

참고 : https://stackoverflow.com/questions/36904185/react-router-scroll-to-top-on-every-transition