Un'introduzione al routing in Svelte

Svelte è un framework web in rapida crescita che puoi utilizzare per creare siti web. Si presenta come un'alternativa leggera e facile da usare a framework popolari come React e Vue.

Ogni framework JavaScript popolare ha una libreria complementare che puoi utilizzare per il routing. Scopri come Svelte ti consente di gestire i tuoi URL e il codice che li gestisce.

Librerie di routing popolari

La libreria di routing più popolare per React è React Router, creato dal team Remix. Per VueJS, c'è Vue Router che offre allo sviluppatore un controllo preciso su qualsiasi navigazione. Nel mondo Svelte, la libreria di routing più popolare è instradamento snello.

L'altra libreria di routing principale per Svelte è svelte-navigator. Dal momento che è un fork di instradamento snello, è utile conoscere prima quella libreria.

Come funziona la libreria svelte-routing

Ci sono tre componenti importanti per la gestione delle rotte in Svelte:

Router, Collegamento, E Itinerario. Per utilizzarli nella tua applicazione, puoi semplicemente importare queste utilità dal file instradamento snello biblioteca.

<copione>
import {Route, Router, Link} da "svelte-routing";
copione>

Il componente Router può avere due prop opzionali: basepath E URL. IL basepath proprietà è simile a basename prop in React Router.

Per impostazione predefinita, è impostato su "/". basepath può tornare utile se la tua applicazione ha più punti di ingresso. Ad esempio, considera il seguente codice Svelte:

<copione>
 import {Route, Router, Link} from "svelte-routing";
 let basepath = "/utente";
 let path = location.pathname;
copione>
<Router {basepath}>
<dival clic={() => (percorso = posizione.percorso)}>
<CollegamentoA="/">Vai a casaCollegamento>
<CollegamentoA="/utente/davide">Accedi come DavideCollegamento>
div>
<principale>
 Tu sei qui: <codice>{sentiero}codice>
<Itinerariosentiero="/">
<h1>Benvenuto a casa!h1>
Itinerario>
<Itinerariosentiero="/davide">
<h1>Ciao David!h1>
Itinerario>
principale>
Router>

Se esegui questo codice, noterai che quando fai clic su Vai a casa pulsante, il browser passa al percorso di base "/user". Route definisce il componente che dovrebbe eseguire il rendering se il percorso corrisponde al valore specificato Itinerario puntello.

È possibile definire quali elementi eseguire il rendering all'interno del componente Route o separatamente .svelto file fintanto che lo importi correttamente. Per esempio:

<Itinerariosentiero="/Di"componente={Di}/>

Il blocco di codice sopra indica al browser di eseguire il rendering del file App componente quando il nome del percorso è "/about".

Quando si usa instradamento snello, definire i collegamenti interni con il Collegamento componente invece del tradizionale HTML UN elementi.

Questo è simile a come React Router gestisce i collegamenti interni; ogni componente Link dovrebbe avere un file A prop che dice al browser in quale percorso navigare.

Quando il browser esegue il rendering di un componente Svelte, Svelte converte automaticamente tutti i componenti Link in equivalenti UN elementi, sostituendo il A puntello con un href attributo. Ciò significa che quando scrivi quanto segue:

<CollegamentoA="/qualche/percorso">Questo è un componente di collegamento in svelte-routingCollegamento>

Svelte lo presenta al browser come:

<UNhref="/qualche/percorso">Questo è un componente di collegamento in svelte-routingUN>

Dovresti usare il componente Link invece del tradizionale UN elemento quando si lavora con svelte-routing. Questo è perché UN gli elementi eseguono un ricaricamento della pagina per impostazione predefinita.

Creare una SPA con Svelte e Svelte-Routing

È ora di mettere in pratica tutto ciò che hai imparato creando una semplice applicazione di dizionario che consenta all'utente di cercare parole. Questo progetto utilizzerà il free API del dizionario.

Per iniziare, assicurati di aver installato Yarn sulla tua macchina ed esegui:

filato crea vite

Questo impalcherà un nuovo progetto utilizzando lo strumento di compilazione Vite. Assegna un nome al tuo progetto, quindi scegli "Svelte" come framework e "JavaScript" come variante. Successivamente, esegui i seguenti comandi uno dopo l'altro:

CD
filato
il filato aggiunge un'instradamento svelto
filo dev

Quindi, elimina il contenuto del file App.svelte file e modificare la struttura del progetto in modo che assomigli a questo:

Dall'illustrazione sopra, puoi vedere che c'è una cartella "components" con due file: Home.svelte E Significato.svelte. Significato.svelte è il componente che verrà visualizzato quando l'utente cerca una parola.

Naviga verso il App.svelte file e importare i componenti Route, Router e Link dalla libreria svelte-routing. Assicurati anche di importare il file Home.svelte E App.svelte componenti.

<copione>
 import {Route, Router, Link} from "svelte-routing";
 importa Home da "./components/Home.svelte";
 import Significato da "./components/Significato.svelte";
copione>

Successivamente, crea un componente Router che esegue il wrapping di a principale Elemento HTML con la classe "app".

<Router>
<principaleclasse="app">
principale>
Router>

Nel principale elemento, aggiungi a nav elemento con un componente Link come figlio. L'elica "to" di questo componente Link dovrebbe puntare a "/". Questo componente consentirà all'utente di navigare verso la home page.

