[Error handling] 각 메뉴버튼 누르면 화면이 하단으로 이동하는 이슈

[Yeonlisa]

---

어떤 에러인가요?

• 불특정 페이지에서 각 메뉴버튼 누르면 화면이 하단으로 이동하는 이슈
  ex) 메인페이지 하단 위치에서 navbar의 다른메뉴로 이동하면 화면이 이동한 페이지의 하단으로 보여진다.

에러 핸들링 방법

• lollin-client/src/Scroll/ScrollToTop.js 파일 생성 후 ScrollToTop 함수를 작성(useEffect, useLocation),
• 이 함수를 export하여 App.js에도 넣어줌
  => 그 결과 어떤 위치에서도 메뉴버튼 누르면 그 해당 페이지로 넘어갈때 최상단에서부터 보여지게 처리되었다.
• lollin-client/src/Scroll/ScrollToTop.js 코드

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export default function ScrollToTop(){
    const { pathname } = useLocation();

    useEffect(() => {
        window.scrollTo(0,0); // x좌표0, y좌표0 부분으로 스크롤이 넘어가게 처리함
    }, [pathname]);

    return null;
}

App.js의 return 부분 코드

return (
    <div className="Container">
      <ScrollToTop />
      <Navbar
        toggle={toggle}
        loginOn={loginOn}
        setLoginOn={setLoginOn}
        signupOn={signupOn}
        setSignupOn={setSignupOn}
        isLogin={isLogin}
        setisLogin={setisLogin}
        setJwt={setJwt}
        jwt={jwt}
      />
      <SidebarDropdown
        isOpen={isOpen}
        toggle={toggle}
        loginOn={loginOn}
        setLoginOn={setLoginOn}
        signupOn={signupOn}
        setSignupOn={setSignupOn}
        isLogin={isLogin}
        setisLogin={setisLogin}
        setJwt={setJwt}
        jwt={jwt}
      />
      <Route
        exact
        path="/"
        render={() => (
          <MainPage
            handleSearchChange={handleSearchChange}
            handleSearchClick={handleSearchClick}
          />
        )}
      />
      <Route
        exact
        path="/champions/all"
        render={() => <ChampDB handleChampPriId={handleChampPriId} />}
      />
      <Route
        exact
        path="/champions/detail"
        // component={ChampDetail}
        // champPriId={champPriId}
        render={() => <ChampDetail champPriId={champPriId} />}
      />
      <Route exact path="/items/all" component={ItemsDB} />
      <Route
        exact
        path="/user/login"
        render={() => <Login history={history} />}
      />
      <Route
        exact
        path="/user/signup"
        render={() => <Signup history={history} />}
      />
      <Route
        exact
        path="/user/update"
        render={() => <Myinfo history={history} />}
      />
      <Route exact path="/userinfo" component={UserInfo}></Route>
      <FooterFixed />
    </div>
  );
}

에러 핸들링을 위해 참고한 레퍼런스 링크
https://reactrouter.com/web/guides/scroll-restoration

기타 다른 문제
*