Cara Membuat Navlink Aktif Dengan Classname Pada NextJS

 

Saat kita masuk dalam sebuah halaman web terkadang kita membutuhkan semacam indikator di halaman manakah kita berada. Contohnya, saat kita masuk ke halaman Home. Maka kita melihat apakah navbar di atas web itu terdapat warna tertentu yang menandakan kita berada di halaman web

Begitu pula saat di halaman transaction, maka navbar juga akan menunjukan bahwa kita ada di halaman transaction

Bagaimana cara membuatnya di project NextJS kita?

• Menggunakan next/router
• Menggunakan classnames
• Menggunakan pengkondisian ternary

Langkah Langkah

next/router berisi library yang membantu kita mengengineer apapun yang terkait dengan routing pada NextJS. Termasuk saat kita ingin menentukan manakah halaman aktif dimana kita berada di dalamnya

Cara untuk menggunakannya mudah. Ketika  kode berikut

import {useRouter} from 'next/router'

Lalu masukkan kedalam sebuah const dengan nama router

const router = useRouter()

useRouter akan berisi method pathname dimana ia akan mengembalikan/memberi tahu kita dimana url kita berada

console.log(router.pathnames)

Lalu kita terapkan segala variabel ini kedalam sebuah pengkondisian. Yang mana hasilnya nanti akan kita letakkan kedalam sebuah class

Sayangnya menggunakan class dalam component React berbeda dengan HTML biasa. Kita harus menggunakan classname. Semua itu sudah pernah saya terapkan ketika membuat component Navbar disini

Kita juga akan menggunakan classname ini untuk meletakkan class active. Agar Navlink memiliki warna berbeda saat kita masuk kedalam sebuah halaman website

href diambil dari dari props link yang dimiliki oleh component navbar

Pengkondisian diatas memiliki alur dimana jika router.pathname yang ada itu sama dengan isi href yang client pinta. Maka akan mengembalikan class active dan akan mengakibatkan navlink berubah warna

Jika kita melihat kode secara penuh bisa dilihat sebagai berikut

Kesimpulan

Menggunakan pengkondisian untuk mengimbuhkan active kedalam class component dalam NextJS jauh lebih mudah. Cukup dengan mencocokan router.pathname dengan href yang kita miliki dengan operator