<principaleclasse="app">
<nav>
<CollegamentoA="/">CasaCollegamento>
nav>
principale>

È giunto il momento di lavorare sui percorsi. Quando l'utente carica l'app, il file Casa il componente dovrebbe eseguire il rendering.

Passando a "/find/:word" dovrebbe essere visualizzato il file Senso componente. La clausola ":word" è un parametro di percorso.

Per questo progetto, non devi preoccuparti dei CSS. Sostituisci semplicemente il contenuto del tuo app.css file con il contenuto del file app.css file da questo repository GitHub.

È giunto il momento di definire i percorsi. Il percorso a livello di root dovrebbe rendere il file Casa componente, mentre "/find/:word" dovrebbe rendere il Senso componente.

<Itinerariosentiero="/"componente={Casa} />
<Itinerariosentiero="/trova/:parola"let: param>
<Sensoparola={param.parola} />
Itinerario>

Questo blocco di codice utilizza il permettere direttiva per passare il parametro "word" al file Senso componente come oggetto di scena.

Ora apri il file Home.svelte file e importare il file navigare utility dalla libreria "svelte-routing" e definire una variabile inseritoParola.

<copione>
 import {naviga} da "svelte-routing";
 lascia entrareParola;
copione>

Sotto il copione tag, crea un elemento principale con la classe "homepage", quindi crea un file div elemento con la classe "dictionary-text".

<principaleclasse="home page">
<divclasse="dizionario-testo">Dizionariodiv>
principale>

Quindi, crea un modulo con un su: invia direttiva. Questo form dovrebbe contenere due figli: an ingresso elemento il cui valore è legato al inseritoParola variabile e un pulsante di invio che viene reso in modo condizionale non appena l'utente inizia a digitare:

<modulosu: invia|preventPredefinito={() => naviga(`/find/${enteredWord.toLowerCase()}`)}>
<ingresso
 tipo="testo"
 bind: valore={enteredWord}
 placeholder="Inizia la tua ricerca..."
 messa a fuoco automatica
 />
 {#se inseritaParola}
<pulsantetipo="invia">Cerca parolapulsante>
 {/Se}
modulo>

Questo blocco di codice utilizza il navigare funzione per reindirizzare l'utente una volta terminata l'azione di invio. Ora apri il file Significato.svelte file e, nel tag script, esportare il file parola prop e creare un file messaggio di errore variabile:

esportare lasciare parola;
let errorMessage = "Nessuna connessione. Controlla la tua connessione Internet";

Successivamente, effettua una richiesta GET all'API Dictionary passando il file parola come parametro:

asincronofunzionegetParola Significato(parola) {
cost risposta = aspetta andare a prendere(
` https://api.dictionaryapi.dev/api/v2/entries/en/${parola}`
 );
cost json = aspetta risposta.json();
consolare.log (json);
Se (risposta.ok) {
ritorno json;
 } altro {
 errorMessage = json.message;
gettarenuovoErrore(json);
 }
 }
permettere promessa = getWordMeaning (parola);

Nel blocco di codice precedente, la funzione asincrona restituisce i dati JSON se la risposta ha esito positivo. La variabile promessa rappresenta il risultato del getParola Significato funzione quando invocato.

Nel markup, definisci un div con la classe significato-pagina. Successivamente, definisci un elemento h1 che contenga il file parola variabile in minuscolo:

<divclasse="pagina di significato">
<h1>
 {word.toLowerCase()}
h1>
div>

Successivamente, usa i blocchi di attesa di Svelte per chiamare il getParola Significato funzione:

{#aspetta la promessa}
<P>Caricamento...P>
{:then voci}
{:presa}
 {messaggio di errore}
{/aspettare}

Questo codice visualizza il Caricamento... testo quando viene effettuata la richiesta GET all'API. Se c'è un errore, mostrerà il contenuto di messaggio di errore.

Nel {:then voci} blocco, aggiungere quanto segue:

{#ogni voce come voce}
 {#ogni voce.significati come significato}
<divclasse="iscrizione">
<divclasse="parte del discorso">
 {significato.parte del discorso}
div>
<ol>
 {#ogni significato.definizioni come definizione}
<li>
 {definizione.definizione}
<fratello />
<divclasse="esempio">
 {#if definizione.esempio}
 {definizione.esempio}
 {/Se}
div>
li>
 {/ogni}
ol>
div>
 {/ogni}
{/ogni}

Se la promessa si risolve con successo, il inserimenti La variabile contiene i dati risultanti.

Quindi per ogni iterazione di iscrizione E Senso, questo codice esegue il rendering della parte del discorso utilizzando significato.partedeldiscorso e un elenco di definizioni che utilizzano definizione.definizione. Renderà anche una frase di esempio, se disponibile.

Questo è tutto. Hai creato un dizionario Single Page Application (SPA) utilizzando svelte-routing. Puoi andare oltre se vuoi, oppure puoi dare un'occhiata svelte-navigator, una forchetta di instradamento snello.

Miglioramento dell'esperienza utente con il routing lato client

Ci sono molti vantaggi nella gestione del routing nel browser invece che nel server. Le applicazioni che utilizzano il routing lato client possono risultare più agevoli per l'utente finale, soprattutto se abbinate ad animazioni e transizioni.

Tuttavia, se desideri che il tuo sito Web si posizioni più in alto nei motori di ricerca, dovresti prendere in considerazione la gestione dei percorsi sul server.