Belajar Next.js App Router #6: useRouter dan usePathname

• Mengenal useRouter
• Menggunakan useRouter
• Mengenal usePathname
• Menggunakan usePathname
• Contoh Kasus usePathname
• Kesimpulan

Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah mempelajari konsep layout serta navigasi dasar menggunakan Link. Pada artikel ini, kita akan fokus membahas navigasi secara programatik dan cara membaca route yang sedang aktif menggunakan useRouter dan usePathname.

Kedua hook ini sangat berguna ketika kita perlu melakukan redirect setelah suatu aksi, atau ketika ingin menyesuaikan tampilan berdasarkan URL yang sedang diakses.

Mengenal useRouter

useRouter adalah hook yang disediakan oleh Next.js untuk melakukan navigasi secara programatik di App Router. Hook ini biasanya digunakan setelah proses tertentu, seperti submit form, login, atau aksi lainnya yang membutuhkan redirect.

Karena useRouter berjalan di sisi client, hook ini hanya bisa digunakan di Client Component.

Menggunakan useRouter

Untuk menggunakan useRouter, kita perlu menambahkan directive "use client" di bagian atas file.

Contoh penggunaan useRouter untuk melakukan redirect ke halaman lain:

'use client'

import { useRouter } from 'next/navigation'

export default function RedirectButton() {
    const router = useRouter()

    return (
        <button onClick={() => router.push('/products')}>
            Pergi ke Products
        </button>
    )
}

Pada contoh di atas, ketika tombol diklik, aplikasi akan berpindah ke halaman /products tanpa melakukan reload halaman.

Selain push, useRouter juga menyediakan method lain seperti replace untuk mengganti history, dan back untuk kembali ke halaman sebelumnya.

Mengenal usePathname

usePathname adalah hook yang digunakan untuk mendapatkan path URL yang sedang aktif. Hook ini sangat bermanfaat untuk menentukan kondisi tampilan berdasarkan halaman yang sedang diakses.

Sama seperti useRouter, usePathname hanya bisa digunakan di Client Component.

Menggunakan usePathname

Berikut contoh penggunaan usePathname untuk menampilkan path aktif:

'use client'

import { usePathname } from 'next/navigation'

export default function CurrentPath() {
    const pathname = usePathname()

    return (
        <p>Path saat ini: {pathname}</p>
    )
}

Jika halaman yang sedang dibuka adalah /dashboard, maka nilai pathname akan berisi /dashboard.

Contoh Kasus usePathname

Salah satu penggunaan umum usePathname adalah untuk menandai halaman aktif pada menu navigasi.

Contoh sederhana, kita bisa menampilkan pesan khusus ketika user berada di halaman tertentu:

'use client'

import { usePathname } from 'next/navigation'

export default function PageIndicator() {
    const pathname = usePathname()

    return (
        <>
            {pathname === '/dashboard' && (
                <p>Kamu sedang berada di halaman Dashboard</p>
            )}
        </>
    )
}

Pendekatan ini sering digunakan untuk membuat menu aktif, breadcrumb, atau logika tampilan lainnya yang bergantung pada URL.

Kesimpulan

Pada artikel ini, kita telah mempelajari penggunaan useRouter untuk navigasi secara programatik dan usePathname untuk membaca route yang sedang aktif di Next.js App Router. Kedua hook ini sangat membantu dalam membangun alur aplikasi yang dinamis dan responsif terhadap perubahan route.

Pada artikel selanjutnya, kita akan membahas perbedaan antara Server Component dan Client Component pada Next.js App Router, serta memahami kapan dan mengapa masing-masing komponen tersebut digunakan.

Terima Kasih