Bu kılavuzun yardımıyla uygulamanız için yönlendirme sistemini uygulayın.

SvelteKit, harika geliştirme deneyimi ve esnek dosya tabanlı yönlendirme ile her boyutta web uygulamaları oluşturmaya yönelik bir çerçevedir. Çerçeve, tek sayfalık uygulamaların SEO ve aşamalı iyileştirme avantajlarını, sunucu tarafında oluşturulmuş uygulamaların hızlı gezinmesiyle birleştirir. SvelteKit'in kritik özelliklerinden biri yönlendirme sistemidir.

SvelteKit Routing'i Anlamak

SvelteKit bir çerçevedir Svelte üzerine inşa edilmiş. SvelteKit'te yönlendirme, dosya tabanlı bir sistemi takip eder. Bu, sayfalarınızın dizin yapısının uygulamanızın rotalarını belirlediği anlamına gelir.

SvelteKit yönlendirme sistemini daha iyi anlamak için öncelikle bir SvelteKit projesi oluşturun. Bunu yapmak için terminalinizde aşağıdaki kodu çalıştırın:

npm create svelte@latest my-app

Yukarıdaki kod bloğunu çalıştırdıktan sonra, uygulamanızı yapılandırmak için bir dizi istemi yanıtlayacaksınız.

Ardından, projeniz için gerekli bağımlılıkları kurun. Bunu yapmak için CD projenize girin ve çalıştırın:

instagram viewer 
npm install

Terminalinizde aşağıdaki komutu çalıştırarak projeyi geliştirme sunucusunda açın:

npm run dev

Şimdi, projeniz çalışır durumda olacak http://localhost: 5173/. Geliştirme sunucunuz üzerinde uygulamayı açtığınızda aşağıdaki görsele benzer bir arayüz ile karşılaşacaksınız.

Projenin ana rotası ‘/’ adlı bir dosyaya karşılık gelir. +page.svelte. bulabilirsin +page.svelte dosya yolunu izleyen dosya; kaynak/yollar projenizde

SvelteKit'te farklı rotalar oluşturmak için, SvelteKit'te klasörler oluşturabilirsiniz. kaynak/yollar dizin. Her klasör farklı bir rotaya karşılık gelir. oluştur +page.svelte o rotanın içeriğini tanımlamak için her klasördeki dosya.


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

Yukarıdaki kod içinde yaşayacak +sayfa dosya. İçinde ince bir dosya oluşturacaksınız. hakkında içindeki klasör kaynak/yollar dizin. Bu dosya rota içeriğini içerecektir. Rotayı web tarayıcınızda görüntülemek için şuraya gidin: http://localhost: 5173/hakkında.

Şuraya gitmek: /about route ekranınızda bu arayüzü gösterecektir:

İç İçe Rotaları Anlamak

İç içe rotalar, yönlendirme sistemini bir web uygulamasında yapılandırmanın bir yoludur. Yuvalanmış bir rota yapısında, rotalar diğer rotaların içine yerleştirilerek aralarında hiyerarşik bir ilişki oluşturulur. ile klasörler yerleştirerek SvelteKit'te iç içe rotalar oluşturabilirsiniz. +page.svelte altındaki diğer rota klasörlerinin içindeki dosya kaynak/yollar dizin.

Örneğin:

Bu örnekte, postalamak içindeki rota Blog rota. Yuvalamak için postalamak içindeki rota Blog rotayı oluştur postalamak klasör ve onun +page.svelte içindeki dosya Blog rota klasörü.

Uygulamanızdaki blog rotasına erişmek için web tarayıcınızı açın ve şuraya gidin: http://localhost: 5173/blog.

Posta yolu şu adreste mevcut olacaktır: http://localhost: 5173/blog/yayın.

Düzenler ve Hata Rotaları

SvelteKit bir tanımlar uygulama için Next.js'ye benzer bir düzen. Her iki çerçeve de bir düzen uygulamanın yapısını tanımlayan bileşen.

SvelteKit'in kullandığı +layout.svelte bir grup sayfa için bir düzen tanımlamak için. oluşturabilirsiniz +layout.svelte dosya kaynak/yollar dizini, uygulamanızdaki tüm sayfalar için bir düzen tanımlamak için veya belirli bir sayfa grubu için bir düzen tanımlamak için bir alt dizinde.

