react router 페이지 상단으로 올리기

특정 버튼을 눌렀을 때, 페이지를 최상단으로 이동시키고 싶다. 그러나 react에서는 컴포넌트들로 UI가 나누어져있기 때문에 바로 구현하는 것이 어렵게 느껴진다. 하지만, 아래의 내용을 참고한다면 쉽게 구현할 수 있을 것이다. 추가적인 다른 react/nodejs 정보는 아래의 url을 참고하자.

 

[Web/nodejs] - nodejs 기초 총 정리

 

---

 

ScrollToTop

아래와같이 기본적으로 페이지 이동 시 우리는 리액트 라우터 라이브러리를 사용한다. 기본 개념을 애래에서 참고하자.

 

 [React] React Router 페이지 이동

 

 

리액트 라우터 를 활용해서 아래와 같이 페이지 이동을 하면, 스크롤이 최상위로 가지 않고 이동된 위치에 고정되는 현상이 발생한다. 

 

html 코드

import { Link } from "react-router-dom";

...

<ul id="gnb">
    <Link to="/home"><li>홈페이지</li></Link>
    <Link to="/detail"><li>세부영역</li></Link>
</ul>

...

 

a 태그 같은 경우는 화면을 새로고침을 해서 재렌더를 하지만, react router는 재렌더링 없이 이전의 스크롤 위치를 유지하면서 이동을 한다. 이러한 현상을 공식문서를 참고한 해결책을 적어보려 한다. 기본적으로 React Router 자체에서 제공해주는 기능은 없다고 한다. 그래서 약간의 코드를 작성하는 것이 필요하다.

 

 

ScrollToTop Component

페이지가 긴 경우에 페이지 이동 시 아래 페이지인 경우에, 스트롤을 최상위로 올리는 것이 필요하다. 이러한 경우에 아래와 같은 ScrollToTop component를 만들어주면된다.

 

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;
}

 

만약 React 16.8 이전 버전이라면, 함수형 컴포넌트가 아닌 아래와 같이 클래스형 컴포넌트로 만들어 주면된다.

 

import React from "react";
import { withRouter } from "react-router-dom";

class ScrollToTop extends React.Component {
  componentDidUpdate(prevProps) {
    if (
      this.props.location.pathname !== prevProps.location.pathname
    ) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return null;
  }
}

export default withRouter(ScrollToTop);

 

 

Router에 추가하기

첫 셋팅 시 router를 적어준 부분의 가장 윗부분에 아래와 같이 컴포넌트를 추가해 주기만 하면된다.

 

// 버전 6 이후버전
<Router>
  <ScrollToTop />
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="company" element={<Company />} />
  </Routes>
</Router>


// 버전 6 이전버전
<Router>
  <Fragment>
    <ScrollToTop />
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </Fragment>
</Router>

 

ScrollToTopOnMount

 만약 Tab 에 연결해서, 페이지의 내부의 컴포넌트만 이동이 일어나게 만드는 경우에는 페이지를 상위로 올릴 필요는 없다. 이러한 경우에는 아래와 같이 ScrollToTopOnMount Component를 만들어서 적용하려는 페이지의 상단에 넣어주기만 하면 된다.

 

import { useEffect } from "react";

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

  return null;
}

// Render this somewhere using:
// <Route path="..." children={<LongContent />} />
function LongContent() {
  return (
    <div>
      <ScrollToTopOnMount />

      <h1>Here is my long content page</h1>
      <p>...</p>
    </div>
  );
}

 

함수형이 아닌 클래스 형이라면 아래의 코드를 참고해서 넣어주면된다.

 

import React from "react";

class ScrollToTopOnMount extends React.Component {
  componentDidMount() {
    window.scrollTo(0, 0);
  }

  render() {
    return null;
  }
}

// Render this somewhere using:
// <Route path="..." children={<LongContent />} />
class LongContent extends React.Component {
  render() {
    return (
      <div>
        <ScrollToTopOnMount />

        <h1>Here is my long content page</h1>
        <p>...</p>
      </div>
    );
  }
}