Terapkan sistem perutean untuk aplikasi Anda dengan bantuan panduan ini.

SvelteKit adalah kerangka kerja untuk membangun aplikasi web dari semua ukuran, dengan pengalaman pengembangan yang hebat dan perutean berbasis file yang fleksibel. Framework ini menggabungkan SEO aplikasi satu halaman dan manfaat peningkatan progresif dengan navigasi cepat dari aplikasi yang dirender di sisi server. Salah satu fitur penting SvelteKit adalah sistem perutean.

Memahami Perutean SvelteKit

SvelteKit adalah kerangka kerja dibangun di atas Svelte. Di SvelteKit, perutean mengikuti sistem berbasis file. Ini berarti bahwa struktur direktori halaman Anda menentukan rute aplikasi Anda.

Untuk memahami sistem perutean SvelteKit dengan lebih baik, pertama-tama, buat proyek SvelteKit. Untuk melakukannya, jalankan kode berikut di terminal Anda:

npm create svelte@latest my-app

Setelah menjalankan blok kode di atas, Anda akan menjawab serangkaian perintah untuk mengonfigurasi aplikasi Anda.

Selanjutnya, instal dependensi yang diperlukan untuk proyek Anda. Untuk melakukan ini CD ke dalam proyek Anda dan jalankan:

instagram viewer 
npm install

Buka proyek di server pengembangan dengan menjalankan perintah berikut di terminal Anda:

npm run dev

Sekarang, proyek Anda akan aktif dan berjalan http://localhost: 5173/. Saat Anda membuka aplikasi di server pengembangan Anda, Anda akan memiliki antarmuka yang mirip dengan gambar di bawah ini.

Rute akar proyek ‘/’ sesuai dengan file bernama +halaman.langsing. Anda dapat menemukan +halaman.langsing file mengikuti jalur file; src/rute dalam proyek Anda.

Untuk membuat rute berbeda di SvelteKit, Anda dapat membuat folder di src/rute direktori. Setiap folder akan sesuai dengan rute yang berbeda. Hasilkan a +halaman.langsing file di setiap folder untuk menentukan konten rute itu.


<main>
<h2> This is the about page h2>
main>

Kode di atas akan hidup di dalam +halaman mengajukan. Anda akan membuat file langsing di dalam tentang folder di src/rute direktori. File ini akan berisi konten untuk rute. Untuk melihat rute di browser web Anda, navigasikan ke http://localhost: 5173/tentang.

Menavigasi ke /about route akan menampilkan antarmuka ini di layar Anda:

Memahami Rute Bersarang

Rute bersarang adalah cara untuk menyusun sistem perutean dalam aplikasi web. Dalam struktur rute bersarang, rute ditempatkan di dalam rute lain, menciptakan hubungan hierarki di antara mereka. Anda dapat membuat rute bersarang di SvelteKit dengan menempatkan folder dengan +halaman.langsing file di dalam folder rute lain di bawah src/rute direktori.

Misalnya:

Dalam contoh ini, Anda membuat sarang pos rute dalam blog rute. Untuk membuat sarang pos rute dalam blog rute, buat pos folder dan nya +halaman.langsing file di dalam blog folder rute.

Untuk mengakses rute blog di aplikasi Anda, buka browser web Anda dan arahkan ke http://localhost: 5173/blog.

Rute pos akan tersedia di http://localhost: 5173/blog/pos.

Tata Letak dan Rute Kesalahan

SvelteKit mendefinisikan a layout untuk aplikasi dengan cara yang mirip dengan Next.js. Kedua framework menggunakan a tata letak komponen untuk menentukan struktur aplikasi.

SvelteKit menggunakan +layout.svelte untuk menentukan tata letak untuk sekelompok halaman. Anda dapat membuat +layout.svelte berkas di src/rute direktori untuk menentukan tata letak untuk semua halaman dalam aplikasi Anda atau dalam subdirektori untuk menentukan tata letak untuk grup halaman tertentu.

