리액트 라우터 해시 링크 (React Router Hash Link)

페이지 내 목차 클릭 시 스크롤 이동하도록 만드려고 했는데 react-router-dom의 Link로는 해시 링크가 제대로 되지 않았다.

처음에는 id 값의 DOM을 찾아서 스크롤 값을 구하려고 했는데 리액트에서는 id값으로 DOM을 찾으려면 ref를 써야하는 것 같다. 일이 커지는 것 같아서 찾아보니 해시 링크를 위한 라이브러리가 있었다. (역시 삽질 전에는 뭐든지 선 구글링을 해야 한다.)  

React Router Hash Link를 적용해보니까 아주 잘 된다. 대만족!

설치하기

yarn이나 npm으로 설치한다.

$ yarn add react-router-hash-link
# OR
$ npm install --save react-router-hash-link

해시링크 사용하기

다음과 같이 HashLink를 사용할 수 있다. 

// In YourComponent.js
...
import { HashLink } from 'react-router-hash-link';
...
// Use it just like a RRv4/5 <Link> (to can be a string or an object, see RRv4/5 api for details)
<HashLink to="/some/path#with-hash-fragment">Link to Hash Fragment</HashLink>

목차 내 링크를 HashLink로 대체하니까 클릭 시 해당 아이디 값으로 자동 스크롤 이동이 된다. 굿굿.

smooth 하게 이동하기

이동 모션을 보고 싶다면 HashLink 컴포넌트에 smooth 속성을 추가해주면 된다.

import { HashLink } from 'react-router-hash-link';
<HashLink smooth to="/path#hash">
  Link to Hash Fragment
</HashLink>;

일단 넣어봤는데 그냥 내 취향에는 바로 바로 이동하는게 좋아서 다시 뺐다. 나중에 필요할 때 있으면 유용할 듯.

맨위로 이동하기

만약 맨위로 이동하고 싶다면 to 부분에 '#top' 혹은 그냥 '#'만 넣어주면 된다. 

import { HashLink } from 'react-router-hash-link';
<HashLink to="/path#top">Link to Top of Page</HashLink>
// or
<HashLink to="#top">Link to Top of Page</HashLink>