DIRECT PADA BAGIAN TERTENTU DI HALAMAN YANG SAMA MENGGUNAKAN REACT

 DIRECT PADA BAGIAN TERTENTU DI HALAMAN YANG SAMA MENGGUNAKAN REACT

     Assalaamu'alaikum wa rahmatullahi wa barakaatuh. Hello gaes, disini saya ingin share singkat bagaimana cara direct ke bagian tertentu di satu halaman menggunakan react, jika ada masukan atau saran nya boleh sharing dibawah  ya :D

     Oke kita langsung saja buat, pertama import modul react ini untuk membuat referensi ke element DOM agar nantinya bisa menuju ke bagian yang ingin ditampilkan ketika di klik.

import React, {useRef } from "react";

        Lalu buat variabel sebagai tempat menaruh nilai dari referensi dengan nilai awalnya null, lalu ketika sudah di render maka sectionRef akan bernilai referensi nya.

const sectionRef = useRef(null);

        Buat fungsi agar bisa  membuat event yang menuju kebagian tertentu ketika di klik. Disini saya membuat fungsi dengan pengkondisian ketika variabel sectionRef tadi sudah terender maka akan menuju bagian yang sudah direferensikan dengan menggunakan scrollIntoView.

const handleScroll = () => {

        if (sectionRef.current) {

            sectionRef.current.scrollIntoView({ behavior: 'smooth' });

        }

    };

         Untuk menggunakan nya disini saya menggunakan button sebagai pemicu event nya dengan onClick nya diisi fungsi tadi, dan div lain untuk referensi bagian yang ingin ditujunya dengan menambahkan ref  variabel sectionRef.

<Button onClick={() => {handleScroll()}}>

    <span >Cari</span>

</Button>

<div ref={sectionRef}></div>

        Selesai.

      Dengan begitu kalian bisa membuat halaman seperti navigasi pada landing page yang hanya ada di satu halaman.

    Sekian dari saya bagaimana cara direct ke bagian tertentu di satu halaman menggunakan react, Wassalaamualaikum wa rahmatullahi wa barakaatuh.