Scroll Restoration 리액트 Link 이동시 스크롤 위치 문제

Scroll Restoration 이라고 부르는 React에서 스크롤 위로 올라가게 하는 법

https://v5.reactrouter.com/web/guides/scroll-restoration 

Home v6.14.2

 

 

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
    const { pathname } = useLocation();

    useEffect(() => {
        window.scrollTo(0, 0);
    }, [pathname]);

    return null;
};

 

ScrollToTop이라는 컴포넌트를 만들어 주고, 아래처럼 index.js에 이 컴포넌트를 넣어 주면 해결된다.

...
import ScrollToTop from "./components/common/ScrollToTop";

ReactDOM.render(
  <BrowserRouter>
    <ScrollToTop />
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

 

 

출처 

https://dazzlynnnn.tistory.com/entry/React-Link%EB%A1%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99-%EC%8B%9C-%EB%A7%A8-%EC%9C%84%EB%A1%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4