Pengantar Perutean di Svelte

Svelte adalah kerangka kerja web yang berkembang pesat yang dapat Anda gunakan untuk membangun situs web. Ini menampilkan dirinya sebagai alternatif yang ringan dan mudah digunakan untuk kerangka kerja populer seperti React dan Vue.

Setiap framework JavaScript populer memiliki library pendamping yang dapat Anda gunakan untuk routing. Temukan bagaimana Svelte memungkinkan Anda mengelola URL dan kode yang menanganinya.

Perpustakaan Perutean Populer

Pustaka perutean paling populer untuk React adalah React Router, dibuat oleh tim Remix. Untuk VueJS, ada Vue Router yang memberi pengembang kontrol yang baik atas navigasi apa pun. Di dunia Svelte, perpustakaan perutean paling populer adalah perutean ramping.

Pustaka perutean utama lainnya untuk Svelte adalah navigator ramping. Karena itu adalah garpu dari perutean ramping, sangat berguna untuk mempelajari tentang perpustakaan itu terlebih dahulu.

Cara Kerja Perpustakaan Perutean Langsing

Ada tiga komponen penting untuk menangani rute di Svelte: Router, Tautan, Dan Rute. Untuk menggunakannya dalam aplikasi Anda, Anda cukup mengimpor utilitas ini dari perutean ramping perpustakaan.

<naskah>
import {Route, Router, Link} dari "svelte-routing";
naskah>

Komponen Router dapat memiliki dua alat peraga opsional: basepath Dan url. Itu basepath properti mirip dengan nama dasar prop di Bereaksi Router.

Secara default, ini diatur ke "/". basepath dapat berguna jika aplikasi Anda memiliki beberapa titik masuk. Misalnya, perhatikan kode Svelte berikut:

<naskah>
 import { Route, Router, Link } dari "svelte-routing";
 biarkan jalur dasar = "/pengguna";
 biarkan jalur = lokasi.nama jalur;
naskah>
<Router {basepath}>
<divpada: klik={() => (path = lokasi.namapath)}>
<Tautanke="/">Pergi ke rumahTautan>
<Tautanke="/pengguna/david">Masuk sebagai DavidTautan>
div>
<utama>
 Kamu di sini: <kode>{jalur}kode>
<Rutejalur="/">
<h1>Selamat Datang di rumah!h1>
Rute>
<Rutejalur="/david">
<h1>Halo Daud!h1>
Rute>
utama>
Router>

Jika Anda menjalankan kode ini, Anda akan melihat bahwa ketika Anda mengklik Pergi ke rumah tombol, browser menavigasi ke jalur dasar "/pengguna". Rute menentukan komponen yang harus dirender jika jalur cocok dengan nilai yang ditentukan Rute menopang.

Anda dapat menentukan elemen apa yang akan dirender di dalam komponen Route atau sebagai elemen terpisah .langsing file selama Anda mengimpor file itu dengan benar. Misalnya:

<Rutejalur="/tentang"komponen={Tentang}/>

Blok kode di atas memberi tahu browser untuk merender Aplikasi komponen ketika nama path adalah "/about".

Ketika menggunakan perutean ramping, tentukan tautan internal dengan Tautan komponen bukan HTML tradisional A elemen.

Ini mirip dengan bagaimana React Router menangani tautan internal; setiap komponen Tautan harus memiliki a ke prop yang memberi tahu browser jalur mana yang harus dinavigasi.

Saat browser merender komponen Svelte, Svelte secara otomatis mengonversi semua komponen Link menjadi setara A elemen, menggantikan ke penyangga dengan href atribut. Ini berarti bahwa ketika Anda menulis yang berikut ini:

<Tautanke="/beberapa/jalur">Ini adalah Komponen Tautan dalam perutean rampingTautan>

Svelte menyajikannya ke browser sebagai:

<Ahref="/beberapa/jalur">Ini adalah Komponen Tautan dalam perutean rampingA>

