codestates / codestates/Lollin-client

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

Open
#93 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

---

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

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





(

)}
/>
}
/>
}
/>

}
/>
}
/>
}
/>



);
}
```

**에러 핸들링을 위해 참고한 레퍼런스 링크**
[`https://reactrouter.com/web/guides/scroll-restoration`](url)

**기타 다른 문제**
*

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.