codestates / codestates/Lollin-client
[Error handling] 각 메뉴버튼 누르면 화면이 하단으로 이동하는 이슈
- 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.