Anda harus menggunakan komponen Tautan alih-alih yang tradisional A elemen ketika bekerja dengan svelte-routing. hal ini dikarenakan A elemen melakukan pemuatan ulang halaman secara default.

Membuat SPA Dengan Svelte dan Svelte-Routing

Saatnya mempraktikkan semua yang telah Anda pelajari dengan membuat aplikasi kamus sederhana yang memungkinkan pengguna mencari kata. Proyek ini akan menggunakan gratis Kamus API.

Untuk memulai, pastikan Anda telah menginstal Yarn di mesin Anda dan jalankan:

benang buat vite

Ini akan merancah proyek baru menggunakan alat pembuatan Vite. Beri nama proyek Anda lalu pilih "Svelte" sebagai kerangka kerja dan "JavaScript" sebagai variannya. Setelah itu, jalankan perintah berikut satu demi satu:

CD
benang
benang menambahkan perutean ramping
dev benang

Selanjutnya, hapus konten dari App.svelte file dan ubah struktur proyek menjadi seperti ini:

Dari ilustrasi di atas, Anda dapat melihat bahwa ada folder "components" dengan dua file: Rumah.langsing Dan Artinya.langsing. Artinya.langsing adalah komponen yang akan dirender saat pengguna mencari kata.

Arahkan ke App.svelte file dan impor komponen Route, Router, dan Link dari library svelte-routing. Juga pastikan untuk mengimpor Rumah.langsing Dan App.svelte komponen.

<naskah>
 import { Route, Router, Link } dari "svelte-routing";
 impor Beranda dari "./components/Home.svelte";
 import Arti dari "./components/Meaning.svelte";
naskah>

Selanjutnya, buat komponen Router yang membungkus a utama Elemen HTML dengan kelas "aplikasi".

<Router>
<utamakelas="aplikasi">
utama>
Router>

Dalam utama elemen, tambahkan a nav elemen dengan komponen Tautan sebagai anaknya. Prop "ke" komponen Tautan ini harus mengarah ke "/". Komponen ini akan memungkinkan pengguna untuk menavigasi ke beranda.

<utamakelas="aplikasi">
<nav>
<Tautanke="/">RumahTautan>
nav>
utama>

Sekarang saatnya mengerjakan rute. Saat pengguna memuat aplikasi, file Rumah komponen harus merender.

Menavigasi ke "/find/:word" akan merender file Arti komponen. Klausa ":word" adalah parameter jalur.

Untuk proyek ini, Anda tidak perlu khawatir tentang CSS. Cukup ganti isi sendiri aplikasi.css file dengan isi aplikasi.css berkas dari repositori GitHub ini.

Sekarang saatnya menentukan rute. Jalur tingkat root harus merender file Rumah komponen, sedangkan "/find/:word" harus merender Arti komponen.

<Rutejalur="/"komponen={Rumah} />
<Rutejalur="/cari/:kata"biarkan: params>
<Artikata={params.word} />
Rute>

Blok kode ini menggunakan membiarkan direktif untuk meneruskan parameter "Word" ke Arti komponen sebagai penyangga.

Sekarang, buka Rumah.langsing file dan impor navigasi utilitas dari perpustakaan "svelte-routing" dan tentukan variabel enterWord.

<naskah>
 impor {navigasi} dari "perutean-langsing";
 biarkan masukWord;
naskah>

Di bawah naskah tag, buat elemen utama dengan kelas "beranda", lalu buat a div elemen dengan kelas "kamus-teks".

<utamakelas="beranda">
<divkelas="teks kamus">Kamusdiv>
utama>

Selanjutnya, buat formulir dengan an pada: kirim pengarahan. Formulir ini harus berisi dua anak: an memasukkan elemen yang nilainya terikat pada enterWord variabel dan tombol kirim yang dirender secara kondisional segera setelah pengguna mulai mengetik:

