Yönlendirme, Svelte dahil birçok çerçeveyle kullanacağınız bir tekniktir. Kendi avantajınıza nasıl kullanacağınızı keşfedin.

Svelte, web siteleri oluşturmak için kullanabileceğiniz, hızla büyüyen bir web çerçevesidir. Kendisini React ve Vue gibi popüler çerçevelere hafif, kullanımı kolay bir alternatif olarak sunar.

Her popüler JavaScript çerçevesinin, yönlendirme için kullanabileceğiniz bir yardımcı kitaplığı vardır. Svelte'in URL'lerinizi ve bunları işleyen kodu yönetmenize nasıl izin verdiğini keşfedin.

Popüler Yönlendirme Kitaplıkları

React için en popüler yönlendirme kütüphanesi React Router'dır., Remix ekibi tarafından oluşturuldu. VueJS için, geliştiriciye herhangi bir navigasyon üzerinde hassas kontrol sağlayan Vue Router vardır. Svelte dünyasında, en popüler yönlendirme kitaplığı ince yönlendirme.

Svelte için diğer ana yönlendirme kitaplığı ince gezgin. çatal olduğu için ince yönlendirme, önce o kitaplığı öğrenmekte fayda var.

İnce Yönlendirme Kitaplığı Nasıl Çalışır?

Svelte'de yolları işlemek için üç önemli bileşen vardır:

instagram viewer
Yönlendirici, Bağlantı, Ve Rota. Bunları uygulamanızda kullanmak için, bu yardımcı programları ince yönlendirme kütüphane.

<senaryo>
{Route, Router, Link}'i "ince yönlendirme"den içe aktarın;
senaryo>

Yönlendirici bileşeni iki isteğe bağlı donanıma sahip olabilir: temel yol Ve url. bu temel yol özellik şuna benzer: temel isim React Router'da prop.

Varsayılan olarak, "/" olarak ayarlanmıştır. uygulamanızda birden fazla giriş noktası varsa basepath kullanışlı olabilir. Örneğin, aşağıdaki Svelte kodunu göz önünde bulundurun:

<senaryo>
 { Route, Router, Link } dosyasını "ince yönlendirme"den içe aktarın;
 let basepath = "/user";
 yol = yer.yoladı olsun;
senaryo>
<Yönlendirici {temel yol}>
<divtıklamada={() => (yol = konum.yoladı)}>
<Bağlantıile="/">Eve gitmekBağlantı>
<Bağlantıile="/ kullanıcı/david">David olarak giriş yapBağlantı>
div>


<ana>
 Buradasınız: <kod>{yol}kod>


<Rotayol="/">
<h1>Eve Hoşgeldin!h1>
Rota>
<Rotayol="/david">
<h1>Merhaba David!h1>
Rota>
ana>
Yönlendirici>

Bu kodu çalıştırırsanız, tıkladığınızda şunu fark edeceksiniz: Eve gitmek düğmesine bastığınızda, tarayıcı "/user" temel yoluna gider. Rota, yolun belirtilen değerdeki değerle eşleşmesi durumunda işlenmesi gereken bileşeni tanımlar. Rota pervane

Rota bileşeni içinde veya ayrı bir bileşen olarak hangi öğelerin oluşturulacağını tanımlayabilirsiniz. .ince Bu dosyayı düzgün bir şekilde içe aktardığınız sürece dosya. Örneğin:

<Rotayol="/hakkında"bileşen={Hakkında}/>

Yukarıdaki kod bloğu, tarayıcıya Uygulama yol adı "/about" olduğunda bileşen.

Kullanırken ince yönlendirme, ile dahili bağlantıları tanımlayın Bağlantı geleneksel HTML yerine bileşen A elementler.

Bu, React Router'ın dahili bağlantıları işleme biçimine benzer; her Link bileşeninin bir ile tarayıcıya hangi yola gideceğini söyleyen prop.

Tarayıcı bir Svelte bileşeni oluşturduğunda, Svelte otomatik olarak tüm Link bileşenlerini eşdeğerine dönüştürür A elemanların yerini alan ile ile desteklemek href bağlanmak. Bu, aşağıdakileri yazdığınızda şu anlama gelir:

<Bağlantıile="/bazı/yol">Bu, ince yönlendirmede bir Bağlantı BileşenidirBağlantı>

Svelte bunu tarayıcıya şu şekilde sunar:

