Svelte Url Parameter String Value - Nama Tamu Undangan Web

mrfdn.com - Saat ini saya belajar rebuild website undangan online menggunakan Svelte. Web undangan online yang sedang aktif dibuild menggunakan Astro.

Menggunakan astro untuk build website sungguh sangat memudahkan.

Selama rebuild website saya mengalami beberapa tantangan, seperti bagaimana cara menampilkan props di Svelte sehingga data bisa diakses pada halaman manapun.

Setelah itu tantangan baru sebagai developer pemula adalah bagaimana cara menampilkan nama tamu yang telah ditulis pada url ke halaman web.

Dan alhamdulillah masalah ini bisa fixed. Jadi saya ingin simpan pada blog ini.

Caranya seperti ini.

Buat sebuah komponen yang bernama PopUp.svelte. Komponen ini bertugas muncul pada halaman awal saja saat landing page website undangan diakses oleh user. Di dalamnya terdapat keterangan nama tamu undangan.

Pada bagian awal file PopUp.svelte ini saya menulis:

<script>
    export let data;

    import { page } from '$app/stores';
    const url = $page.url;
    const namaTamu = (url.searchParams.get('to'));
</script>

Masih di file PopUp.svelte untuk memanggil value nama tamu cukup tulis saja

{namaTamu}

Selesai.

Contoh url undangan online myspecialday.netlify.app/?to=Rafi dan Edha

Selamat mencoba.