<membentukpada: kirim|preventDefault={() => navigasi(`/find/${enteredWord.toLowerCase()}`)}>
<memasukkan
 ketik = "teks"
 ikat: nilai={enteredWord}
 placeholder="Mulai pencarian Anda..."
 fokus otomatis
 />
 {#jika masukWord}
<tomboljenis="kirim">Cari Katatombol>
 {/jika}
membentuk>

Blok kode ini menggunakan navigasi berfungsi untuk mengarahkan ulang pengguna setelah tindakan kirim selesai. Sekarang, buka Artinya.langsing file dan, di tag skrip, ekspor file kata menopang dan membuat pesan eror variabel:

ekspor biarkan kata;
biarkan errorMessage = "Tidak ada koneksi. Periksa internet Anda";

Selanjutnya, buat permintaan GET ke API Kamus dengan meneruskan kata sebagai parameternya:

asinkronfungsigetWordMeaning(kata) {
const tanggapan = menunggu mengambil(
` https://api.dictionaryapi.dev/api/v2/entries/en/${kata}`
 );
const json = menunggu respon.json();
menghibur.log (json);
jika (respons.ok) {
kembali json;
 } kalau tidak {
 errorMessage = json.pesan;
melemparkanbaruKesalahan(json);
 }
 }
membiarkan janji = getWordMeaning (kata);

Pada blok kode di atas, fungsi asinkron mengembalikan data JSON jika respons berhasil. Variabel janji mewakili hasil dari getWordMeaning berfungsi saat dipanggil.

Di markup, tentukan div dengan kelas halaman makna. Selanjutnya, tentukan elemen h1 yang menampung kata variabel dalam huruf kecil:

<divkelas="halaman-makna">
<h1>
 {word.toLowerCase()}
h1>
div>

Selanjutnya, gunakan blok menunggu Svelte untuk memanggil getWordMeaning fungsi:

{#menunggu janji}
<P>Memuat...P>
{:kemudian entri}
{:menangkap}
 {pesan eror}
{/menunggu}

Kode ini menampilkan Memuat... teks ketika permintaan GET dibuat ke API. Jika ada kesalahan, maka akan ditampilkan isinya pesan eror.

Dalam {:kemudian entri} blokir, tambahkan berikut ini:

{#setiap entri sebagai entri}
 {#setiap entri.makna sebagai makna}
<divkelas="pintu masuk">
<divkelas="bagian dari pidato">
 {meaning.partOfSpeech}
div>
<ol>
 {#setiap arti.definisi sebagai definisi}
<li>
 {definisi.definisi}
<br />
<divkelas="contoh">
 {#jika definisi.contoh}
 {definisi.contoh}
 {/jika}
div>
li>
 {/setiap}
ol>
div>
 {/setiap}
{/setiap}

Jika janji berhasil diselesaikan, file entri variabel berisi data yang dihasilkan.

Kemudian untuk setiap iterasi dari pintu masuk Dan arti, kode ini merender part of speech menggunakan makna.partOfSpeech dan daftar definisi menggunakan definisi. definisi. Itu juga akan membuat contoh kalimat, jika tersedia.

Itu dia. Anda telah membuat kamus Single Page Application (SPA) menggunakan svelte-routing. Anda dapat melangkah lebih jauh jika Anda mau, atau Anda dapat memeriksanya navigator ramping, garpu dari perutean ramping.

Meningkatkan Pengalaman Pengguna Dengan Perutean Sisi Klien

Ada banyak manfaat menangani perutean di browser, bukan di server. Aplikasi yang menggunakan perutean sisi klien dapat terasa lebih lancar bagi pengguna akhir, terutama jika dipasangkan dengan animasi dan transisi.

Namun, jika Anda ingin situs web Anda mendapat peringkat lebih tinggi di mesin telusur, Anda harus mempertimbangkan untuk menangani rute di server.