<Ahref="/bazı/yol">Bu, ince yönlendirmede bir Bağlantı BileşenidirA>

Geleneksel yerine Link bileşenini kullanmalısınız. A ince yönlendirme ile çalışırken eleman. Bunun nedeni ise A öğeler, varsayılan olarak bir sayfa yeniden yüklemesi gerçekleştirir.

Svelte ve Svelte-Routing ile SPA Oluşturma

Kullanıcının kelimeleri aramasını sağlayan basit bir sözlük uygulaması oluşturarak öğrendiğiniz her şeyi uygulamaya koymanın zamanı geldi. Bu proje ücretsiz kullanacak Sözlük API'sı.

Başlamak için makinenizde Yarn'ın kurulu olduğundan emin olun ve şunu çalıştırın:

İplik davet oluştur

Bu, kullanarak yeni bir proje iskelesi oluşturacak Vite oluşturma aracı. Projenizi adlandırın, ardından çerçeve olarak "Svelte" ve varyant olarak "JavaScript" seçin. Ardından aşağıdaki komutları arka arkaya çalıştırın:

CD
iplik
iplik ekleme ince yönlendirme
iplik geliştirme

Ardından, içeriğini silin App.svelte dosyasını açın ve proje yapısını şu şekilde değiştirin:

Yukarıdaki çizimden, iki dosya içeren bir "bileşenler" klasörü olduğunu görebilirsiniz: Home.svelte Ve Anlamı.ince. Anlamı.ince kullanıcı bir kelimeyi aradığında görüntülenecek bileşendir.

Şuraya git: App.svelte Route, Router ve Link bileşenlerini ince yönlendirme kitaplığından dosyalayın ve içe aktarın. Ayrıca içe aktardığınızdan emin olun. Home.svelte Ve App.svelte bileşenler.

<senaryo>
 { Route, Router, Link } dosyasını "ince yönlendirme"den içe aktarın;
 "./components/Home.svelte" adresinden Ana Sayfayı içe aktarın;
 "./components/Meaning.svelte" den Anlamı içe aktarın;
senaryo>

Ardından, bir Yönlendirici bileşeni oluşturun. ana "app" sınıfına sahip HTML öğesi.

<Yönlendirici>
<anasınıf="uygulama">
ana>
Yönlendirici>

İçinde ana eleman, bir ekle gezinme alt öğesi olarak Link bileşeni olan öğe. Bu Bağlantı bileşeninin "to" pervanesi "/" işaret etmelidir. Bu bileşen, kullanıcının ana sayfaya gitmesine izin verecektir.

<anasınıf="uygulama">
<gezinme>
<Bağlantıile="/">EvBağlantı>
gezinme>
ana>

Şimdi rotalar üzerinde çalışma zamanı. Kullanıcı uygulamayı yüklediğinde, Ev bileşen oluşturmalı.

"/find/:word" konumuna gitmek, Anlam bileşen. ":word" yan tümcesi bir yol parametresidir.

Bu proje için CSS konusunda endişelenmenize gerek yok. Sadece kendi içeriğinizi değiştirin uygulama.css içeriğini içeren dosya uygulama.css gelen dosya bu GitHub deposu.

Artık rotaları belirleme zamanı. Kök seviyesi yolu, Ev bileşen, "/find/:word" oluşturmalı Anlam bileşen.

<Rotayol="/"bileşen={Ev} />
<Rotayol="/bul/:kelime"izin ver: parametreler>
<Anlamkelime={params.word} />
Rota>

Bu kod bloğu, izin vermek "word" parametresini aşağı doğru iletmek için yönerge Anlam pervane olarak bileşen

Şimdi, aç Home.svelte dosyalayın ve içe aktarın gezinmek "svelte-routing" kitaplığından yardımcı program ve bir değişken tanımlayın Girilen kelime.

<senaryo>
 { gezinmek } "ince yönlendirme"den içe aktarın;
 girilen kelimeye izin ver;
senaryo>

Altında senaryo etiketi, "ana sayfa" sınıfıyla bir ana öğe oluşturun, ardından div "sözlük-metin" sınıfına sahip öğe.

<anasınıf="ana sayfa">
<divsınıf="sözlük metni">Sözlükdiv>
ana>