Tüm uygulamanız için bir yerleşim rotasını nasıl tanımlayacağınıza dair bir örnek:

Yukarıdaki örnek bir yerleşim rotası sağlar. Dosya bir içerir h1 metni gösteren öğe "Bu bir SvelteKit uygulamasıdır." Ayrıca bir içerir yuva eleman. bu yuva element, uygulamanın mizanpaj içinde rotalarınızın içeriğini oluşturacağı konumu tanımlayan özel bir elementtir. Vue bileşenleriyle aynı şekilde çalışır.

Bu durumda, uygulamanız rotalarınızın içeriğini h1 eleman.

Bir hata sayfası tanımlamak için, adlı bir dosya oluşturun. +hata.ince içinde kaynak/yollar dizin. Oluşturma sırasında bir hata oluştuğunda bu sayfa görüntülenecektir.

Örneğin:

Olmayan bir rotaya gitmek gibi bir hata ile karşılaştığınızda uygulamanız buna geri dönecektir. hata bunun yerine rota.

Örneğin:

Rota http://localhost: 5173/git mevcut değil, bu nedenle uygulama hata bunun yerine rota.

Sayfalar Arasında Gezinme

Oluşturduğunuz rotalar arasında gezinmenin en iyi yolunu bulmak, iyi bir deneyim için çok önemlidir. Geleneksel olarak, çoğu teknolojideki dosya tabanlı yönlendirme, farklı sayfalar arasında gezinmek için bağlantılar kullanır. SvelteKit'te sayfalar arasında gezinmek için basit bir HTML bağlantı etiketi kullanabilirsiniz.

Örneğin bu kodu istediğiniz herhangi bir rotada yazabilirsiniz ancak düzen üzerindeki rota yuva etiket:

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

Herhangi bir bağlantı etiketine tıklamak sizi ilgili rotaya yönlendirecektir.

SvelteKit'te Dinamik Yönlendirme

Dinamik yönlendirme, uygulamanın verilere veya parametrelere dayalı olarak oluşturduğu rotaları aşamalı olarak oluşturmanıza olanak tanır. Farklı rotaları işleyen ve içeriği belirli verilere veya parametrelere göre görüntüleyen esnek ve dinamik web uygulamaları oluşturmanıza olanak tanır.

SvelteKit'te dinamik bir rota oluşturmak için, adlı bir klasör oluşturun. [sümüklü böcek] ve sonra bir +page.svelte rotanın içeriğini tanımlamak için klasördeki dosya. Klasörü istediğiniz gibi adlandırabileceğinizi unutmayın, ancak adı her zaman parantez [ ] içine aldığınızdan emin olun.

İşte bir dinamik rota örneği:

Bu rotaya web tarayıcınızda erişmek için bu bağlantıya gidin http://localhost: 5173/[sümüklü böcek], Neresi [sümüklü böcek] seçtiğiniz herhangi bir benzersiz tanımsız rota adı olabilir.

uygulamanıza erişebilirsiniz [sümüklü böcek] parametresini kullanarak $page.params gelen veriler $uygulama/mağazalar.

Örneğin:

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

Burada, $page.params itiraz etmek parametre değişken ve render param.slug uygulamanızdaki veriler.

Uygulama, param.slug bağlantınızdaki veriler. Örneğin, şuraya giderseniz http://localhost: 5173/yangın, uygulamada görüntülenen içerik "Bu yangın sayfası."

Artık SvelteKit'te Yönlendirmenin Temellerini Biliyorsunuz

SvelteKit'te Yönlendirme, uygulamanızı mantıklı bir şekilde yapılandırmanıza izin veren güçlü bir özelliktir. Bu özelliği nasıl kullanacağınızı anlamak, daha verimli ve kullanıcı dostu web uygulamaları oluşturmanızı sağlayacaktır. İster küçük bir kişisel proje ister büyük ölçekli bir uygulama oluşturun, SvelteKit'in yönlendirme sistemi başarılı olmak için ihtiyacınız olan araçlara sahiptir.