리액트 Link로 라우터 이동시 페이지 최상단으로 이동하기

ScrollToTop.js 컴포넌트를 만들고

 

 

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;

}

useEffect를 이용하여 pathname이 변경될 때마다 스크롤 위치가 최상단으로 이동하도록 합니다.

만든 컴포넌트를 index.js 에서 BrowserRouter 사이에 추가해주었습니다.

 

 

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

    <React.StrictMode>

        <BrowserRouter basename={process.env.PUBLIC_URL}>

            <ScrollToTop />

            <App />

        </BrowserRouter>

    </React.StrictMode>

);

 

 

 

출처

https://han-py.tistory.com/455