리엑트 라우터 스크롤 복구

2020년 3월 23일
  • 리엑트
  • 자바스크립트

라우터 사용하여 네비게이션을 사용하면 스크롤이 복구 되지 않는 문제점이 있어서 찾아본 코드입니다.

handle with a component that will scroll the window up on every navigation

class ScrollToTop extends React.Component {
  componentDidUpdate(prevProps) {
    if (
      this.props.location.pathname !== prevProps.location.pathname
    ) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return null;
  }
}

export default withRouter(ScrollToTop);

위 코드를 추가후 Router 내부를 감싸주면 해결이 된다.