Skip to content

Latest commit

 

History

History
53 lines (36 loc) · 1.38 KB

1905 react router의 link 태그 사용시 특정 함수 호출.md

File metadata and controls

53 lines (36 loc) · 1.38 KB

Issue: 모바일에서 react router의 link를 사용했을 때 상단으로 올라가게 해야하는 상황

상황:

모바일 웹에서 react router의 Link 태그를 클릭했을 때 window.scrollTo(0.0)을 사용해야하는 상황


생각해낸 방안:

  • button으로 감싸야 하나 고민을 잠시...
  • Link 자체에 마련해 놓은 속성을 확인

방안: button으로 감싸기 (실패)


링크 태그 자체가 a태그와 같이 default로 동작하기 때문에, wrapping 하는거는 최후의 수단으로 생각하기로 했다.



방안: Link 자체에 마련해 놓은 속성을 확인 (성공)


react router 문서에 너무나 친절하게 innerRef: function이라는 속성을 소개하고 있다. 이전에 link의 state 값을 사용해서 이전에 보던 페이지로 돌아가는 기능을 구현해본 적이 있어서 바로 떠올릴 수 있었다!




    참조:
    https://reacttraining.com/react-router/web/api/Link/innerref-function