Redirect Halaman dengan Effect Hook pada Next.js

Belajar membuat Redirect otomatis pada komponen Next.js.

Redirect Halaman dengan Effect Hook pada Next.js

Pada pembelajaran kali ini, penulis akan menunjukkan cara membuat Redirect untuk halaman error 404 pada Next.js. Sebelum melanjutkan, pastikan kalian telah membaca Bagian ke-tujuh dari pembelajaran ini.

Terkadang, kita perlu membuat Redirect halaman (Berpindah Halaman secara otomatis) tanpa perlu mengeklik Link yang ada. Contoh penggunaan Redirect biasanya ada pada Form Kontak, ketika terdapat pengguna yang telah mengisi form dan mengeklik tombol Submit/Kirim, maka secara otomatis halaman akan berpindah ke halaman lainnya.

Pada pembelajaran kali ini, kita akan membuat Redirect untuk halaman Error yang akan tertuju ke halaman utama (Homepage) dengan durasi selama 3 detik (Jika pengguna tidak berpindah halaman selama 3 detik, maka halaman akan berpindah otomatis).

Untuk melakukannya, kita akan menggunakan Effect Hook.

Menggunakan useEffect dan useRouter

Hook adalah tambahan baru pada React v16.8. Hook berfungsi untuk menggunakan State dan fitur React lainnya tanpa menulis sebuah Class. Tindakan Default dari useEffect adalah mengaktifkan efect setiap komponen selesai ter-render. Dengan demikian, useEffect akan selalu diciptakan kembali jika salah satu Dependency-nya berubah.

Disini, kita dapat meng-import useEffect yang ada pada Library React. Bukalah file 404.js yang ada pada folder pages dan masukkan kode Import berikut tepat dibawah import link:

import { useEffect } from "react"

Pada dasarnya, Library React telah terinstal dan dapat langsung digunakan. Kita dapat melihatnya pada file packages.json di bagian Dependecy. Jadi, disini kita hanya perlu meng-importnya saja.

Kita juga perlu meng-import useRouter Hook yang ada pada Library Next.js. Hook ini dapat memberikan kita akses untuk metode yang dapat digunakan untuk Redirect halaman. Masukkanlah import useRouter berikut tepat dibawah import useEffect yang telah kita buat diatas:

import { useRouter } from "next/router"

Hal pertama yang harus kita lakukan adalah membuat fungsi useEffect. Masukkanlah kode berikut kedalam Stateless Functional Component halamanError:

useEffect(() => {
    setTimeout(() => {

    }, 3000);
}, []);

Kita akan melewati Array yang kosong (Empty Array) pada argumen kedua , [] yang merupakan Array Dependency. Ketika suatu Array itu kosong, maka hanya akan melihat fungsi sekali ketika pertamakali komponen terpasang dan tidak lagi jika terdapat perubahan State. Jadi, kita hanya akan menemukan fungsi ini sekali.

Didalam fungsi useEffect, kita telah membuat timer dengan metode setTimeout() dengan durasi selama 3 detik dalam satuan milidetik (ms) yang dapat kita lihat pada argumen kedua 3000. (3000 ms = 3 Detik).

Disini, kita akan me-Redirect halaman. Untuk melakukannya, kita memerlukan useRouter Hook. Pertama-tama, kita harus meng-inisialisasi Hook tersebut dan menyimpan hasilnya didalam variabel. Masukkan kode berikut kedalam fungsi halamanError:

const router = useRouter();

Variabel diatas akan mengembalikan objek Router yang terdiri dari metode untuk me-Redirect halaman.

Selanjutnya, kita perlu memasukkan metode pada variabel diatas kedalam useEffect(). Masukkan kode berikut kedalam metode setTimeout():

router.push('/')

Disini, kita akan me-Redirect halaman ke halaman utama (Homepage) '/'.

Jadi, keseluruhan kode yang telah kita buat diatas adalah sebagai berikut:

import Link from "next/link"
import { useEffect } from "react"
import { useRouter } from "next/router"

const halamanError = () => {
    const router = useRouter();

    useEffect(() => {
        setTimeout(() => {
            router.push('/')
        }, 3000);
    }, []);

    return (
        <main className="error">
            <h1>404</h1>
            <h2>Halaman yang kalian cari tidak ada.</h2>
            <p>Kembali ke <Link href="/"><a>Halaman Utama</a></Link>.</p>
        </main>
    );
}
 
export default halamanError;

Jika kalian membuka halaman Error dan menunggu selama 3 detik, maka secara otomatis akan berpindah ke halaman utama (Homepage). Disini, kita telah berhasil membuat Redirect pada Next.js.

Sampai disini penulis berharap kalian dapat memahaminya dengan mudah.

Kalian dapat melihat Source Code yang telah kita pelajari dari bagian ini pada Branch Bagian-8 Repository GitHub.

Jika artikel ini bermanfaat, silahkan bagikan kepada teman-teman atau saudara kalian. Jika kalian memiliki pertanyaan, silahkan tulis pada kolom komentar. Terimakasih telah berkunjung di EL Creative Academy.

Updated: Sunday, 07 March 2021

Diskusikan

0 Diskusi