[React] 리액트 라우터 해시링크(React Router Hash Link) 사용하기

 

 

react-router-dom을 사용하는 동안 부드러운 페이지 스크롤을 구현하는 것은 React.js에서의 문제였다. 

react-router-hash-link 패키지를 이용하여 부드러운 수직 스크롤을 구현해보자.

부드러운 스크롤은 웹 페이지를 더 유용하게 만들고 브라우저에서 더 나은 사용자 스크롤 경험을 제공하는 기능이다.

 

react-router-hash-link 부드러운 스크롤이 작동하려면 react-router-dom에서 BrowserRouter를 사용해야 한다 . 

react-router를 설치한 후 해시링크 hash-link 를 설치해야 한다.

 

npm i react-router-dom

npm install --save react-router-hash-link

 

적용 할 파일을 열고 해시링크를 가져온다.

 

import { HashLink } from 'react-router-hash-link';

 

 

import React from 'react';
import { HashLink } from 'react-router-hash-link';

const testPage = () => {
    return (
    <>
        <nav>
            <HashLink smooth to="/#home">
                About
            </HashLink>
        
            <HashLink smooth to="/#services">
            	Profile
            </HashLink>

        </nav>
        
        <section>
        . . .
        </section>
    </>
    )
}
export default testPage;

 

smooth to 로 부드럽게 구현한다.

 

 

Hashlink의 ID를 요소에 추가하기

아이디가 있는 링크를 클릭하면 스크롤 효과가 구현된다. 

링크의 #hashfragment와 일치하는 ID가 있는 요소 또는 페이지로 스크롤되는 것을 볼 수 있다.

 

import React from 'react';
import { HashLink } from 'react-router-hash-link';

const testPage = () => {

    return (
    <>
        <nav>
            <HashLink smooth to="/#home">
            	About
            </HashLink>
            
            <HashLink smooth to="/#services">
            	Profile
            </HashLink>

        </nav>
        
        <section id=”about”>
        	<h1> About</h1>
            
            <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Vero, nam! Iure officia aut esse tempore accusantium
                explicabo? Corporis deleniti ipsa fuga quas aut neque
                dicta nostrum laboriosam, iusto ullam minima est porro,
                totam saepe. Facilis aliquid praesentium, voluptates rem
                quibusdam sequi numquam illo eius adipisci eaque,
                necessitatibus consectetur, labore vero et ipsum.
                Officiis, ea vero. Praesentium, et. Enim, nostrum illo.
            </p>        
        </section>
        
        <section id=”profile”>
        	<h1> Profile </h1>
            <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Vero, nam! Iure officia aut esse tempore accusantium
                explicabo? Corporis deleniti ipsa fuga quas aut neque
                dicta nostrum laboriosam, iusto ullam minima est porro,
                totam saepe. Facilis aliquid praesentium, voluptates rem
                quibusdam sequi numquam illo eius adipisci eaque,
                necessitatibus consectetur, labore vero et ipsum.
                Officiis, ea vero. Praesentium, et. Enim, nostrum illo.
            </p>
        </section>
        
        <section id=”services”>
        	<h1> Services </h1>
            <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Vero, nam! Iure officia aut esse tempore accusantium
                explicabo? Corporis deleniti ipsa fuga quas aut neque
                dicta nostrum laboriosam, iusto ullam minima est porro,
                totam saepe. Facilis aliquid praesentium, voluptates rem
                quibusdam sequi numquam illo eius adipisci eaque,
                necessitatibus consectetur, labore vero et ipsum.
                Officiis, ea vero. Praesentium, et. Enim, nostrum illo.
            </p>
        </section>
    </>
    )
}

export default testPage;

 

 

맨위로 이동하기

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

 

 <HashLink to="#top">
            	Top
            </HashLink>

 

정리

 

React-router-hash-link를 사용하면 라우팅에 react-router-dom을 사용하는 동안 원활한 스크롤을 원활하게 활용할 수 있다.

Scroll to top 및 Scroll with offset 기능을 포함하여 많은 기능이 있으므로 다른 기능을 탐색할 수 있다.