Written By: Nguyễn Văn Hiếu (Web 25)
Gmail: hieunguyenyt173@gmail.com
Bài viết gốc: https://www.freecodecamp.org/news/how-to-implement-vertical-scrolling-in-react-using-react-router-hash-link/

Cuộn mượt mà là một tính năng giúp các trang web dễ sử dụng hơn và cho phép người dùng trải nghiệm cuộn tốt hơn trong hầu hết các trình duyệt.

Thực hiện cuộn trang mượt mà trong khi sử dụng react-router-dom là một vấn đề trong React.js. Vì vậy, bài viết này, bạn sẽ tìm hiểu cách thực hiện cuộn dọc mượt mà bằng cách sử dụng gói react-router-hash-link.

React-router-hash-link là gì?

Theo tài liệu của nó, react-router-hash-link là một giải pháp cho vấn đề React Router không cuộn đến # hash-fragment khi sử dụng các thành phần liên kết để điều hướng.

Điều kiện tiên quyết.

Bạn phải sử dụng BrowserRouter từ react-router-dom để khả năng cuộn mượt mà react-router-hash-link hoạt động. Để cài đặt và sử dụng bộ định tuyến phản ứng, hãy nhập lệnh sau:

npm i react-router-dom

Hoặc đối với yarn

yarn add react-router-dom

Để hiểu cách triển khai cuộn dọc, bạn sẽ xây dựng một trang đích đơn giản với thanh điều hướng và ba phần.

Cách sử dụng react-router-hash-link

Bước 1: Cài đặt react-router-hash-link

Để cài đặt gói react-router-hash-link, hãy chạy lệnh sau:

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

Hoặc đối với yarn

yarn add react-router-hash-link

Bước 2: Nhập gói react-router-hash-link vào ứng dụng React của bạn.

Mở tệp LandingPage.js của bạn và nhập liên kết hash-link từ gói react-router-hash-link của bạn.

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

const LandingPage = () => {
    return (
        <>
            <nav>
            . . .
            </nav>

            <section>
            . . .
            </section>
        </>
    )
}

export default LandingPage

Bước 4: Thêm ID Hashlink của bạn vào bất kỳ phần tử nào.

Khi bạn nhấp vào liên kết với id của mình, một hiệu ứng cuộn sẽ được triển khai. Bạn sẽ thấy cuộn đến phần tử hoặc trang có id khớp với #hashfragment trong liên kết.

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

const LandingPage = () => {

    return (
    <>
        <nav>
            <HashLink smooth to="/#home">
            	About
            </HashLink>
            
            <HashLink smooth to="/#services">
            	Profile
            </HashLink>
            
            <HashLink smooth to="/#testimonial">
            	Services
            </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 LandingPage

Và bạn có nó rồi đấy! Giờ đây, bạn đã thực hiện thao tác cuộn mượt mà trên một trang web đơn giản.

Kết luận

React-router-hash-link cho phép bạn tận dụng khả năng cuộn mượt mà liền mạch trong khi sử dụng react-router-dom để định tuyến.

Nó có rất nhiều chức năng bao gồm Cuộn lên đầu và Cuộn với các chức năng bù trừ, vì vậy bạn có thể khám phá những gì nó có thể làm.