Ardından, ile bir form oluşturun açık: gönder direktif. Bu form iki çocuk içermelidir: bir giriş değeri bağlı olan öğe Girilen kelime değişken ve kullanıcı yazmaya başlar başlamaz koşullu olarak oluşturulan bir gönder düğmesi:

<biçimaçık: gönder|varsayılan önleme={() => navigasyon(`/find/${enteredWord.toLowerCase()}`)}>
<giriş
 yazın="metin"
 bağlama: değer={enteredWord}
 placeholder="Aramaya başlayın..."
 otomatik odaklama
 />
 {#eğer girildiyseKelime}
<düğmetip="göndermek">Kelime aradüğme>
 {/eğer}
biçim>

Bu kod bloğu, gezinmek Gönderme işlemi bittiğinde kullanıcıyı yeniden yönlendirme işlevi. Şimdi, aç Anlamı.ince dosyasını açın ve komut dosyası etiketinde, kelime destekleyin ve oluşturun hata mesajı değişken:

kelimeyi dışa aktar;
let errorMessage = "Bağlantı yok. İnternetinizi kontrol edin";

Ardından, Dictionary API'ye bir GET isteğinde bulunun. kelime parametre olarak:

zaman uyumsuzişlevGetWordAnlamı(kelime) {
sabit cevap = beklemek gidip getirmek(
` https://api.dictionaryapi.dev/api/v2/entries/en/${kelime}`
 );
sabit json = beklemek yanıt.json();
konsol.log (json);


eğer (yanıt.tamam) {
geri dönmek json;
 } başka {
 errorMessage = json.message;
fırlatmakyeniHata(json);
 }
 }
izin vermek söz = getWordMeaning (kelime);

Yukarıdaki kod bloğunda, yanıt başarılı olursa eşzamansız işlev JSON verilerini döndürür. Taahhüt değişkeni, sonucu temsil eder. GetWordAnlamı çağrıldığında işlev.

İşaretlemede, sınıfla bir div tanımlayın anlam sayfası. Ardından, şunu tutan bir h1 öğesi tanımlayın: kelime küçük harfli değişken:

<divsınıf="anlam sayfası">
<h1>
 {word.toLowerCase()}
h1>
div>

Ardından, Svelte'nin bekleme bloklarını kullanarak GetWordAnlamı işlev:

{#söz bekle}
<P>Yükleniyor...P>
{:sonra girişler}
{:yakalamak}
 {hata mesajı}
{/bekliyor}

Bu kod, Yükleniyor... mesaj ne zaman GET isteği yapılır API'ye. Bir hata varsa, içeriğini gösterecektir. hata mesajı.

İçinde {:sonra girişler} engelle, aşağıdakileri ekleyin:

{#giriş olarak her giriş}
 {#her giriş. anlam olarak anlamlar}
<divsınıf="giriş">
<divsınıf="konuşmanın bölümü">
 {anlam.partOfSpeech}
div>
<ol>
 {#tanım olarak her anlam.tanımlar}
<li>
 {tanım.tanım}
<br />
<divsınıf="örnek">
 {#if tanım.örnek}
 {tanım.örnek}
 {/eğer}
div>
li>
 {/her biri}
ol>
div>
 {/her biri}
{/her biri}

Taahhüt başarılı bir şekilde çözülürse, girdileri değişken sonuç verilerini içerir.

Daha sonra her yineleme için giriş Ve Anlam, bu kod kullanarak konuşmanın bir kısmını işler anlam.konuşmanınbölümü ve kullanılan tanımların bir listesi tanım.tanım. Varsa, örnek bir cümle de verecektir.

Bu kadar. İnce yönlendirme kullanarak bir sözlük Tek Sayfa Uygulaması (SPA) oluşturdunuz. İsterseniz işleri daha da ileri götürebilir veya kontrol edebilirsiniz. ince gezgin, bir çatal ince yönlendirme.

İstemci Tarafında Yönlendirme İle Kullanıcı Deneyimini İyileştirme

Yönlendirmeyi sunucu yerine tarayıcıda işlemenin birçok faydası vardır. İstemci tarafı yönlendirmeden yararlanan uygulamalar, özellikle animasyonlar ve geçişlerle eşleştirildiğinde son kullanıcıya daha sorunsuz gelebilir.

Ancak, web sitenizin arama motorlarında daha üst sıralarda yer almasını istiyorsanız, sunucudaki rotaları ele almayı düşünmelisiniz.