ToyProject(더다주) SrollToTop

프로젝트 진행 중 URL에 pathName이 바뀌어 페이지가 이동해도 스크롤이 위로 올라가지 않고 그 구간에 멈춰서 페이지가 이동.

아무래도 사용자가 사이트를 이용하는데 불편함을 느낄 수 있다고 판단해 스크롤이 위로 올가게끔 구현.

window.scrollTo(0,0)

스크롤을 위로 올리는 코드

// scrollToTop.tsx
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
const ScrollToTop = () => {
  const { pathname } = useLocation();
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
  return null;
};
export default ScrollToTop;

useEffect 와 useLocation을 사용했다. useLocation으로 pathname을 가져와 pathname이 바뀔때마다 스크롤이 위로 올라가게끔의 함수를 구현했다.

// Router
 <BrowserRouter>
      <Nav />
      <Search />
      <ScrollToTop />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/login" element={<AuthLogin />} />
        <Route path="/create" element={<AuthCreate />} />
        <Route path="/product" element={<Product />} />
        <Route path="/product/:pageId" element={<Detail />} />
        <Route path="/mypage" element={<MyPage />} />
        <Route path="/cart" element={<Basket />} />
        <Route path="/wishlist" element={<WishList />} />
      </Routes>
      <Footer />
    </BrowserRouter>

Router에 Routes에 코드를 넣어 전체 코드에서 실행하게끔 하였다.