페이지 이동시 화면 맨위로 스크롤하기(스크롤 애니메이션 없이)

2022. 9. 12. 17:07·React
목차
  1. 원인
  2. 해결

원인

React-router-dom을 이용시 페이지를 이동할 때 마다 이전에  방문했던 페이지이면 스크롤의 위치가 마지막 위치에서 머무르는 현상 발생

페이지 이동시 항상 맨위에 스크롤이 위치해있게 하고 싶었다.

 

해결

ScrollTop 컴포넌트 생성 후 아래와 같이 코드를 작성한다. 페이지가 다를때 마다 

useEffect 내부 함수를 실행

import React, { useEffect } from 'react'
import { useLocation } from 'react-router';

const ScrollTop = () => {
  const location = useLocation();
  useEffect(() => {
    window.scrollTo(0, 0)
  }, [location])

  return null;
}

export default ScrollTop

 

ScrollTop컴포넌트를 Routes 상위 컴포넌트로 감싼다. (아래코드는 React-router-dom V6) 기준.

import React from 'react';
import './App.css'
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import Main from './pages/Main/Main';
import Service from './pages/Service/Service';
import Benefit from './pages/Benefit/Benefit';
import FeeInfo from './pages/FeeInfo/FeeInfo';
import Establishment from './pages/Establishment/Establishment';
import Header from './components/Header/Header';
import Map from './pages/Map/Map';
import ScrollTop from 'components/ScrollTop/ScrollTop';
import Footer from './components/Footer/Footer';
function App() {
  return (
    <div className="App">
      <BrowserRouter>
      <ScrollTop/>
        <Header/>
          <Routes>
            <Route path="/" element={<Main />} />
            <Route path="/service/*" element={<Service/>}/>
            <Route path="/benefit/*" element={<Benefit/>}/>
            <Route path="/fee-info/*" element={<FeeInfo/>}/>
            <Route path="/establishment/*" element={<Establishment/>}/>
            <Route path="/map" element={<Map/>}/>
            <Route path='/*' element={<Navigate to='/'/>}/>
          </Routes>
          <Footer/>
      </BrowserRouter>
    </div>
  );
}

export default App;
저작자표시 비영리 (새창열림)

'React' 카테고리의 다른 글

useRef  (0) 2023.01.24
useState 대신 useReducer를 사용?  (0) 2023.01.23
페이지 이동시 state를 동반하여 이동하기 (feat. useNavigate와 useLocation)  (0) 2022.09.12
useRef를 이용하여 외부 클릭시 DropDown 메뉴 사라지게 하기  (0) 2022.03.10
React-Hook  (0) 2021.01.18
  1. 원인
  2. 해결
'React' 카테고리의 다른 글
  • useState 대신 useReducer를 사용?
  • 페이지 이동시 state를 동반하여 이동하기 (feat. useNavigate와 useLocation)
  • useRef를 이용하여 외부 클릭시 DropDown 메뉴 사라지게 하기
  • React-Hook
king_hd
king_hd
웹 개발 공부를 위한 블로그입니다.
king_hd
웹 개발 기록
king_hd
전체
오늘
어제
  • 분류 전체보기
    • HTML
    • CSS
    • JS
    • Typescript
    • React
    • nodejs
    • Redux
    • Git
    • 오류모음
    • Webpack
    • 자료구조
    • 네트워크
    • Electron
    • 배포
    • Docker
    • 프로그래머스

블로그 메뉴

  • 홈

링크

공지사항

인기 글

태그

프론트엔드
const
TypeScript
let
코딩테스트
env파일 환경변수 인식
리덕스사가
인증서 자동갱신
react
웹개발
propertykey
JavaScript
https 인증서 발급
mysqld: can't open file: 'mysql.ibd' (errno: 0 - )
타입스크립트
자바스크립트
리덕스
TAVE
프로그래머스
next.js
ec2에 docker 설치
4차산업혁명동아리
Redux-saga
docker mysql workbench 연동하는 법
백엔드
웹퍼블리셔
docker
Redux
Hook
webpack

최근 댓글

최근 글

hELLO· Designed By정상우.v4.6.0
king_hd
페이지 이동시 화면 맨위로 스크롤하기(스크롤 애니메이션 없이)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.