Berikut adalah contoh cara menentukan rute tata letak untuk seluruh aplikasi Anda:

Contoh di atas menyediakan rute tata letak. File tersebut berisi a h1 elemen yang menampilkan teks "Ini adalah aplikasi SvelteKit." Ini juga termasuk a slot elemen. Itu slot elemen adalah elemen khusus yang menentukan lokasi tempat aplikasi akan merender konten rute Anda di dalam tata letak. Ini bekerja dengan cara yang sama seperti komponen Vue.

Dalam hal ini, aplikasi Anda akan merender konten rute Anda di bawah h1 elemen.

Untuk menentukan halaman kesalahan, buat file bernama + error.langsing dalam src/rute direktori. Halaman ini akan ditampilkan ketika terjadi kesalahan selama rendering.

Misalnya:

Saat Anda mengalami kesalahan, seperti menavigasi ke rute yang tidak ada, aplikasi Anda akan kembali ke rute ini kesalahan rute sebagai gantinya.

Misalnya:

Rute http://localhost: 5173/pergi tidak ada, jadi aplikasi merender kesalahan rute sebagai gantinya.

Menavigasi Antar Halaman

Menemukan cara terbaik untuk bernavigasi di antara rute yang Anda buat sangat penting untuk pengalaman yang baik. Secara tradisional, perutean berbasis file di sebagian besar teknologi menggunakan tautan untuk bernavigasi di antara halaman yang berbeda. Untuk menavigasi antar halaman di SvelteKit, Anda dapat menggunakan tag jangkar HTML sederhana.

Misalnya, Anda dapat menulis kode ini di rute mana pun yang Anda inginkan, tetapi Anda harus menuliskannya di tata letak rute di atas slot menandai:

<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>

Mengklik tag jangkar apa pun akan mengarahkan Anda ke rute yang sesuai.

Perutean Dinamis di SvelteKit

Perutean dinamis memungkinkan Anda membuat rute secara progresif yang dihasilkan aplikasi berdasarkan data atau parameter. Ini memungkinkan Anda untuk membuat aplikasi web yang fleksibel dan dinamis yang menangani berbagai rute dan menampilkan konten sesuai dengan data atau parameter tertentu.

Untuk membuat rute dinamis di SvelteKit, buat folder bernama [siput] dan kemudian a +halaman.langsing file di folder untuk menentukan konten rute. Perhatikan bahwa Anda dapat memberi nama folder apa pun yang Anda suka tetapi pastikan untuk selalu membungkus nama dalam tanda kurung [ ].

Berikut adalah contoh rute dinamis:

Untuk mengakses rute ini di browser web Anda, navigasikan ke tautan ini http://localhost: 5173/[siput], Di mana [siput] dapat berupa nama rute unik yang tidak ditentukan yang Anda pilih.

Anda dapat mengakses aplikasi Anda [siput] parameter menggunakan $halaman.params data dari $aplikasi/toko.

Misalnya:

<scriptlang='ts'>
 import { page } from '$app/stores'
 const params = $page.params;
script>
<main>
<h1>This is the {params.slug} pageh1>
main>

Di sini, Anda menetapkan $halaman.params keberatan dengan param variabel dan merender param.slug data di aplikasi Anda.

Aplikasi mengambil file param.slug data dari tautan Anda. Misalnya, jika Anda menavigasi ke http://localhost: 5173/api, konten yang ditampilkan pada aplikasi akan menjadi "Ini adalah halaman api."

Sekarang Anda Tahu Dasar Routing di SvelteKit

Perutean di SvelteKit adalah fitur canggih yang memungkinkan Anda menyusun aplikasi dengan cara yang masuk akal. Memahami cara menggunakan fitur ini akan memungkinkan Anda membuat aplikasi web yang lebih efisien dan mudah digunakan. Apakah membuat proyek pribadi kecil atau aplikasi berskala besar, sistem perutean SvelteKit memiliki alat yang Anda perlukan untuk berhasil.