Link to~로 페이지를 이동할 때에 스크롤의 위치가 전 페이지의 위치 그대로 있어서 해결법을 찾아 봤다. React Router 공식문서에서도 해결법을 소개하고 있는데 Scroll Restoration이라고 부르는가보다
Declarative routing for React apps at any scale | React Router
Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet.
reactrouter.com
ScrollToTop이라는 컴포넌트를 만들어 주고, 아래처럼 index.js에 이 컴포넌트를 넣어 주면 해결된다.
pathname을 인식할 수 있게 하려면 ScrollToTop 컴포넌트를 꼭 Router 안에 넣어 줘야 한다.
리액트 페이지 이동 맨 위 / 페이지 이동시 스크롤 유지 / React scrollRestoration / React-scroll top / 페이지 이동 시 항상 맨 위로 스크롤 이동하기 / 페이지 이동시 스크롤을 상단으로 초기화
반응형
'dev > react' 카테고리의 다른 글
| [React] 모바일에서 입력창 터치 시 확대 방지 (0) | 2021.11.22 |
|---|---|
| [React] 프로젝트에 구글폰트 적용하기 (0) | 2021.11.11 |
| [React] 모달 오픈 시 외부(배경) 스크롤 막기 (0) | 2021.11.11 |