[React] route로 페이지 바꿀 때 page top으로 가도록 만드는 법

 

react-router-dom은 오직 route만 바꾸기 때문에 페이지 중간에 <Link>를 넣고 다른 페이지로 이동을 시키면 페이지 상단이 아닌 페이지 중간으로 이동이 된다. 

 

 

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
  
export default function GoToTop() {
  const routePath = useLocation();
  const onTop = () => {
    window.scrollTo(0, 0);
  }
  useEffect(() => {
    onTop()
  }, [routePath]);
  
  return null;
}

 

 

 

 

그래서 이렇게 GoToTop.js 파일을 만들어서 윈도우 0,0 위치로 이동시키는 function을 만들고, 이걸 필요한 파일에서 import 한 후 <div>과 </div> 사이 마지막 라인에 넣어주면 된다.  

 

import React from 'react'
import { Link } from 'react-router-dom';
import GoToTop from './GoToTop';


const About = () => {
    return (
        <div>
        <Link to='/'>
        <Button>Return to Homepage</Button>
        </Link>
        <GoToTop />
        </div>
    )
}
  
export default About

 

 

 

 

 

 

 

 

 

 

 

* 참고 geeksforgeeks.org

https://www.geeksforgeeks.org/how-to-make-your-page-scroll-to-the-top-when-route-changes/

How to make your page scroll to the top when route changes? - GeeksforGeeks