React-router 페이지 이동시 페이지 최상단으로 자동 스크롤 하는 방법

React-router 페이지 이동시 페이지 최상단으로 자동 스크롤 하는 방법

React은 기본적으로 상태(state)를 유지하는 매커니즘을 취하고 있습니다. 

그래서 React-router를 이용하여 다른 페이지로 이동을 하였음에도 불구하고, 브라우저의 스크롤 위치가 페이지 최상단으로 초기화되지 않고, 이전의 스크롤 상태를 유지하는 문제가 나타나게 됩니다. 

이러한 문제를 해결하기 위한 방법은 다음과 같습니다. 

---

다음과 같은 컴포넌트를 하나 만들어줍니다. 

/* ScrollToTop.js */
import { Component } from "react";
import { withRouter } from 'react-router';


class ScrollToTop extends Component{

    componentDidUpdate(prevProps){
        if (this.props.location.path !== prevProps.location.path){
            window.scrollTo(0,0);
        }
    }

    render(){
        return this.props.children;
    }
}

export default withRouter(ScrollToTop);

만들어준 ScrollToTop 컴포넌트를 BrowserRouter 역할을 하는 컴포넌트에 import  해줍니다. 그리고 BrowserRouter 최상위를 import 한 컴포넌트 <ScrollToTop></ScrollToTop>로 감싸줍니다. 

---

References

• kimchanjung.github.io/programming/2020/06/25/react-scroll-top/