Document URL: Ambil, Ubah, atau Hajar Langsung!

Dalam pengembangan web, sering kali kita perlu berinteraksi dengan URL halaman untuk berbagai keperluan, seperti mendapatkan informasi URL saat ini, mengubah URL tanpa me-refresh halaman, atau melakukan navigasi langsung ke halaman lain. Semua itu bisa dilakukan dengan Document URL melalui JavaScript.

Properti document.URL memungkinkan kita untuk mengambil URL saat ini, sementara beberapa metode lain seperti window.history.pushState() atau location.replace() bisa digunakan untuk mengubah atau mengganti URL tanpa harus me-refresh halaman. Artikel ini akan mengupas cara kerja Document URL, bagaimana menggunakannya secara efektif, dan kapan harus menggunakannya.

Cara Mengambil URL Saat Ini

Salah satu cara termudah untuk mendapatkan URL halaman yang sedang diakses adalah dengan properti document.URL.

console.log(document.URL);

Kode ini akan mencetak URL halaman ke dalam konsol browser. Contohnya:

https://example.com/page?query=123

Namun, document.URL hanya bisa digunakan untuk membaca URL, bukan untuk mengubahnya.

Mengubah URL Tanpa Me-refresh Halaman

Mengubah URL tanpa memuat ulang halaman bisa sangat berguna, terutama dalam Single Page Applications (SPA). JavaScript menyediakan metode history.pushState() dan history.replaceState() untuk mengubah URL tanpa reload.

1. pushState() untuk Menambahkan URL ke Riwayat Browser

window.history.pushState({}, "", "/halaman-baru");

Kode ini akan mengubah URL di browser menjadi:

https://example.com/halaman-baru

Namun, konten halaman tidak akan berubah, jadi kamu harus menangani tampilan baru secara manual.

2. replaceState() untuk Mengganti URL Tanpa Menambah Riwayat

Jika tidak ingin menambah riwayat navigasi baru, gunakan replaceState():

window.history.replaceState({}, "", "/halaman-ganti");

Kode ini akan mengganti URL saat ini tanpa menambahnya ke riwayat browser.

Perbedaan antara pushState() dan replaceState():

Navigasi Halaman dengan window.location

Kalau butuh cara yang lebih cepat dan langsung untuk berpindah halaman, kita bisa menggunakan window.location.

1. Redirect ke Halaman Lain

window.location.href = "https://example.com/halaman-lain";

Kode ini akan membawa pengguna ke halaman lain dengan cara yang sama seperti ketika mereka mengklik link.

2. Memuat Ulang Halaman

window.location.reload();

Kode ini akan me-refresh halaman saat ini.

3. Mengganti Halaman Tanpa Menambah Riwayat

window.location.replace("https://example.com/halaman-baru");

replace() bekerja seperti redirect, tetapi tidak menambahkan halaman sebelumnya ke dalam riwayat browser.

Mengurai Bagian-Bagian URL

JavaScript juga memungkinkan kita untuk mengakses berbagai bagian URL menggunakan window.location.

console.log(window.location.href);     // URL lengkap
console.log(window.location.hostname); // Nama domain
console.log(window.location.pathname); // Path setelah domain
console.log(window.location.search);   // Query string (misalnya ?id=123)
console.log(window.location.hash);     // Hash (misalnya #section1)

Contoh jika URL adalah:

https://example.com/products?category=shoes#reviews

Maka hasil yang didapat:

href: https://example.com/products?category=shoes#reviews
hostname: example.com
pathname: /products
search: ?category=shoes
hash: #reviews

Dengan cara ini, kita bisa mengambil atau memanipulasi URL sesuai kebutuhan aplikasi.

Kapan Harus Menggunakan Document URL?

✅ Jika ingin mengambil informasi URL halaman saat ini.
✅ Jika ingin mengubah URL tanpa reload untuk aplikasi berbasis SPA.
✅ Jika ingin mengganti halaman tanpa menambah riwayat browser.
✅ Jika ingin melakukan redirect ke halaman lain dengan lebih fleksibel.

❌ Jangan gunakan window.location.href untuk navigasi dalam SPA karena akan memuat ulang seluruh aplikasi.

Kesimpulan

• document.URL digunakan untuk mengambil URL saat ini, tetapi tidak bisa mengubahnya.
• history.pushState() dan replaceState() bisa digunakan untuk mengubah URL tanpa reload.
• window.location bisa digunakan untuk redirect, reload, dan mengganti halaman secara langsung.
• window.location memiliki properti untuk mengambil berbagai bagian dari URL seperti hostname, pathname, search, dan hash.

Dengan memahami cara kerja Document URL, kita bisa lebih fleksibel dalam mengelola navigasi dan pengalaman pengguna dalam aplikasi web.