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

원인

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;